Vue学习笔记入门二

82 阅读1分钟

一、创建一个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的值。