一、创建一个Vue实例
Vue是数据驱动视图,那么它是怎么做到这点的,答案是:Vue实例。那么怎么创建和使用Vue实例,可分为四部:
1.创建实例
创建一个Vue实例的语法:
<script>
let vm = new Vue({});
</script>
通过关键语句new Vue()创建一个Vue实例(此时参数为一个空对象)。
2.设置数据
通过给上面的对象参数增加data属性来给实例设置数据。
<script>
let vm = new Vue({
data:{
name:"张三",
age:21
}
})
</script>
3.挂载元素
创建实例,给实例设置数据后,要想把数据展示在视图上就要挂载元素。
<div id="app"></div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"张三",
age:21
}
})
</script>
此时,参数中不仅有data属性,还有一个el属性,这个el参数是一个DOM元素,用来给实例提供挂载目标。
4.渲染
最后,就是将数据绑定到视图上,也就是数据渲染。
<div id="app">
我是{{name}},我今年{{age}}岁.
</div>
通过{{ }}可以直接读取data中到name以及age的值。