(三)、JS 前端框架-Vue (持续学习更新ing……)

一、vue的实例

let vm = new Vue({
    el: '',
    data: function() {},
    methods: {},
    watch: {},
    computed: {},
    component: {},
    template: {},
    
    store: {},
    router: function(c) {return c(com)};
});

二、vue的指令

1. vue 内置指令(详情地址)。
2. vue 自定义指令(详情地址)：

(1)注册指令
 ① 正常写法：
    //注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      bind: function (el, binding, vnode, oldVnode) {},      //内存中执行
      inserted: function (el, binding, vnode, oldVnode) {}， //页面上执行，即DOM
      update: function (el, binding, vnode, oldVnode) {},    //页面上执行，即DOM
      componentUpdated: function (el, binding, vnode, oldVnode) {},
      unbind: function (el, binding, vnode, oldVnode) {}
    })

 ② 简便写法：
    //仅用到bind和update钩子函数，可以尝试如下写法(私有和全局类似)
    Vue.directive('color-swatch', function (el, binding, vnode, oldVnode) {
      el.style.backgroundColor = binding.value
    })
 ③ 定义私有指令，即局部指令：
    
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        directives: {
            'focus': {
                bind: function (el, binding, vnode, oldVnode) {},
                inserted: function (el, binding, vnode, oldVnode) {},
                update: function (el, binding, vnode, oldVnode) {},
                componentUpdated: function (el, binding, vnode, oldVnode) {},
                unbind: function (el, binding, vnode, oldVnode) {}
            }
        }
    });
(2)指令应用：
    <input v-focus>

三、vue的动画实现

1.自带动画效果
2.使用animate.css库实现
3.使用钩子函数实现

四、vue的组件

[待完善]

五、vue的路由

[待完善]

六、vue的请求

[待完善]