一.过滤器
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路由的钩子函数几种。
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 获取数据 实现数据驱动视图
mounted
钩子函数activated， 获取真实DOM
activated
激活当前组件
deactivated
-
-
停用当前组件
destroyed
vue生命钩子， 如果开了定时器，一定要关闭定时器
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操作以后的DOMconsole.log(document.getElementById('app'));},beforeUpdate(){// 在更新之前，调用此钩子，应用：获取原始的DOMconsole.log(document.getElementById('app').innerHTML);},updated(){// 在更新之前，调用此钩子，应用：获取最新的DOMconsole.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的核心插件
vue生命周期钩子8个还是11个？ 为什么要使用单页面应用？
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>
react钩子函数。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>
![在ASP.NET中防止注入攻击[翻译]](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
