Vue（一）：简单使用

1.引入js

要对vue进行使用，首先要引入相关的js文件：

<script type="text/javascript" src="../js/vue.js"></script>

此处我将vue.js下载到了本地进行引用。

2.准备容器

<!-- 容器 -->
    <div id="root">
        <h1>Hello, {{name}}</h1>
    </div>

这里是写了一个id为root的div，其中{{name}}是vue的插值语法。

3.创建vue实例

    <script type="text/javascript">

        //vue对象
        const x = new Vue({
            el: "#root",//绑定容器，通常是使用css选择器
            data: {//数据
                name: "world"
            }
        })
    </script>

这里new了一个vue实例，其中包含el和data两个参数。el是element的缩写，即元素的意思，它通常使用css选择器来与容器进行绑定，这里绑定的就是上面准备好的root容器；data中存放的是具体的数据，也是键值对的形式，这里只存放了一个name数据，值为“world”。

4.效果展示

 5.需要注意的点

a. 容器与实例的绑定是一对一的关系，不能一对多或多对一。

b. {{XXX}}是vue的插值语法，其中的XXX是js表达式，并不仅仅局限于data中存在的数据。

c. 容器里的代码被称为“vue模板”。

d. 真实开发中只会有一个vue实例，会配合组件一起使用。

e. 当实例中data中的数据变化时，页面上使用该数据的地方也会改变。

 

 

（本文仅作个人学习记录用，如有纰漏敬请指正）