15.vue.js实战笔记（自定义指令、JSX、ejs、使用webpack、插件）

一、自定义指令

1.基本用法

自定义指令分全局注册和局部注册，例如注册一个v-focus指令用于在<input>元素初始化时自动获得焦点，两种写法分别是：

（1）全局注册

Vue.directive('focus',{
    //指令选项
});

（2）局部注册

var app = new Vue({
    el:'#app',
    directives:{
        focus:{
            //指令选项
        }
    }
});

2.自定义指令的选项

自定义的选项是由几个钩子函数组成的，每个都是可选的

（1）bind          只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作

（2）inserted    被绑定元素插入父节点时调用（父节点存在即调用）

（3）update      被绑定元素所在的模板更新时调用（而不论绑定值是否变化）

（4）componentUpdated   被绑定元素所在模板完成一次更新周期时调用

（5）unbind       只调用一次，指令与元素解绑时调用

根据需求去选择某个钩子函数写逻辑代码，比如上边的v-focus，如果希望在插入父节点时就调用，那最好用inserted：

要注意的一点是：在元素里用自定义指令是v-定义的指令名，而在定义指令时是不加v-的！！！

<div id="app">
    <input type="text" v-focus>
</div>

Vue.directive('focus',{
    inserted(el){
        //聚焦元素
        el.focus()
    }
})
var app = new Vue({
    el:'#app'
})

JSX是一种看起来像HTML，但实际却是JavaScript的语法扩展，用更接近DOM 结构的形式来描述一个组件的UI和状态信息

ejs是一个JavaScript模板库，用来从json数据中生成HTML字符串，常用于node.js

二、使用webpack

1.export import 导出导入模块

一个模块即一个js文件，拥有独立的作用域，里边定义的变量外部无法获取

例如：导出config.js文件

// config.js
var config = {
    version:'1.0.0'
}
export {config}
//或
// config.js
export var config = {
    version:'1.0.0'
}

在其他文件中导入：

//main.js
import {config} from './config.js'
console.log(config)  // {version:'1.0.0'}

2.webpack基础配置

安装webpack和webpack-dev-server

创建demo目录---npm init ---回车生成package.json --- npm install webpack --save-dev ----npm instsll webpack-dev-server --save-dev 

三、插件

注册插件需要一个公开的方法install，有两个参数（vue构造器，可选的选项对象options）

Myplugin.install = function(vue,options){

}

通过Vue.use（）来使用插件：

Vue.use(Myplugin)
//或
Vue.use(Myplugin,{
  // 参数 
})