过滤器
过滤器分为局部过滤器和全局过滤器。局部过滤器只能在当前组件使用，全局过滤器能在任意地方使用
局部过滤器示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <script> // 局部过滤器只能在当前组件内使用 let App = { data(){ return { "msg": "Hello World" } }, template:` <div>我是App组件。过滤器后的数据：{{ msg | myReverse }} </div> `, // filters 中注册过滤器 filters:{ // 在组件内部注册过滤器，局部过滤器； /* 声明过滤器的语法如下： '过滤器的名字': function(val){} 使用过滤器的语法如下：利用 管道符 | 要进行过滤的val | '过滤器的名字' */ myReverse: function (val) { console.log(val); return val.split('').reverse().join('') } } } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
浏览器效果示例：
带参数的过滤器：
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <!-- 引入 moment.js 这个插件 --> <script src="./moment.js"></script> <script> let App = { data(){ return { ctm: new Date() } }, // 带参数的过滤器 template:` <div>时间: {{ ctm | myTime('YYYY-MM-DD') }} </div> `, // filters 中注册过滤器 filters:{ myTime: function (val, formatStr) { return moment(val).format(formatStr) } } } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
浏览器效果示例：
全局过滤器的声明语法：
Vue.filter('过滤器的名字', function(参数){}) // 全局过滤器的使用方法和局部过滤器是一样的
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <!-- 引入 moment.js 这个插件 --> <script src="./moment.js"></script> <script> // 全局过滤器 Vue.filter('myTime', function (val, formatStr) { return moment(val).format(formatStr) }) let App = { data(){ return { ctm: new Date() } }, // 带参数的过滤器 template:` <div>时间: {{ ctm | myTime('YYYY-MM-DD') }} </div> `, } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
生命周期钩子函数：
部分钩子函数如下所求：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
keep-alive组件：
keep-alive 组件是Vue提供的内置组件，主要作用是把组件缓存起来，并保存组件原先的状态
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <script> let Test = { data(){ return { msg: "NEOOOOOO" } }, template:` <div id='test'> 我是Test 组件 <h2>{{ msg }}</h2> <button @click='change'>更新数据</button> </div> `, methods:{ change(){ this.msg = "neo呀" } }, // 钩子函数 beforeCreate(){ // 组件创建之前 console.log('组件创建之前：',this); // VueComponent console.log('组件创建之前：',this.msg); // undefined }, created(){ // 组件创建之后（此时 DOM 还没有渲染，即 created的执行发生在DOM渲染之前）； 可以在这个方法中发送 ajax，即通过 ajax 获取到数据，然后再渲染 DOM console.log('组件创建之后：',this); // VueComponent console.log('组件创建之后：',this.msg); // NEOOOOOO // ***** 最重要的一个钩子函数 ****** }, // created方法执行之后， Test 组件还没有被渲染到 App组件中 ，App组件也还没被渲染到实例中，即还没有挂载进去 // mounted：挂载， 把组件中所有template 模板渲染到模板上（DOM渲染） beforeMount(){ // 装载数据到 DOM之前调用 console.log("挂载之前：", document.getElementById('app')); /* <div id="app"> <app></app> </div> */ }, mounted(){ // 装载数据到DOM之后调用， 可以获取到真实存在的DOM元素， Vue 操作以后的 DOM // 这个地方可以操作DOM console.log("挂载之后：", document.getElementById('app')); /* <div id="app"> <div> <div id="test"> 我是Test 组件 <h2>NEOOOOOO</h2> <button>更新数据</button> </div> </div> </div> */ // mounted 也是一个比较重要的方法 }, beforeUpdate(){ // 在更新数据之前调用此钩子；应用：获取原始的DOM console.log(document.getElementById('app').innerHTML); /* <div> <div id="test"> 我是Test 组件 <h2>NEOOOOOO</h2> <button>更新数据</button> </div> </div> */ }, updated(){ // 在更新数据之后调用此钩子；应用：获取最新的DOM console.log(document.getElementById('app').innerHTML); /* <div> <div id="test"> 我是Test 组件 <h2>neo呀</h2> <button>更新数据</button> </div> </div> */ }, beforeDestroy(){ // 组件销毁之前 （例如用v-if， 不能用v-show，v-if 才是真正的销毁） console.log('beforeDestory'); }, destroyed(){ // 组件销毁之后 console.log('destroy'); // 定时器的销毁要在此方法中进行 （如果开了定时器，一定记得要销毁定时器） }, // 销毁、创建DOM很消耗性能 // activated 和 deactivated 需要借助 vue 的内置组件 keep-alive； // keep-alive 的作用： 能让当前组件缓存起来，并保存组件原来的状态；如 把 把 Test 组件放到 <keep-alive></keep-alive> 中 activated(){ // 激活 console.log('组件被激活了'); }, deactivated(){ // 停用 console.log('组件被停用了'); } } let App = { data(){ return { isShow: true } }, // Test组件放在 keep-alive 中就会被缓存起来 template:` <div> <keep-alive> <Test v-if="isShow" /> </keep-alive> <button @click="clickHandler">添加移除Test组件</button> </div> `, methods:{ clickHandler(){ this.isShow = !this.isShow; } }, components:{ Test } } new Vue({ el: '#app', data(){ return { } }, components:{ App } }) </script> </html>
钩子函数官方文档：
利用webpack 生成项目：
1、生成项目
vue init webpack 项目名
2、安装依赖
npm install
3、安装项目依赖包，如 element-ui。 先 cd 到项目，再执行下面的命令：
npm i element-ui -S
4、 运行项目。先 cd 到项目，再执行下面的命令：
npm start
或
npm run dev
webpack 文档：