vue入门实例属性和方法

2. vue的基本使用
   （1）npm init -y //初始化
   （2）npm install vue -D //安装
3. vue实例属性
   (1)数组的限制：不可以直接通过索引改变数组、不可以通过数组的长度改变数组。
   (2)小胡子语法：{{ }}，里面的内容可以是变量（在data中定义）、可以运算、三元运算符、不可以定义变量赋值定义函数、可以放函数的返回值。

    <div id="app">
        {{msg}}
        {{obj}}
        <!-- {{(function fn(){return 10})()}} -->
        <!-- {{ {name:'honey'} }} -->
        {{arr}}
    </div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            msg:10,
            obj:{
                name:'lly'
            },
            arr:[1,2,3]
        }
    })
    vm.$set(vm.obj,"age",20); //对象的修改
    vm.arr.splice(0,1,5);  //数组的修改
</script>

4.vue实例的方法：

vm.$set/vm.$delete  更改/删除对象或数组
vm.$el //获取挂载的DOM元素
vm.$data //获取响应式数据
vm.$options //所有的选项
vm.$watch //监视数据的变量
vm.$nextTick //获取真实的DOM元素
vm.$mount //设置vue实例挂载的DOM元素

（1）$watch如下：

    <div id="app">
        {{msg}}
    </div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            msg:10
        }
    })
    vm.$watch('msg',function(newVal,oldVal){
        console.log(newVal);
    })
    vm.msg=20;
    console.log(vm.$el.innerHTML);
</script>

要想在控制台打印出来的是改变之后的DOM元素，需要使用$nextTick,如下：

运行的结果如下：