• 对Vue的理解

Vue官网 点我 上是这么介绍的--渐进式JavaScript框架，如何理解"渐进式"这个词呢？Vue的最初作者是由尤雨溪（大佬orz）设计提出。对于渐进式，他的理解就是主张最少，你完全可以把vue当作和jQuery一样的库简单导入使用，也可以使用他的全家桶，这一切的选择权在于使用者，我觉得这是非常人性化的。下面是一个可能使用的阶段：form表单验证==》整个页面的dom用Vue来管理（用数据驱动DOM的变化）==》webpack vue-router控制路由，用于一整套前端开发的工程的构建==》熟悉组件之间的交流来处理数据交流和后端接口==》大型项目 比如我现在就是只是用到了Vue的M和V的双向数据绑定，我觉得很ok啊。

• Vue的实例

<div id="app"><div>

let vm = new Vue({
    el:#app,
    data: xxx,
    methods:{
        fun1:fucntion(){
            console.log("111");
        },
        fun2:function(){
            console.log("222");
        }
    }
}); 

• 很清楚的看到，vue中MVVM各层，M:data，V:el控制的html标签区域，VM:vm对象

• Vue常用指令：

1. v-cloak:使用该指令，设置该样式为style:display:none; 解决赋值闪烁问题（其实只要把导入的vue.js放在最上面就不会有这个问题）

2. v-text,v-html:单向绑定值（后者会解析样式），不支持拼接语法。

3. {{xxx}}: 插值表达式，后面可以追加其他字符串。

4. **v-bind,简写：**单向绑定属性值，可以使用拼接字符串，可以使用三元运算符。

5. v-on:click.stop,简写@: 绑定js事件用，后面可以加事件修饰符，stop:阻止事件冒泡（父子div同时绑定点击事件，点击子元素），prevent:阻止默认事件（a标签href属性的默认事件），capture:添加事件侦听器时使用捕获模式（由父到子传递，本来默认冒泡，由子到父），self:事件只在元素本身上才触发（点击子元素，父元素不会触发事件），once:事件只触发一次（多用于初始化）

6. v-model: 表单元素M与V之间数据双向绑定。关键字：表单元素值，双向绑定，这个就很强大了，从此不用操作dom，只需要关心数据的流向就行了。

7. v-bind:class:绑定行内样式，分为：数组，数组中的三元运算符，数组中的对象，对象。

8. v-bind:style:绑定内联样式，可以直接写元素上，也可以写vm实例中的data中，然后引用到style中，也可以引用数组。

9. v-for 迭代循环，有四种写法：

• v-for="(item,index) in list":循环数组

• v-for="(key,value,i) in object":循环对象属性

• v-for="i in 10":循环数字，次数

• 注意点：使用v-for时，需要绑定v-bind:key，指定唯一的数字/字符串，保证每个节点的唯一性（一般为主键）。

10. 条件判断：v-if,v-show: v-if会删除创建元素，v-show:不会删除创建元素，会切换元素的display:none样式，v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗 具体还得看情况使用

• Vue其他知识

1. 自定义全局过滤器（同一个页面所有vue实例可共享）：可以用作文本格式化(比如日期)，可用于插值表达式以及v-bind指令上

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

• 会返回管道后的值进行插入,一般在vue实例前定义过滤器,function第一个参数是原字符串，从第二个开始是该方法的参数，并且可函数式调用

2. 自定义私有过滤器：

let vm = new Vue({
    el:#xxx,
    data:{
    
    },
    methods:{
    
    },
    //私有过滤器，条件：【过滤器名称 和 处理函数】
    filters:{
        a: fucntion(date,pattern){
        
        }
    }
});

3. 过滤器调用遵循就近原则，先私有，后全局