Vue（指令、生命周期钩子、directive、事件深入、filters、computed）

前言：

别想一下造出大海，必须先由小河川开始

--------------------------------正文---------------------------------

MVC (设计模式)

  作用: view和modle分离
  好处：解决耦合问题
        防止混乱

VueJS（官网 https://cn.vuejs.org/）

    MVVM框架（双向绑定）

  插件:(专注于某一个效果)
  库:(人是主导，操作对像、DOM)（react应该是一个UI库）
  框架:(框架是主导，操作数据)

下载

  1. 直接下载vue.js文件
  2. 使用vue-cli

格式：

    new Vue({
      el:'#box',
      data:{
        aProduct:[]
      },
      filters:{
        cur:function(value){
          return ;
        }
      },
      computed:{
        aRro:function(){
          return this.aProduct.reverse();（反转）
        }
      },
      methods:{
        send(){
        }
      }
    });

指令 v-开头

  v-model           数据绑定

  v-on              添加事件

  v-bind            绑定属性

  v-for             循环、迭代

    建议使用v-for的时候设置v-bind:key。

  v-text            纯文本

  v-html            html

  v-show            是否显示

  v-pre             跳过编译           // 直接写在标签里

  v-cloak           防止闪屏          // 写在标签里 
        [v-cloak] {
            display: none;
        }                       // 写在style里面
  // 一起使用
简写

  v-bind

            v-bind:href         :href

            v-bind:src          :src

            v-bind:key          :key

  v-on

            v-on:click          @click

            v-on:keydown        @keydown

生命周期钩子

    beforeCreate            创建前
    created                 创建后
    beforeMount             挂载前
    mounted                 挂载后
    beforeUpdate            数据更新前
    updated                 数据更新后
    beforeDestroy           销毁前
    destroyed               销毁后

自定义指令

    Vue.directive('指令名',function(el){
        当前对象
        coding....
    });

事件深入

    @click.prevent.stop（阻止默认、阻止冒泡）

    @keydown.enter.ctrl（enter键）

    自定义按键

    Vue.config.keyCodes.xxx = 键码;

过滤器 filter

1、文本过滤器

   filters: {
      xxx: function(arg1,arg2...){
         return 处理后的结果;
      }
   }

   {{message:xxx(xxx,xx,xx..)}}

2、数据过滤器

   computed: {
      xxx: function(arg1,arg2,arg3){
         操作
         返回
      }
   }

   v-for="item in xxx"

computed 计算属性

computed第一次调用一个函数，会解析一次数据，然后会有缓存，如果下次还调用这个函数，就不解析数据了，直接用缓存的数据，会提高性能。
methods第一次调用一个函数，会解析一次数据，如果下次还调用这个函数，就还会解析一次数据，调用几次，解析几次。
相比较methods，更加节省性能。适合用于重复渲染，逻辑复杂的计算。

    computed: {
        xxx: function(){
            操作
            return ;
        }
    }