Vue2的基本使用

一、vue的基本使用

第一步

引入vue.js文件

 <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
或者
  <script src="./js/vue.js"></script>

第二步

在body中设置一个挂载点

{{msg}}

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

第三步

实例化一个Vue的实例化对象，和挂载点进行挂载

 const vm = new Vue({
      el:'#app', //挂载点,可以是id或者class
      data:{
        msg:'成都'
      }
    })

第四步

请求获取回来的数据，即是配置对象当中的data

{{msg}}

vm代理配置对象当中data的数据 ，vm和data当中有同名的属性，模板当中访问的都是vm身上的属性。 vm代理了data当中的数据，找vm获取数据其实最终还是拿的data当中的属性值。修改vm的数据其实本质是在修改data当中的数据。可以通过打印日志验证

 vm.msg = '555';
 console.log(vm);

 二、数据的绑定及事件的添加

通过v-bind:指令让html元素的属性绑定Vue实例管理的数据

  <a v-bind:href="url">百度2</a>
简写
   <a :href="url">百度</a>

通过v-on:指令让html元素的事件绑定Vue实例管理的方法。v-on:的简写是@

 <Button v-onclick="change">惦记我2</Button>
  <Button @click="change">惦记我</Button>

三、双向数据的绑定MVVM

 双向数据绑定  一般情况下只针对表单类元素才使用双向数据绑定 
 MVVM 说的就是双向数据绑定模型    
 M代表model 就是我们的数据   V代表的view 就是我们的页面  VM代表的就是Vue的实例化对象
 双向数据绑定 ：数据可以从data 流向页面 ,页面的数据被更新，也会从页面流向data.

  <input type="text" v-model="msg" />

四、Object.defineProperty的使用

这个方法在为对象添加或者修改  属性为响应式属性

let student = {
        a: 12,
        b: 3

    }
    Object.defineProperty(student, 'max', {
        //当访问对象的fullName属性的时候
        get() {
            return this.a > this.b ? 'a' : 'b'
        },
          //当设置对象的fullName属性的时候
        set(val) {
            var str = val.split(',');
            this.a = str[0];
            this.b = str[1];
        }
    })
    console.log(student.max);
    student.max = '20,30';
    console.log(student);

模拟数据代理

 var vm = {}
    var data = {
        msg: "哈哈"
    }
    Object.defineProperty(vm, 'msg', {
        get() {
            return data.msg;
        },
        set(val) {
            data.msg = val
        }

    });
    console.log(vm.msg);
    vm.msg = '呵呵';
    console.log(vm.msg);
    console.log(data);

五、computed计算属性

减少运算次数, 缓存运算结果. 运用于重复相同的计算

定义函数也可以实现与 计算属性相同的效果,都可以简化运算。

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会 重新求值。

computed内部只能是同步返回数据，不能异步返回数据

     <p>A乘以B={{add()}}</p>
        <p>A乘以B={{addplus}}</p>
        <p>A乘以B={{reslut}}</p>
methods: {
                change() {
                    alert('44');
                },
                add() {
                    console.log('加法');
                    return this.a * this.b;
                }
            },
            computed: {
                addplus() {
                    console.log('加法2');
                    return this.a * this.b;
                }
            },

六、watch 侦听器

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。

作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

watch支持在handler异步修改

 watch: {
                //注意:监视的时候必须有一个属性， reslut: ''，属性值是什么不确定，后面根据监视去给它赋值
                a: {
                    handler(newVal, oldVal) {
                        this.reslut = newVal * this.b;
                     //异步修改
                        setTimeout(() => {
                            this.c = 5;
                        }, 5000);
                    },
                    immediate: true //配置这个配置项的作用是无论监视到属性发生不发生变化，都要强制的执行一次回调
                },
                b: {
                    handler(newVal, oldVal) {
                        this.reslut = newVal * this.a;
                    },
                    immediate: true //配置这个配置项的作用是无论监视到属性发生不发生变化，都要强制的执行一次回调
                }
            }