vue雏形及总结

回顾：

 mvvm  渐进式： 前端 用于 构建用户界面的 js框架
    m v vm (数据改变试图自动刷新)

数据驱动
template:`<button @click="change"></button>>`,
let vm = new Vue({
  el:"#app", // 挂载Vue 到html上
  data：{
    // 放置数据的 数据改变试图自动刷新 首先要将数据放置data中
    // 最终都会放置到实例上去
    msg:123,
  },
  methods:{
    // 方法
    // 最终都会放置到实例上去
    change(){
      this.msg = "我又是一个123"
    }
  }
}) 

 {{  }} 模板 在试图 渲染数据

1.js环境；
2.里面的变量或者方法，自动去寻找当前试图所在的组件这个实例的属性或者方法；
3.js全局 变量或者方法 不同用   （白名单除外）
4.能写表达式  语句不行
指令：
1.  v-model 表单值 与 实例中的某个数据进行双向绑定；
    .lazy 将 原来 input触发 改为 change触发
    .trim 去除首尾空格
    .number 过滤成数字 （parseFloat）
2.  v-html 解析复文本数据
3.  v-bind: 属性 ：将标签的属性 转为 动态的属性
    属性的值 就会与 实例中的的数据绑定
    简写：   :属性  eg:【:bind   :class   :key ……】
4.  v-on: 事件  将原生事件，变为vue事件(事件函数 找实例上的方法)
    将普通的事件，变为动态的事件
    简写：   @事件  eg:【@click   @change ……】
    事件对象 $event
    修饰符：
        .stop 取消冒泡
        .prevent 阻止 默认 行为
        .capture 事件在捕获阶段就提前触发
        .self 只能自己才能触发，后代元素无法触发
        .once 只能触发一次

 总结：
      指令 写法 是标签属性，
      注意：指令 引号中 引号中是一个js环境，可以写表达式；
      eg: 
          data:{
            msg: "表达式"
          }
          

v-if
v-else 作为if指令所在 标签 或者 组件 的下一个兄弟  【两者并用，中间不可多一任何 属性标签 或 组件】
v-show 和 v-if 区别
  1.都是控制元素  显示影藏
  2.if移出元素; show display:none 隐藏
  3.初始值为flase v-if是不加载
使用场景：
  v-show适用于频繁加载
  v-if适用于 初始值不加载（切换频率也不高）

列表渲染：
      v-for <li v-for="(item,index) in arr">
        :key="xx"               eg:【name = " " 】

mvvm原理：
        object.defineProperty(target,属性，{
          get(){},
          set(){},
        })

1. 初始化一个组件
   (组件)，vue会自动去遍历data中的所有的属性，生成新的虚拟dom,和上一次（每一次render调用都会缓存虚拟dom）虚拟dom进行比较，diff算法，最小程度操作dom;
2. key:给每一层 虚拟dom节点，加了一个 标记（两个虚拟dom，就会按照 同一层同key进行比较）

侦听器：
    watch
    {
      data(){
        return {
          msg:12,
          obj:{
            a:10,
            b:20
          }
        }
      },
      watch:{
        msg(newVal,oldVal){
          // 逻辑代码
        },
        "obj.a"(newVal,oldVal){
          // 逻辑代码
        },
        // 直接监听对象 handler,deep
        obj:{
          handler(newVal,oldVal){
          // 逻辑代码
          },
          deep:true
        }
      }
    }

计算属性：
解决 在 模板中写过多业务逻辑
template: '
 {
  data(){
    return {
      msg:'hello world',
      }
    }
  },
  computed:{
    msg2(){
      return this.msg.split('').reverse().join('')
    },
    msg3:{
      get(){
        return this.msg.split('').reverse().join('')
      },
      set(val){
        // val 设置计算属性的值，在这里去修改他的依赖
      }
    }
  }
  ',

  注意：
  1.不要和data以及methods.props重名
  2.根据 属性所依赖的值 缓存,如果多次使用，依赖没有变化，计算属性不会重新调用；

组件：