Vue--基础模板语法以及计算属性

属性和方法

每个Vue实例会代理其data对象里所有的对象 var app = new Vue({ data: { message : '' } })

也就是说，可以直接通过:

app.message = 'xxx'

来改变data中出现的属性， 从而引发视图的变化。 2. 注意只有这些被代理的属性是响应的。 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 3. Vue实例中，带有前缀 $ 的属性会有特殊作用， 比如：

var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true vm.$watch('a', function(newVal, oldVal){ // 此方法在属性a改变后发生 })

---

生命周期

beforeCreate : 组件实例刚被创建，组件属性计算之前（data等）craeted : 组件实例创建完成，属性已绑定，但DOM未生成，$el属性还不存在。beforeMount ： 模板编译/挂载之前mounted : 模板编译/挂载之后beforeUpdate : 组件更新之前updated : 组件更新之后activated ： for keep-alive 组件被激活时调用deactivated : for keep-alive 组件被移除时调用beforeDestroy ： 组件销毁之前destroyed : 组件销毁之后

---

模板语法

v-once : 这个节点上的所有绑定，单次插值，之后数据不会再变化v-html : 一般情况 {{ }} 解析出的数据为纯文本，想要输出html内容则可如下，但数据绑定将被忽略，标签中的内容也会被会忽略: <div id="app"> <p>{{ message }}</p> <p v-html="htmltest"></p> </div> new Vue({ el: '#app', data: { message: '<span>Hello Vue.js!</span>', htmltest: '<span class="test-1">it is html content!</sapn>' } }) v-bind : 对于html属性，{{ }}不能用于此。取而代之的是 v-bind <div v-bind:id="dynamicId"></div> new Vue({ el: '#app', data: { dynamicId: 'what' } }) 表达式 : 除了变量，还可使用表达式；每个绑定只能包含单个表达式；只能访问白名单中的全局变量，如 Math 和 Date，不要试图访问用户在模板表达式中定义的全局变量。 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> filters : 类似shell中的管道； {{ message | filterA('arg1', arg2) }} new Vue({ data: { message : 'xxx' } filters: { capitalize: function (value, arg1, arg2) { //value } } })

过滤器函数总接受表达式的值作为第一个参数。 字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写 : <a v-bind:href="url"></a> //可写为： <a :href="url"></a> <a v-on:click="doSomething"></a> //可写为： <a @click="doSomething"></a>

---

计算属性

计算属性 vs 表达式

{{ message.split('').reverse().join('') }}

但若使用频繁，处处如此调用，往往是不可取的。计算属性虽然不是普通的属性，但其也可以被当作一种属性，且依赖于其他属性。如下：

computed: { // 计算属性的 getter方法 reversedMessage: function () { return this.message.split('').reverse().join('') } }

计算属性的 getter 方法干净无副作用…

计算属性 vs 函数

<p>反转语句 : {{ reverseMessage() }}<\/p> methods: { // 计算属性的 getter方法 reversedMessage: function () { return this.message.split('').reverse().join('') } }

两种方式得到的结果是完全一样的，不同的地方在于计算属性是基于其依赖的缓存 至于是否需要缓存，就看实际情况啦

计算属性 vs $WATCH

$watch 用于监听已有的普通属性，若是沿用上面的例子，那么思路就是指定message以及reversedMessage两个属性，之后监听message属性的变化的同时，改变reversedMessage的值。 但初始化时必须将reversedMessage手动设置为message的倒序字符串。 上面例子似乎不妥，所以换用下面的例子：

data: { firstName: 'aaa', lastName: 'bbb', fullName: 'aaabbb' }, computed: { computedFullName: function () { return this.firstName + this.lastName; } }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }

无论是获取computedFullName还是获取fullName的值都是一样的。但明显计算属性的代码更简洁精炼。

计算属性 set 方法：

<p>完整名字 : {{ fullName }}</p> computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }