Vue基础---->VueJS的使用(二)
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。回忆永远是惆怅。愉快的使人觉得：可惜已经完了，不愉快的想起来还是伤心。
vue中的重要特性
一、vue中的自定义组件
html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component my-name="huhx"></my-component>
</div>
<script type="text/javascript" src="js/vue3.js"></script>
</body>
</html>
vue3.js的代码：
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!{{myName}}</div>',
props: ['myName']
}) // 注册
Vue.component('my-component', MyComponent); // 创建根实例
var ap = new Vue({
el: '#app',
})
运行效果如下：
二、vue中的自定义指令
html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue4</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-my-directive="someValue">{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue4.js"></script>
</body>
</html>
vue4.js:
Vue.directive('my-directive', {
bind: function() {
// 准备工作
console.log("bind function.");
},
update: function(newValue, oldValue) {
// 值更新时的工作
console.log("new: " + newValue + ", old: " + oldValue);
},
unbind: function() {
// 清理工作
console.log("unbind function.");
}
});
var demo = new Vue({
el: '#app',
data: {
msg: 'hello!'
}
})
运行的效果:
console打印的日志：
bind function.
new: undefined, old: undefined
三、vue中的自定义过滤器
html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue5</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<span v-text="message | reverse"></span>
</div>
<script type="text/javascript" src="js/vue5.js"></script>
</body>
</html>
js的代码如下：
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
});
var demo = new Vue({
el: '#app',
data: {
message: 'hello!'
}
});
运行的效果如下：
四、修改上述的过滤器，使它可以处理value为空时，返回一个默认期待的数值。
- js的代码：
Vue.filter('reverseFilter', function(string, defaultValue) {
if (!string) {
return defaultValue;
}
return string.split('').reverse().join('');
});
html的代码：页面显示为hello world
<div>
{{testFilter | reverseFilter('hello world')}}
</div> data() {
return {
testFilter: null,
}
}
关于vue中过滤器的详细讲解，可以参考博客：https://zhuanlan.zhihu.com/p/27445461
友情链接
Vue基础---->VueJS的使用(二)的更多相关文章
- Vue基础---->VueJS的使用(一)
Vue.js是一个构建数据驱动的web界面的库.它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件,今天我们就开始vue.js的学习. vue的安装及使用 一.vue的下载地址:ht ...
- Vue基础知识总结（二）
一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- .svn批量删除
c.bat @echo on @rem 删除SVN版本控制目录 @rem for /r . %%a in (.) do @if exist "%%a\.svn" @echo &qu ...
- Transistor 晶体管 场效应 双极型 达林顿 CMOS PMOS BJT FET
Transistor Tutorial Summary Transistor Tutorial Summary Bipolar Junction Transistor Tutorial We can ...
- 创建一个Windows的NTP Server
搭建一个VMware vRealize Suite的时候遇见了不少时间同步的问题, 实验室里网络与外界隔绝, 不能使用公网的NTP服务器, 所以使用文中的方法自己搭建了一个. 蛮好用的. Creati ...
- React同构直出原理浅析
通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...
- Find Minimum in Rotated Sorted Array leetcode java
题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...
- Crypto++入门学习笔记（DES、AES、RSA、SHA-256）(加解密)
转自http://www.cppblog.com/ArthasLee/archive/2010/12/01/135186.html 最近,基于某些原因和需要,笔者需要去了解一下Crypto++库,然后 ...
- Codeforces Round #292 (Div. 1) B. Drazil and Tiles 拓扑排序
B. Drazil and Tiles 题目连接: http://codeforces.com/contest/516/problem/B Description Drazil created a f ...
- VC++ 学习笔记（一）：如何开始
毫无疑问,学习C++是一件痛苦的事情. 我大概十年前接触C++.那是在学校里,准备考研究生,某学校要求考C++.我就开始一点一点学习,学习的过程还是比较舒服的.不得不说,就古典C++的理论,钱老讲的还 ...
- Https 公钥、私钥、证书
.https的握手协议: http://blog.csdn.net/clh604/article/details/221799072.证书的概念:http://blog.csdn.net/sealya ...
- Android Studio] Gradle项目中添加JNI生成文件(.so文件)
转:http://blog.csdn.net/qiujuer/article/details/24209457 为了适应潮流使用Android Studio还是有半年多了! 对于从Eclipse迁移项 ...