一:表单操作
表单.png
表单修饰符:
表单修饰符.png
①
<input type="text" v-model.number='age'>
②
<input type="text" v-model.trim='info'>
③
<input type="text" v-model.lazy='str'>
二:自定义指令
自定义指令.png
常用(bind,inserted)
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
局部指令:
directives: {
focus: {
inserted: function (el) {
el.focus();
},
},
},
三:计算属性
①基本用法:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
计算属性computed写法:
**在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。**
我们把上面的例子用计算属性的方式重写一下
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</div>
Vue({
el: '#example',
data: {
message: 'Hello' },
computed: {
reversedMessage: function () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
运行结果：
Original message: "Hello"
Computed reversed message: "olleH"
②计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
<body>
<div id="app">
<button @click="add()">补充货物1</button>
<div>总价为：{{price}}</div>
</div>
</body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
}
}
});
计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性; 二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据，
<div id="app1"></div>
<div id="app2">{{ reverseText}}</div>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});
var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
}
}
});
③计算属性缓存
我们可以将同一函数定义为一个方法而不是一个计算属性，两种方式的最终结果确实是完全相同的。只是一个使用reversedMessage()取值，一个使用reversedMessage取值。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 message还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。*
四:侦听器
侦听器watch.png
侦听器与计算属性的区别
简单总结:
- 如果一个数据需要经过复杂计算就用 computed
-
如果一个数据需要被监听并且对数据做一些操作就用 watch
五:过滤器
5.1过滤器的作用
过滤器的作用.png
5.2自定义过滤器
全局过滤器
自定义过滤器.png
5.3过滤器的使用
过滤器的使用.png
使用多个过滤器时,会将上一个过滤的结果作为下一个过滤器的输入值再进行过滤.
5.4局部过滤器
image.png
filter: {
upper(val) {
return val.charAt(0).toUpperCase + val.slice(1);
},
lower(val){
return val.charAt(0).toLowerCase() + val.slice(1);
}
},
5.5带参数的过滤器及其使用
带参数的过滤器.png
使用带参数的过滤器.png
六:生命周期
6.1主要阶段
生命周期.png
生命周期图解.png
各阶段说明.png
- 详细：
实例被挂载后调用，这时el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。
注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () {
this.$nextTick(function () {
// 仅在整个视图都被渲染之后才会运行的代码
})
}
该钩子在服务器端渲染期间不被调用。
捋一捋服务器端渲染和客户端渲染的区别
注意:所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法(例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。
网友评论