创建和使用Vue实例,分为4部:
第1步 创建语法
<script>
let vm = new Vue({});
</script>
释:给Vue( )传了一个参数选项,是一个空对象;
第2步 设置数据
let vm = new Vue({
//实例vm的数据
data:{
name: "hiddensmile",
sex : "女"
}
});
释:参数对象不再是一个空对象,它包含一个属性:data,而data的值也是一个对象,这个对象就是我们给实例vm设置的数据了。比如:name为hiddensmile,sex为女等等。
第3步 挂载元素(怎么把数据展示在视图上呢? 通过挂载元素)
视图view部分:
<div id="app"></div>
视图(html部分)上我们有一个id为“app”的div元素。
let vm=new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
name:"hiddensmile",
sex:"女"
}
})
释:不但有属性“data”,还多了个属性:“el”,el参数提供一个在页面上已经存在的DOM元素,作为vm的挂载目标。表示vm和id为“app”的DOM节点就关联起来了;
第4步 渲染(把vm的数据绑定到指定的视图上)
<div id="app">
我是{{ name }},
是{{sex}}性
</div>
释:需要用一个双大括号:{{ }} 即可,{{ name }} 和 {{ sex}} 就是我们给实例vm设置的数据name和sex,我们用{{ }}可以直接读取到它们的值;