[TOC] ## :-: 自定义指令(全局/局部) ``` <div id="app"> <input type="text" v-slice:5.number="content"> <p>{{ content }}</p> </div> <script> // 自定义指令(全局/局部) // 定义全局指令 -- Vue.directive(id, [definition]) // id -- String类型，5字符限制。v-slice // [definition] -- 类型可以为 function / Object 、 // 例子：注册一个全局自定义指令 `v-slice` Vue.directive('slice', (el, bindings, vnode) => { // --- function // el -- 指令所绑定的元素，可以用来直接操作 DOM 。 /* binding -- 一个对象，包含以下属性： name -- 指令名，不包括 v- 前缀。 value -- 指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 oldValue -- 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression -- 字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 arg -- 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 modifiers -- 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 */ // vnode -- Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。https://cn.vuejs.org/v2/api/#VNode-接口 // --------------------------------------------------------- // console.log(el, bindings, vnode); // let len = bindings.arg || 5; // 获取传入的参数、 // const val = bindings.value.slice(0, len); // vnode.content.content = val; }); Vue.directive('slice', { // --- Object // v-slice 绑定的时候会执行，只执行一次、 bind(el, binding, vnode) { // const val = bindings.value.slice(0, 5); // vnode.content.content = val; }, // 虚拟dom重新渲染的时候会执行(数据更新) updata，第一次加载不执行、 updata(el, binding, vnode) {}, // 当指令元素插入到DOM时会执行 inserted inserted(el, binding, vnode) { // 页面渲染完成，让input输入框聚焦、 el.focus(); } }); new Vue({ el: '#app', data: { content: 'abc' }, // 定义局部指令 -- directives directives: { // --- 跟全局的写法一致，可以传 对象/函数 slice: (el, binding, vnode) => { // el -- 指令所绑定的元素，可以用来直接操作 DOM 。 /* binding -- 一个对象，包含以下属性： name -- 指令名，不包括 v- 前缀。 value -- 指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 oldValue -- 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression -- 字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 arg -- 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 modifiers -- 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 */ // vnode -- Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。https://cn.vuejs.org/v2/api/#VNode-接口 } } }); </script> ``` ## :-: 自定义过滤器(全局/局部) ``` <!-- 自定义过滤器(全局/局部) --> <div id="app"> <input type="text" v-model.number="content"> <span>{{ content | toMoney('times') }}</span> </div> <script> // 自定义过滤器(全局/局部) -- Vue.filter(id, [definition]) // -- 全局·自定义过滤器 Vue.filter('toMoney', (value, times) => { // 传递的实际参数为第二个形参 // 把数组转换为本地字符串。 // (1000000).toLocaleString() // "1,000,000" return value.toLocaleString(); }) new Vue({ el: '#app', data: { content: 1000000 }, // // -- 局部·自定义过滤器 // filters: { // toMoney: () => { // // ··· // } // } }); </script> ``` ## :-: 挂载及dom构建流程 ``` <div id="app">{{ test }}</div> <script> const oVue = new Vue({ el: '#app', template: '<p>111</p>', render(createElement) { // return <h1></h1>; // jsx语法，需要插件解析、 // createElement -- 新建一个新的元素 return createElement('div', { class: ['className', 'test'], style: { color: 'red', textAlign: 'center', 'background-color': '#444', } }, ['我是div呀...', createElement('h1', '我是一个h1标题')]); }, data: { test: '123' } }); oVue.$el // 返回：原生dom元素对象、 oVue.$el.outerHTML // 返回："<div id="app">123</div>" </script> ```  ## :-: vue - 生命周期 ``` <div id="app">{{ test }}</div> <script> // 生命周期 const oVue = new Vue({ el: '#app', data: { test: '123' }, beforeCreate() { // vue实例创造前 (很少用) console.log(this); }, created() { // vue实例创造后，开始有this.$data (一般用来调用ajax) console.log(this.$data); }, beforeMount() { // 挂载前 (很少用) console.log(this.$el); // dom对象：<div id="app">{{ test }}</div> }, mounted() { // 挂载后 (一般用来调用ajax，此时dom已经可以正常使用了) console.log(this.$el); // dom对象：<div id="app">123</div> }, beforeUpdate() { // 更改数据之前 console.log('before'); }, updated() { // 更改数据之后 console.log('after'); }, beforeDestroy() { // 将被销毁 }, destroyed() { // 销毁后 }, }); oVue.test = 'abc'; oVue.$destroy(); // 触发销毁 </script> ``` ## :-: vue - 计算属性/侦听器 ``` <div id="app">{{ demo }}</div> <script> // 计算属性 及 侦听器 的使用、 const oVue = new Vue({ el: '#app', data: { test: '123', name: 1, // data内this为window，所以 demo:'测试：'+this.test 的写法是错误的！此时就需要借助 '计算属性' / '侦听器' }, computed: { // 计算属性 demo() { return '测试：' + this.test; } }, watch: { // 侦听器 (Function / Object) test() { // oVue.test 被改变时就会执行、 }, name: { handler(newVal) { console.log(1, newVal); }, // 数据没有改变，第一次渲染就侦听 immediate: true } }, }); // 另外一种创建侦听器的方式 oVue.$watch('name', (newVal) => { console.log(2, newVal); }, { // 该Object为配置项 immediate: true }); </script> ```