前言

1. Vue 的兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

2. Vue 是一套 MVVM框架，核心是数据驱动界面，其中 VM 是调度者，作 V 和 M 的中间处理。

3. 起步

<!-- 这是 MVVM 中的 V 视图-->
    <div id="zz">
        <p>{{message}}</p>
    </div>
<script>
    //1. 创建Vue的实例 这是 MVVM 中的 VM 调度者
    let vm = new Vue({
        el : '#zz', // 表示我们新建的 Vue 实例要控制的页面区域
        data : { // data 中存放 el 中要用到的数据 ，这是 MVVM 中的 M ，保存页面的数据
            message : 'Hello world !',
            tip : '数据驱动视图'
        }
    });

注意：在 Vue 中不要去操作 DOM，这是在 Vue 中要避免的事情

指令

• v-text : 更新元素的 textContent
  <p v-text=" 'what' + message">我去哪儿</p>
  p 标签中的文本为 'what' + message(在 Vue 实例的 data 中)
• v-html : 更新元素的 innerHTML
  <p v-html="message">我去哪儿</p>
  类似 Jq 中的 html 的写功能
• v-show ： 根据表达式之真假值，切换元素的 display CSS 属性。
  <p v-show=" 'true' ">show</p>
  先加载元素，切换元素的 display 属性，如果涉及到元素的可见性频繁切换，就用它
• v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
  <p v-if=" 'true' ">要显示</p>
  v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-for : 基于源数据多次渲染元素或模板块。

<p v-for="(value,index) in message">
          {{index + ':' + value}}
</p>

此指令之值，必须使用特定语法 alias in expression,其中 expression 可以是方法返回的一个数组或对象，不一定是 data 中的数据
注意:

1. 在使用v-for去进行列表渲染时，Vue 包含一组观察数组的变异方法 pop push shift unshift splice sort reverse，它们将会触发视图更新，如果你通过arr[index]或者以其他方式去修改数组，则不会改变视图。如果你想用到 concat之类的方法，可以直接去改变数据的引用，也是可以更新视图的
2. 还有一种方式：可以通过 Vue.set(vm.arr, index, value) 或vm.$set(vm.arr, index, value) 的方式修改数组也是可以改变视图的
3. 对象修改则只能用 Vue.set 或者 vm.$set，或者改变引用

• v-on : 绑定事件监听器 缩写为@

<button @click = "changeText">函数绑定</button>
<button v-on:click = "changeColor(color)">变色</button>

修饰符 :
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
函数可以加 ' () ' 也可以不加， 要传参数就加

• v-bind : 动态地绑定一个或多个特性，或一个组件 prop 到表达式 缩写为 :
<div :class="[classA, { classB: isB, classC: isC }]">
  修饰符:
  .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
  .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• v-model : 在表单控件或者组件上创建双向绑定。
  <input type="text" v-model="message">
  双向绑定数据

• v-pre
  <span v-pre>{{ this will not be compiled }}</span>
  显示原始的插值表达式

• v-cloak ：这个指令保持在元素上直到关联实例结束编译

/*CSS属性选择器*/
[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

解决插值表达式的加载闪烁问题

• v-once : 只渲染元素和组件一次
  <p v-once>原始值:{{message}}</p>
  只渲染一次，当数据改变时，不再重新渲染

自定义指令

// 自定义全局指令
    Vue.directive('focus', {
        bind: function () {},
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
        // 聚焦元素
        el.focus()
        },
        update: function(){}
    })

钩子函数:
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数:
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，主要用到的属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

 directives : { // 定义私有自定义指令
            'fontColor' : function (el, binding) { // 简写模式，默认写到 bind 和 update 里面 
                el.style.color = binding.value;
            }
        }

注意：在指令定义时的名称使用驼峰命名法时，使用要在之间加 '-' 而不是直接写指令名。如上使用时应该写为 v-font-color

过滤器

• 全局过滤器

// 全局过滤器 作页面渲染前的最后一层过滤 ，应该写在实例对象之前不然会找不到过滤器
   Vue.filter('myFilter', (value, para) => {
       if (!value) {
           return '';
       }
       return value.replace(/很好/g, para);
   });

• 私有过滤器

let vm = new Vue({
        el : "#zz",
        data : {},
        methods : {},
        filters : { // 定义私有过滤器 过滤器调用采用就近原则，优先调用私有过滤器
            dateFormat : function (dateStr, pattern="") {
                // 传入时间字符串得到时间
                var dt = new Date(dateStr);
                // yyyy-mm-dd
                var y = dt.getFullYear();
                var m = (dt.getMonth() + 1).toString().padStart(2, "0");
                var d = dt.getDate().toString().padStart(2, "0");
                if (pattern.toLowerCase() == "yyyy-mm-dd") {
                    return `${y}-${m}-${d}`;
                }else {
                    var hh = dt.getHours().toString().padStart(2, "0");
                    var mm = dt.getMinutes().toString().padStart(2, "0");
                    var ss = dt.getSeconds().toString().padStart(2, "0");
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                }
            } 
        }
    });