Vue学习笔记①——创建第一个Vue实例(上)

vue的导入方式与其他script文件相同，可以选择

1.从网上下载vue.js

2.直接导入在线vue文档

我这里直接按照官方文档推荐的方法导入了在线vue——

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

*vue的版本@2.5.16可以手动切换成自己想要的版本(目前2.5.16已是最新)

一.创建一个Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：

var vm = new Vue({
  // 选项
})

二.数据与方法

当我需要将一个数据对象添加到Vue中时，可以在js中这样写：

//数据对象
var data={"a":1};
//创建一个vue实例，并将数据添加到Vue对象体内
var vm = new Vue({
    el:"#v1",
    data:data
});

el的作用是标记这个Vue使它能被html元素识别

在html中添加div如下：

<div id="v1">
    <p>初始化的vm属性a: {{a}}</p>
</div>

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时， 视图 将会产生“响应”，即匹配更新为新的值。
此时vm.a==data.a表达式结果为true
仅在Vue实例被创建时其data中存在的属性才是响应式的，即如果后续往data中添加其他的属性，并不会产生响应式的效果。
所以当我们晚些时候需要用Vue中的某个属性时，可以在实例化Vue时先初始化这个属性，该属性在后续操作中仍是响应式的

举个栗子，我们将html及script作如下修改：

<div id="v1">
    <p>初始化的vm属性a: {{a}}</p>
    <p>未初始化的b:{{b}}</p>
    <p>初始化为undefined的vm属性c:{{c}}</p>
    <!--a与c会随着data中对应的值的变化而同步变化，b则不会-->
</div>

<script>
        //数据对象
        var data={"a":1,"c":undefined};
        //创建一个vue实例，并将数据添加到Vue对象体内
        var vm = new Vue({
            el:"#v1",
            data:data
        });
</script>