今天先介绍Vue最简单最基本的语法,声明式渲染。
Vue实例
上篇文章中我们使用new关键字创建了一个Vue实例:
<div id="app">
<div>messgae:{{message}}</div>
</div>
<script>
var vm = new Vue({
//el是css选择器,或者HTMLElement实例,提供Vue实例挂载的Dom节点
el:'#app',
data:{
message:'hello vue'
}
});
</script>
或者(如果没有提供el选项,需要手动调用mount方法)
var vm = new Vue({
data:{
message:'hello vue'
}
}).$mount('#app');
插值
普通文本
使用 {{ }} 实现数据绑定到视图:
<div>messgae:{{message}}</div>
var vm = new Vue({
data:{
message:'hello vue'
}
}).$mount('#app');
运行效果:
使用js表达式
可以在{{}}使用简单的js表达式,例如:
<div>{{num+1}}</div>
<div>{{isRight? name1:name2}}</div>
<div>{{str.split('_').join('')}}</div>
原始html
{{}} 语法会将数据解释为普通文本,而不是html。有时我们确实需要插入html而非普通文本(虽然这种情况很少见,至少目前我没有遇到过这样的需求,所以这里简单带过。真正用到时,可以去官方文档查看)。
使用v-html指令:
<div id="app">
<div>message:{{message}}</div>
<div>原始html:{{html}}</div>
<div v-html="html">原始html:</div>
</div>
<script>
var vm = new Vue({
data: {
message: 'hello vue',
html: '<div style="color: red;">hello world</div>'
}
}).$mount('#app');
</script>
运行效果:
新的属性
注意:由于Vue底层的实现,Vue无法监听新加的属性变化。
Vue只在初始化的时候,递归data的属性转换为setter/getter方法,使data的属性可以响应数据变化。所以一个属性如果没有在data中声明,而是后期加进去的,vue监听不到该属性的变化,也就无法做到视图的同步改变。
解决方案有两种:
data 中声明所有属性
既然无法监听到新添加的属性,那在data中声明所有要用到的属性,并赋予其默认值就可以了。后期属性改变的时候,vue就可以监听到属性变化,做到视图同步改变了。
Vue的$set()
set api
set()方法向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
如下例:info中未声明weight属性,在add中直接新增,视图不会响应改变,使用this.$set()方法可以将新增属性设置为响应式的。
<div>height:{{info.height}}</div>
<div>weight:{{info.weight}}</div>
<button @click="add">add</button>
data: {
name: 'ayy',
info: {
height: 165
}
},
methods: {
add() {
//直接新增,响应不到
// this.info.weight = 60;
/*
* vue的set方法可以新增响应属性
* 第一个参数为要新增的对象
* 第二个参数为要新增的属性名
* 第三个为属性值
*/
this.$set(this.info,'weight',60);
}
}
但是set方法不允许动态添加根级响应式属性,所以如果是根级属性(data数据对象中第一层属性),必须在data中声明。
如果你使用了未在data中声明的属性,Vue 将警告你渲染函数正在试图访问不存在的属性。