一.data属性
data
必须声明为返回一个初始数据对象的函数
//正确用法,使用函数返回对象
data:function() {
return {
title: 'Hello'
}
}
二.模板语法—插值
1.文本(使用双大括号插值){{ }}
2.通过 v-once
指令,可以执行一次性插值,当数据改变时,插值处的内容不会更新。
3.双大括号会将数据解释为普通文本,为了输出真正的 HTML,需要使用 v-html
指令
4.Mustache 语法不能作用在 HTML attribute(特性) 上,应该使用 v-bind
指令
5.v-if
指令将根据表达式 seen 的值的真假来插入
/移除
元素。
6. v-on
指令,用于监听 DOM 事件
{{msg}}
{{text}}
使用双大括号:{{ rawHtml }}
使用v-html:
蓝色
现在你看到我了
export default {
data:function() {
return {
msg:"hi uniapp!",
text:"一次性插值,不改变",
rawHtml:'这是红色 ',
color:'blue',
seen:true,
}
}
}
1.reversedMessage
反转
.reversedMessage 依赖于 .message,因此当 .message 发生改变时,所有依赖 .reversedMessage 的绑定也会更新。
Original message:{{ message }}
Computed reversed message:{{ reversedMessage }}
export default {
data:function() {
return {
message:'Hello'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
// 结果:Hello/olleH
2.也可以通过在表达式中调用方法来达到同样的效果:
Reversed message: {{ reversedMessage() }}
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
3.计算属性的 setter
计算属性默认只有 getter
,需要时也可以提供一个 setter
:
{{fullName}}
export default {
data:function() {
return {
firstName:'Dell',
lastName: 'Lee'
}
},
computed: {
fullName:{
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
}
注
:get
用来获取属性值,同时计算生成新的值。
set
:用来改变传过来的值,发生改变的时候,同时让数据的内容也发生改变。
观察和响应 Vue 实例上的数据变动:watch
{{fullName}}
export default {
data:function() {
return {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
}
// 结果:Foo Bar