开始自己的第一个Vue应用
HTML部分
<div id="test">
{{message1}}
{{message2}}
{{message3()}}
</div>
js部分
new Vue({
el: '#test',
data: {
message1:"hello world"
},
computed: {
message2: function () {
return "computed:"+this.message1;
}
},
methods:{
message3:function(){
return "methods:hello world";
}
}
})
- {{属性}} 是“Mustache” 语法(双大括号)
- {{message1}}是数据属性data的占位符
- 可以用vue.message1取到data属性中的message1属性的值
- {{message2}}是计算属性computed占位符
- 可以用vue.message2取到computed属性message2方法的返回值
- {{message3}}调用了vue中的方法
- 不可以用vue.message3取到methods中message3方法的返回值
- 不可以调用 非vue methods属性中的方法
在这段代码中 {{属性}}表示一个占位符 ,占位符将会被替代为对应数据对象上相应属性的值。无论何时,绑定的数据对象上相应属性发生了改变,插值处的内容都会更新
可以使用方法对其赋值[必须带()]会调用methods里的方法 用其返回值作为数据