1.过滤器
1.局部过滤器,在当前组件内部使用过滤器,给某些数据添油加醋.
//声明
filters:{
"过滤器的名字":function(val,a,b){
//a就是alex,val就是当前的数据
}
}
//使用 管道符|
数据 | 过滤器的名字("alex","wusir")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1</title> </head> <body> <div id="app"> <App/> </div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/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) { 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>
2.全局过滤器,只要过滤器一创建,在任何组建中都能使用
Vue.filter("过滤器的名字",function(val,a,b){})
在各个组建中都能使用
数据 | 顾虑器的名字("alex","wusir")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> </head> <body> <div id="app"> <App/> </div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/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) { return val.split("").reverse().join("") } } }; new Vue({ el: "#app", data() { return {} }, components: { App } }) </script> </body> </html>
2.生命周期的钩子函数
beforeCreate():组件创建之前
created():组件创建之后
beforeMount():装载数据到DOM之前会被调用
mounted():装载数据到DOM之后会调用,可以获取到真实存在的DOM元素
beforeUpdate():在更新之前,调用此钩子,应用:获取原始的DOM
updated():在更新之后,调用此钩子,应用:获取最新的DOM
beforeDestroy():组件销毁之前
destroyed():组件销毁之后,如果开了定时器,一定要关闭定时器
acticated():组件被激活
deactivated():组件被停用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3</title> </head> <body> <div id="app"> <App/> </div> <script src="../vue/dist/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() { //组件创建之后 console.log("组件创建之后", this.msg); }, beforeMount() { //装载数据到DOM之前会调用 console.log(document.getElementById("app")); }, mounted() { //装载数据到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("beforeDestory"); }, destroyed() { //定时器的销毁要在此方法中处理 console.log("destroyed", this.msg); }, 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>
3. vue-router的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/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>
4.命名路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5</title> </head> <body> <div id="app"></div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/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:{ getCategoryList(){ } }, created(){ //ajax发送请求,数据获取 this.getCategoryList(); } }; //创建路由 const router = new VueRouter({ //定义路由规则 mode: "history", 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是路由组件的出口
//router-link默认会被渲染成a标签,to属性默认被渲染成href
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>
5.动态路由匹配
$route 路由信息对象
$router 路由对象VueRouter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7</title> </head> <body> <div id="app"></div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/vue-router.js"></script> <script> //路由范式: //http://127.0.0.1:8000/index/user //http://127.0.0.1:8000/user/1 //http://127.0.0.1:8000/user/2 //http://127.0.0.1:8000/user?user_id=1 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 {} }, 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>
6.编程式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>8</title> </head> <body> <div id="app"> </div> <script src="../vue/dist/vue.js"></script> <script src="../vue/dist/vue-router.js"></script> <script> 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 {} }, 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>