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] } } }
相关文章推荐
- 基础 - 从模板语法数据绑定、指令到计算属性总结
- VUE2.0 全套 demo 讲解 基础3(计算属性)
- vue.js基础-模板语法-指令
- Vue基础之Vue模板语法
- vue2.0+基础知识连载(13)--- 计算属性的使用
- vue.js基础知识篇(3):计算属性、表单控件绑定
- Vue基础(模板语法)
- Swift基础语法-属性,存储属性,延迟存储属性,计算属性,属性观察器,类属性
- vue.js基础-模板语法-插值
- VUE2.0全套demo讲解 基础1(模板语法)
- VUE2.0 全套demo讲解 基础3(计算属性)
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七八║Vue基础: 指令(下)+计算属性
- vue基础语法以及父子组件如何相互传值
- Vue 基础模板语法
- VUE2.0全套demo讲解 基础1(模板语法)
- VUE2.0全套demo讲解 基础1(模板语法)
- Swift基础语法: 26 - Swift的存储属性, 计算属性, 属性监视器
- Vue基础(计算属性和观察者)
- Linux学习之Shell--第一天:Shell的简要说明以及语法基础
- UCHome二次开发 模板基础语法