Vue挂载点理解及常用属性

Vue挂载点

vue.js是什么？

vue.js是一套用于构建用户界面的渐进式框架；
vue只关注视图层，采用自底层向上逐层应用的设计；

vue挂载点

简单来说，挂载点是vue实例要去处理的dom节点，el属性声明；全称为element，声明挂载点来确定vue对象的作用域；从而对该元素及后代元素进行vue解析。将创建的vue实例在html文档中显示出来，这就是挂载。

创建一个vue实例：

    <div class="app">{{message}}</div>
    <script>
        const vm=new Vue({
            // 首先声明挂载点
            el:".app",
            // 声明挂载点中的数据对象
            data:{
                message:"hello world!"
            },
        });
        console.log(vm.$data.message);
    </script>
    </script>

Vue与MVVM的关系

MVVM可以分为四部分：
Model：模型；
View：视图；
ViewModel：视图模型；
Binder：绑定器；
vue与他们的对应关系：
视图对应的html与css部分；
模型对应的vue实例中的属性，如计算属性computed等；
视图模型对应的vue下的模板语法；
绑定器对应v-bind,v-model等绑定数据的语法；

Vue中的常用属性

计算属性computed：

计算属性会与data中的属性变量合并；如果将计算属性写入data中，那么这个属性变量在插值中渲染时要作为函数；例子（{{函数名（）}}）；
过滤器属性（filters）可以用在两个地方，双花括号插值和v-bind表达式；
实例展示：

    <div class="app">
        <p>{{reversed()}}</p>
        <p>{{casee()}}</p>
    </div>
    <script>
        const vm=new Vue({
            el:".app",
            data:{
                word:"admin",
                ju:"hello admin",
                reversed(){
                    return this.word.split("").reverse().join("");
                },
                casee(){
                    return this.ju.toUpperCase().substr(5);
                }
            },
        });
    </script>

效果展示：

侦听器属性

vue的侦听器属性（watch）就相当于原生js中的事件监听器，负责监听数据变化时需要执行的操作；

使用侦听器属性时，需要有v-model指令的双向数据绑定，否则无法被监听；
实例演示：

 <div class="app">
     <input type="number" v-model="add1" value="">+<input type="number" v-model="add2" value="">={{res}}
 </div>
 <script>
     const vm=new Vue({
         el:".app",
         data:{
             add1:0,
             add2:0,
             res:0,
         },
         methods:{
             add(x,y){
                 this.res=x * 1 + y * 1;
             }
         },
         // 侦听器属性
         watch:{
             add1(str) {
             this.add(str, this.add2);
             },
             add2(str) {
             this.add(str, this.add1);
             },
         }
     })
     console.log(vm.add1)

效果展示