v-for
1、v-for 可以通过一个对象的属性来迭代数据
<div id="main">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#main',
data: {
object: {
name: '百度',
url: 'http://www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
2、也可以提供第二个的参数为键名
<div id="main">
<ul>
<li v-for="(value,key) in object">
{{ key }}:{{ value }}
</li>
</ul>
</div>
<script>
new Vue ({
el:"#main",
data: {
object: {
name: '百度',
url: 'www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
3、第三个参数为索引
<div id="main">
<ul>
<li v-for="(value,key,index) in object">
{{index}}.{{key}}.{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#main",
data: {
object: {
name: '百度',
url: 'www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
4、v-for 也可以循环整数
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
Vue.js 计算属性
{ 键：函数} { [key: string]: Function | { get: Function, set: Function } } ，可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取，值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4
1、计算属性关键词: computed。
<div id="main">
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#main',
data: {
message: 'ABC!'
}
})
</script>
2、声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
<div id="main">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
3、可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
类型: { [key: string]: Function }
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
<div id="main">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
4、computed setter
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'baidu http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
key的使用
一般情况下，vue在渲染完成后，如果数据发生变化，只会重新渲染数据，不会重新渲染整个元素，但是有时候我们需要元素被重新渲染，此时就需要使用key关键字，使用v-bind绑定key关键字，可以实现在数据发生变化时候重新渲染整个元素。注：同一父级元素下所有子元素如果都要在数据变化后重新渲染元素，则需要被绑定的key
v-move的使用
在使用<transition-group>时候，不仅可以定义进入离开动画，还可以使用新增的v-move特性，与过渡一样，默认为v-move，可以用name进行自定义前缀，也可以用move-class属性手动设定。用了这个之后就可以实现移动过程中的动画。
