您的位置:首页 > 产品设计 > UI/UE

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

2016-11-17 22:14 996 查看

属性和方法

每个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]
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端 vue