-
过滤器
-
局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}}
-
全局过滤器(全局过滤器,只要过滤器一创建,在任何组件中都能使用, Vue.filter('过滤器的名字'，function(val,a,b){}) )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <App></App> </div> </body> <script src="vue.js"></script> <script src="moment.js"></script> <script> // 定义全局过滤器,字符串翻转 Vue.filter('strReverse', function (val) { return val.split('').reverse().join('') }); let App = { data(){ return{ // 创建日期对象 timer: new Date(), msg: 'i love you', } }, methods: { }, // YYYY-MM-DD HH:mm:ss 代表年月日 时分秒,过滤器的使用是 数据 | 过滤器的名字(第二个参数,第三个参数....) template:` <div> <h3>{{ timer|myTime('YYYY-MM-DD HH:mm:ss') }}</h3> <h3>{{ msg|strReverse }}</h3> </div> `, components: { }, // 局部过滤器 filters:{ // 时间格式化过滤器 myTime: function(val, formatStr){ //val 就是输入的时间数据, formatStr就是用户自定义的时间格式,moment是moment.js中一个日期处理类库的方法 return moment(val).format(formatStr); } } }; new Vue({ el: '#box', data(){ return{ } }, methods:{ }, components:{ App } }) </script> </html>
-
-
生命周期的钩子函数
-
beforeCreate(){} 组件创建之前,此时组件元素还不可调用
-
created(){} 组件创建完成,组件元素可以调用,一般此时做ajax请求,实现数据驱动视图(常用,重要)
-
beforeMount(){} 在挂载开始之前被调用,此时数据还未被加载到DOM上
-
mounted(){} 装载数据到DOM之后调用,可以操作DOM(也比较重要)\
-
beforeUpdate(){} 在更新之前获取原始的dom
-
updated(){} 更新完之后,调用此钩子获取最新dom,以便之后操作
-
beforeDestroy(){} 实例销毁之前调用。在这一步，实例仍然完全可用
-
destroyed(){} Vue 实例销毁后调用,一般用于定时器的销毁
-
activated(){} keep-alive 组件激活时调用( keep-alive 组件主要作用，让组件产生缓存)
-
deactivated(){} keep-alive 组件停用时调用
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <App></App> </div> </body> <script src="vue.js"></script> <script src="moment.js"></script> <script> let Test1 = { data(){ return { msg1: 'Test1组件内容', } }, template: ` <div> <h3 id="msgs">{{ msg1 }}</h3> <button @click = 'clickHandler'>颜色修改</button> </div> `, methods:{ clickHandler(){ document.querySelector('#msgs').style.color = 'red'; }, }, // keep-alive 组件主要作用，让组件产生缓存, 所以组件激活停用后,状态会保存(例如上面的颜色就能被保存),激活时调用 activated(){ console.log('组件被激活了') }, // keep-alive 组件停用时调用 deactivated(){ console.log('组件被停用了') } }; let Test = { data(){ return { msg: 'Test组件内容', count:null, timer:null } }, template: ` <div> {{ count }} <h3>{{ msg }}</h3> <button @click = 'clickHandler'>修改msg</button> </div> `, methods:{ clickHandler(){ this.msg = '修改之后的Test组件内容'; document.querySelector('#msgs').style.color = 'red'; }, }, beforeCreate(){ console.log('组件创建之前') }, created(){ // 创建一个定时器,每秒加1 this.timer = setInterval(()=> { this.count++ },2000); console.log('组件创建之后') }, beforeMount(){ // 获取不到<h3>Test组件内容</h3>,因为dom还没加载 console.log(document.querySelector('#box')) }, mounted(){ // 可以获取到<h3>Test组件内容</h3>,因为此时dom已经加载完成 console.log(document.querySelector('#box')) }, beforeUpdate(){ // 在更新之前获取原始的dom,点击了修改按钮才会执行更新这两个方法 console.log(document.querySelector('#box').innerHTML) }, updated(){ // 更新完之后,调用此钩子获取最新dom,以便之后操作 console.log(document.querySelector('#box').innerHTML) }, beforeDestroy(){ console.log('在销毁之前') }, destroyed(){ // 由于定时器不会自动销毁,所以一般都会在destroyed方法里面进行销毁 clearInterval(this.timer); console.log('在销毁之后') } }; let App = { data(){ return{ isShow: true, isChange: true } }, methods: { clickDestroy(){ this.isShow = !this.isShow; }, clickActivate(){ this.isChange = !this.isChange; } }, template:` <div> <Test v-if="isShow" /> <button @click = 'clickDestroy'>销毁和创建组件</button> <keep-alive> <Test1 v-if="isChange" /> </keep-alive> <button @click = 'clickActivate'>激活和停用组件</button> </div> `, components: { Test, Test1 }, }; new Vue({ el: '#box', data(){ return{ } }, methods:{ }, components:{ App } }) </script> </html>
-
vue-router的基本使用
Vue的全家桶 (vue+vue-router+vuex)
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用, vue-router是vue的核心插件,
网址为:https://router.vuejs.org/zh/
为什么要使用单页面应用？
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动, 为了用户体验.
-
vue-router使用及命名路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //0 .如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) // 1. 定义 (路由) 组件,可以从其他文件 import 进来,首先定义了首页和课程两个路由组件 const Home = { data(){ return{} }, template:`<div>我是首页</div>` }; const Course = { data(){ return{} }, template:`<div>我是课程页面</div>` }; // 2.定义路由规则,每个路由应该映射一个组件。 其中"component" 可以是,还可以给路由起别名name:'Home' const routes = [ {path: '/', redirect: '/home'}, {path: '/home',name:'Home', component: Home}, {path: '/course', component: Course}, ]; //3.创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ //vue-router 默认 hash 模式(带#号),如果不想要很丑的 hash，我们可以用路由的 history 模式 // mode:'history', routes // (缩写) 相当于 routes: routes }); let App = { data(){ return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 //router-link默认会被渲染成a标签，to属性默认被渲染成href, 绑定to属性,然后再{name:'Home'}通过首页的别名进行访问 template:` <div> <div class="header"> <router-link :to="{name:'Home'}">首页</router-link> <router-link to="/course">课程</router-link> </div> <router-view></router-view> </div> `, }; new Vue({ el:'#box', // 4.创建和挂载根实例,一定要记得挂载 router, data(){ return {} }, template:` <App></App> `, components:{ App } }) </script> </body> </html>
-
动态路由匹配
$route 路由信息对象
$router 路由对象 VueRouter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //动态路由匹配针对的是类似course/1 ,course/22 这样的访问,如果是course?xx=1,则需要用$route.query (如果 URL 中有查询参数) const Course = { data(){ return{ id:null } }, //4 id就发生了变化 template:`<div>我是课程页面/{{ id }}</div>`, //提醒一下，当使用路由参数时，例如从 /course/1 导航到 /course/22，原来的组件实例会被复用。因为两个路由都渲染同个组件， // 比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 // 3. 所以用watch (监测变化) $route 对象 watch:{ // to表示要去哪里,点击/course/2,则to就是/course/2(当前路由信息对象),而from就是/course/1的信息(从/course/1来) '$route'(to, from){ // 对路由变化作出响应, this.id = to.params.id; } } }; const routes = [ // 2.一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params {path: '/course/:id',name:'course', component: Course}, ]; const router = new VueRouter({ routes }); let App = { data(){ return {} }, //1.通过这种params:{id:1}传参 template:` <div> <div class="header"> <router-link :to="{name:'course',params:{id:1}}">课程1</router-link> <router-link :to="{name:'course',params:{id:2}}">课程2</router-link> </div> <router-view></router-view> </div> `, }; new Vue({ el:'#box', router, data(){ return {} }, template:` <App></App> `, components:{ App } }) </script> </body> </html>
-
编程式导航(this.$router.push({name:'Home'}))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> const Home = { data(){ return{} }, template:`<div>我是首页</div>` }; const Course = { data(){ return{ id:null } }, template:`<div> <div>我是课程页面</div> <button @click = 'clickHandler'>跳转首页</button> </div> `, methods:{ // 编程式导航,将要跳转的页面放入$router中 clickHandler(){ this.$router.push({ name:'Home' }) } }, }; const routes = [ {path: '/home',name:'Home', component: Home}, {path: '/course',name:'course', component: Course}, ]; const router = new VueRouter({ routes }); let App = { data(){ return {} }, template:` <div> <div class="header"> <router-link :to="{name:'course'}">课程</router-link> </div> <router-view></router-view> </div> `, }; new Vue({ el:'#box', router, data(){ return {} }, template:` <App></App> `, components:{ App } }) </script> </body> </html>
