1、列表渲染的基本知识
指令名称：v-for
指令格式:(别名 in 表达式)
demo1：
基本渲染：
eg：
基本语法
可以看出，这是一个最简单的v-for循环实例，其中info是你自己定义的名字，但是在渲染的时候应该使用info在<li></li>标签中进行渲染。
输出结果
demo2，v-for升级的例子
(1)在数组中存放对象
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
输入参数
html代码
js代码
(2) 对象的循环
对象的循环
可以使用一个对象的参数、两个对象的参数、三个对象的参数。
2.变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push() pop() shift() unshift() splice() sort() reverse()
替换数组：
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
eg：
example1.items = example1.items.filter(function(item){
returnitem.message.match(/Foo/)
})
vue对可以改变原数组的方法【push()、pop()、shift()、unshift()、splice()、sort()、reverse()】进行了改写，以保证数组变化触发响应式
3.计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
{{ message.split('').reverse().join('') }}
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，
就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm =new Vue({
el:'#example',
data: {
message:'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage:function () {
// `this` 指向 vm 实例
returnthis.message.split('').reverse().join('')
}
}
})
结果：
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作属性vm.reversedMessage的 getter 函数：
console.log(vm.reversedMessage)// => 'olleH'
vm.message ='Goodbye'
console.log(vm.reversedMessage)// => 'eybdooG'
你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage的值始终取决于vm.message的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道vm.reversedMessage依赖于vm.message，因此当vm.message发生改变时，
所有依赖vm.reversedMessage的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
计算属性缓存
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
侦听属性 （监听属性）
{{ fullName }}
// 侦听属性
var vm =new Vue({
el:'#demo',
data: {
firstName:'Foo',
lastName:'Bar',
fullName:'Foo Bar'
},
watch: {
firstName:function (val) {
this.fullName = val +' ' +this.lastName
},
lastName:function (val) {
this.fullName =this.firstName +' ' + val
}
}
})//计算属性
var vm =new Vue({
el:'#demo',
data: {
firstName:'Foo',
lastName:'Bar'
},
computed: {
fullName:function () {
returnthis.firstName +' ' +this.lastName
}
}
})
计算属性的setter
// ...
computed: {
fullName: {
// getter
get:function () {
returnthis.firstName +' ' +this.lastName
},
// setter
set:function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length -1]
}
}
}
// ...
现在再运行vm.fullName = 'John Doe'时，setter 会被调用，vm.firstName和vm.lastName也会相应地被更新
网友评论