一.过滤器
1.局部过滤器 在当前组件内部使用过滤器
//声明
filters:{
'过滤器的名字':function(val,a,b){
//a 就是alax ，val就是当前的数据
}
}
//使用 管道符
数据 | 过滤器的名字('alex'，'wusir')
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <App /> </div> <script src="vue.js"></script> <script src="moment.js"></script> <script> let App = { data(){ return { msg:"hello world", time:new Date() } }, template:` <div>我是一个APP {{ msg | myReverse }} <h2>{{ time | myTime('YYYY-MM-DD')}}</h2> </div> `, filters:{ myReverse:function (val) { console.log(val); return val.split('').reverse().join('') }, //年-月- 日 年- 月 myTime:function(val,formatStr){ return moment(val).format(formatStr); } } } new Vue({ el:'#app', data(){ return { } }, components:{ App } }) </script> </body> </html>
Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字('alex'，'wusir')
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <App /> </div> <script src="vue.js"></script> <script src="moment.js"></script> <script> //全局过滤器 Vue.filter('myTime',function (val,formatStr) { return moment(val).format(formatStr) }) let App = { data(){ return { msg:"hello world", time:new Date() } }, template:` <div>我是一个APP {{ msg | myReverse }} <h2>{{ time | myTime('YYYY-MM-DD')}}</h2> </div> `, filters:{ myReverse:function (val) { console.log(val); return val.split('').reverse().join('') } } } new Vue({ el:'#app', data(){ return { } }, components:{ App } }) </script> </body> </html>
二.生命周期的钩子函数
-
-
发送ajax 获取数据 实现数据驱动视图
获取真实DOM
激活当前组件
-
-
停用当前组件
destroyed
如果开了定时器，一定要关闭定时器
beforeCreate(){
// 组件创建之前
console.log(this.msg);
},
created(){
// 组件创建之后
// 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响 应用：发送ajax请求
console.log(this.msg);
// this.msg = '嘿嘿黑';
},
beforeMount(){
// 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted(){
// 这个地方可以操作DOM
// 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
console.log(document.getElementById('app'));
},
beforeUpdate(){
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated(){
// 在更新之前，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <App/> </div> <script src="vue.js"></script> <script> let Test = { data() { return { msg: 'alex', count:0, timer:null } }, template: ` <div id="test"> <div id="box">{{ msg }}</div> <p>{{ count }}</p> <button @click = 'change'>修改</button> </div> `, methods: { change() { this.msg = 'wusir'; document.querySelector('#box').style.color = 'red'; } }, beforeCreate() { // 组件创建之前 console.log('组件创建之前', this.msg); }, created() { // ********最重要 // 组件创建之后 // this.timer = setInterval(()=>{ // this.count++ // },1000); // 使用该组件，就会触发以上的钩子函数， // created中可以操作数据，发送ajax，并且可以实现数据驱动视图 // 应用：发送ajax请求 console.log('组件创建之后', this.msg); // this.msg = '嘿嘿黑'; }, beforeMount() { // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); }, mounted() { // *******很重要***** // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM console.log(document.getElementById('app')); //jsDOM操作 }, beforeUpdate() { // 在更新之前，调用此钩子，应用：获取原始的DOM console.log(document.getElementById('app').innerHTML); }, updated() { // 在更新之后，调用此钩子，应用：获取最新的DOM console.log(document.getElementById('app').innerHTML); }, beforeDestroy() { console.log('beforeDestroy'); }, destroyed() { //注意： 定时器的销毁 要在此方法中处理 console.log('destroyed',this.timer); clearInterval(this.timer); }, activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); } } let App = { data() { return { isShow:true } }, 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> </body> </html>
三.
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
vue-router是vue的核心插件
为什么要使用单页面应用？
1.使用vue-router
下载引入
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) const Home = { data() { return {} }, template: `<div>我是首页</div>` } const Course = { data() { return {} }, template: `<div>我是免费课程</div>` } //创建路由 const router = new VueRouter({ //定义路由规则 mode:'history', routes: [ { path:'/', redirect:'/home' }, { path: '/home', component: Home }, { path: '/course', component: Course } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link to = '/home'>首页</router-link> <router-link to = '/course'>免费课程</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
2.命名路由
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) const Home = { data() { return {} }, template: `<div>我是首页</div>` } const Course = { data() { return { categoryList:[] } }, template: `<div> <span v-for = '(item,index) in categoryList'>{{item.name}}</span> </div>`, methods:{ getCategroyList(){ } }, created(){ //ajax 发送请求 数据获取 this.getCategroyList(); } } //创建路由 const router = new VueRouter({ //定义路由规则 routes: [ { path:'/', redirect:'/home' }, { path: '/home', name:'Home', component: Home }, { path: '/course', name:'Course', component: Course } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link :to = '{name:"Home"}'>首页</router-link> <router-link :to = '{name:"Course"}'>免费课程</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
3.动态路由匹配
$route 路由信息对象
$router 路由对象 VueRouter
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) //路由范式： //http://127.0.0.1:8080/index/user //http://127.0.0.1:8080/user/1 params //http://127.0.0.1:8080/user/2 //http://127.0.0.1:8080/user?user_id =1 query const User = { data() { return { user_id:null } }, template: `<div>我是用户{{ user_id}}</div>`, created() { console.log(this.$route); //路由信息对象 // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 }, watch: { '$route'(to, from) { // 对路由变化作出响应... console.log(to.params.id); console.log(from); this.user_id = to.params.id; //发送ajax } } } //创建路由 const router = new VueRouter({ //定义路由规则 routes: [ { path: '/user/:id', name: 'User', component: User } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link> <router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>
4.编程式导航
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter // Vue.use(VueRouter) //路由范式： //http://127.0.0.1:8080/index/user //http://127.0.0.1:8080/user/1 params //http://127.0.0.1:8080/user/2 //http://127.0.0.1:8080/user?user_id =1 query const Home = { data() { return {} }, template: `<div>我是首页</div>` } const User = { data() { return { user_id: null } }, template: `<div>我是用户{{ user_id}} <button @click = 'clickHandler'>跳转首页</button> </div>`, created() { console.log(this.$route); }, methods:{ //编程式导航 clickHandler(){ this.$router.push({ name:"Home" }) } }, watch: { '$route'(to, from) { // 对路由变化作出响应... console.log(to.params.id); console.log(from); this.user_id = to.params.id; //发送ajax } } } //创建路由 const router = new VueRouter({ //定义路由规则 routes: [ { path: '/user/:id', name: 'User', component: User }, { path: '/home', name: 'Home', component: Home } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件 //router-view 是路由组件的出口 template: ` <div> <div class="header"> <router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link> <router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link> </div> <router-view></router-view> </div> ` } new Vue({ el: '#app', //挂载 路由对象 router, data() { return {} }, template: `<App />`, components: { App } }) </script> </body> </html>