1、Vue 常用特性
1.1 Vue 常用特性概览
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 生命周期
1.2 表单操作
（1）基于 Vue 的表单操作
- Input 单行文本
- textarea 多行文本
- select 下拉多选
- radio 单选框
- checkbox 多选框
（2）表单域修饰符
- number：转化为数值
- trim：去掉开始和结尾的空格
- lazy : 将 input 事件切换为 change 事件
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>
1.3 自定义指令
（1）为何需要自定义指令？
内置指令不满足需求。
（2）自定义指令的语法规则（获取元素焦点）
// 自定义指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
// el表示指令所绑定的元素
el.focus(); // 获取焦点
}
});
（3）自定义指令用法
<input type="text" v-focus>
（4）带参数的自定义指令（改变元素背景色）
// 自定义指令-带参数
Vue.directive('color', {
// el：指令所绑定的元素，可以用来直接操作 DOM。
// binding：一个对象,包含：
// name：指令名，不包括 v- 前缀。
// value：指令的绑定值 除此之外还有其他内容，这里省略
bind: function (el, binding) {
// console.log(binding);
// console.log(binding.value);
console.log(binding.value.color);
// 根据指令的参数设置背景色
el.style.backgroundColor = binding.value.color;
}
});
（5） 指令的用法
<input type="text" v-color='{color:"orange"}'>
（6）局部指令
// 自定义指令-局部指令
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
methods: {
handle: function () {
}
},
directives: {
color: {
// el：指令所绑定的元素，可以用来直接操作 DOM。
// binding：一个对象,包含：
// name：指令名，不包括 v- 前缀。
// value：指令的绑定值 除此之外还有其他内容，这里省略
bind: function (el, binding) {
// console.log(binding);
// console.log(binding.value);
console.log(binding.value.color);
// 根据指令的参数设置背景色
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function (el) {
el.focus();
}
}
}
});
<div id="app">
<input type="text" v-color='msg'>
<input type="text" v-focus>
</div>
1.4 计算属性
（1） 为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。
（2）计算属性的用法
<!-- 为何需要计算属性？ -->
<!-- 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 -->
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ni hao'
},
// 计算属性
computed: {
reverseString: function () {
return this.msg.split('').reverse().join('');
}
}
});
</script>
（3） 计算属性与方法的区别
- 计算属性是基于它们的依赖进行缓存的。
- 方法不存在缓存。
1.5 侦听器
（1）侦听器的应用场景
数据变化时执行异步或开销较大的操作。
（2）侦听器的用法
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<!-- 侦听器的应用场景：数据变化时执行异步或开销较大的操作 -->
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jim Green'
},
// 计算属性
// computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName;
// }
// },
// 侦听器：数据一旦发生变化就通知侦听器所绑定方法
watch: {
firstName: function (val) {
// val表示变化之后的值
this.fullName = val + ' ' + this.lastName;
},
lastName: function (val) {
// val表示变化之后的值
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
1.6 过滤器
（1）过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。
（2）自定义过滤器
Vue.filter(‘过滤器名称’, function(value){
// 过滤器业务逻辑
})
（3）过滤器的使用（支持级联操作 ）
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>
（4）局部过滤器
filters:{
upper: function(){}
}
例子：
<!-- 过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等 -->
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:abc='msg | upper'>测试数据</div>
</div>
<script src="js/vue.js"></script>
<script>
// 过滤器
// 1、可以用与插值表达式和属性绑定
// 2、支持级联操作
// 全局过滤器
// Vue.filter('upper', function (val) {
// return val.charAt(0).toUpperCase() + val.slice(1);
// });
Vue.filter('lower', function (val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
// 局部过滤器
filters: {
upper: function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
</script>
（5）带参数的过滤器
Vue.filter(‘format’, function(value, arg1){
// value就是过滤器传递过来的参数
})
（6）过滤器的使用
<div>{{date | format(‘yyyy-MM-dd')}}</div>
例子：
<div id="app">
<div>{{date | format('yyyy-MM-dd')}}</div>
</div>
<script src="js/vue.js"></script>
<script>
// 过滤器案例：格式化日期
Vue.filter('format', function (value, arg) {
// value就是过滤器传递过来的参数
if (arg == 'yyyy-MM-dd') {
var ret = '';
ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
return ret;
}
});
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
1.7 生命周期
（1）主要阶段
-
挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted -
更新（元素或组件的变更操作）
① beforeUpdate
② updated -
销毁（销毁相关属性）
① beforeDestroy
② destroyed
（2）Vue 实例的产生过程
① beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问 methods， data， computed等上的方法和数据。
② created：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。
③ beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把 data 里面的数据和模板生成 html，完成了 el 和 data 初始化，注意此时还没有挂在 html 到页面上。
④ mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。模板中的 HTML 渲染到 HTML 页面中，此时一般可以做一些 ajax 操作，mounted 只会执行一次。
⑤ beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。这一步还可以用 this 来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的 dom 事件。
⑧ destroyed：实例销毁后调用。调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。