Vue基础指令

html部分：

<div id="app">
    <!-- 插值表达式 -->
    <!-- {{ -->
    <!-- 这里面写表达式 -->
    <!-- }} -->
    {{"hello world"}}
    {{"hello" +" world"}}
    {{ {a:1,b:2} }}
    <!-- 插值表达式中所用到的值必须是data中存在的，因为vue是数据驱动视图的 -->
    {{name}}
    {{arr}}
    {{obj.name}}
    <!-- 作用域链不存在的时候，会err，原型链不存在的时候是undefined -->
    {{obj.abc}}

  <!-- 对象增加属性并渲染到页面 -->
    <!--
对象的改变：:
    vm.obj.abc = 123
     123//会重新渲染页面 		vm.obj.age = 18
     18//此时18改变为18，其实是值没有改变，vue中优化，如果值没有发生改变，不会去渲染视图 	如果想要改变对象的属性并渲染到页面： 			vm.obj = {name : "jack",age : 18,abc : 123}
  	这样肯定可以改变，因为直接改变了对象的引用地址 			在vue中我们推荐用$set，自己封装的方法：
  	vm.$set(vm.obj,"abc",123)   其中的三个参数分别代表obj key value

JavaScript代码部分：

```javascript
 <script type="text/javascript">
    var vm = new Vue({ //渲染的模板,
        // el: "#app",
        data: { //放所有的数据的
            name: "xsj",
            arr: [1, 4, 8, 6, 8], //数组通过length改变以后，不能改变渲染视图，
            //在vue中 ，重写了数组的7个方法乐意对应的渲染视图，称为数组的编译方法
            // push pop  shift unshift  sort splice reserve 
            obj: {
                name: "xsj",
                age: 18
            }
        }
    })
    vm.$mount("#app"); 
    // vm.$mount("#app") 代替vue实例中的el,后期渲染的时候可能会用到 

    vm.$set(vm.obj, "name", "rj") //obj中的name会被改变成rj
    console.log(vm.$el.innerText) //输出的时候是初始值，为了提高效率，渲染是直接开始渲染
    // vm.$el   只带整个渲染的元素
    // vm.$el.innerHTML     vm.$el.innerText

    vm.$nextTick(() => {
        console.log(vm.$el.innerHTML);
    })
    // vm.$nextTick()   渲染完成以后执行，传递的是一个回调函数 

    </script>