Vue.js笔记

  1. 计算属性
  2. 组件

计算属性

处理复杂逻辑,比起methods性能更好,基于依赖缓存,只有相关以来发生改变时才会重新取值. 使用method在重新渲染时,函数总会重新调用执行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
var cnt=1;
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
cnt += 1;
return cnt + this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
cnt += 1;
return cnt + this.message.split('').reverse().join('')
}
}
})
</script>

组件

抽象,用来封装可重用的代码.

1
2
3
4
5
6
7

<script>
Vue.component('demo',{
template: ''
})

</script>
script>