Vue框架入门学习(二)——Vue修饰符

xiaoxiao2023-12-30 162

文章目录

三、Vue进阶用法1.事件修饰符2.computed—计算属性3.watch—监听属性※4.Vue-router5.命名路由6.JS控制路由跳转7.监视路由8.多视图

三、Vue进阶用法

1.事件修饰符

指针对于v-on事件产生的修饰符，例如说.stop可以让操作停止

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="div1"> <div class="" @click="fn1()"> <input type="button" value="按钮" @click.stop="fn2()"> </div> </div> </body> <script> let vm = new Vue({ el:'#div1', data:{ }, methods:{ fn1(){ alert('11'); }, fn2(){ alert('22'); } } }); </script> </html>

接下来对于几个事件修饰符进行举例 stop 禁止冒泡 once 单次事件 prevent 阻止默认事件 native 原生事件(原生环境下new Vue方法无法使用) keycode|name 控制键盘按键

prevent，once

keydown

由回车来控制提交

由组合键来控制提交

2.computed—计算属性

与method的实现有一定区别不主动计算，有缓存，当数据改变的时候才会重新计算，性能更高

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Computed</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="div1"> 姓：<input type="text" v-model="familyName"> 名：<input type="text" v-model="Name"> <input type="text" v-model="sum"> </div> </body> <script> let vm = new Vue({ el:'#div1', data:{ familyName:'张', Name:'章' }, computed: { sum:{ get() { return this.familyName + this.Name; }, set(value) { this.familyName=value[0]; this.Name=value.substring(1) } } } }); </script> </html>

3.watch—监听属性

在这里要强调保证属性一直才能达到监听的效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Computed</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="div1"> <input type="text" v-model="user_info.name"> </div> </body> <script> let vm = new Vue({ el:'#div1', data:{ user_info:{ name:'blue', age:18 } }, watch:{ 'user_info.name':function() {//user_info的某一个属性,watch的属性,v-model的属性三者要保持一致 console.log('name 变了') } } }); </script> </html>

※4.Vue-router

1.容器 <router-view></router-view> 2.路由表

let router = new VueRouter({ routes:[ { path:, component:{} } ] });

3.添加到vm对象，el，data，methods，··· 举例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> </head> <body> <div id="div1"> 文字  <router-view></router-view> </div> </body> <script> //2.配置路由表 let router = new VueRouter({ routes:[ { path:'/a', component:{template:'<div>aaaaa</div>'} }, { path:'/b', component:{template:'<div>bbbbb</div>'} }, { path:'/c', component:{template:'<div>ccccc</div>'} } ] }); let vm = new Vue({ el:'#div1', data:{}, //将路由表添加到vm中，通过地址去填充router-view router:router }); </script> </html>

由于我们在这里操作的用手动修改域名的方式来进行页面的跳转，所以在这里我们也可以创建href进行手动跳转

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> </head> <body> <div id="div1"> <a href="#/a">页面1</a> <a href="#/b">页面2</a> <a href="#/c">页面3</a> 文字  <router-view></router-view> </div> </body> <script> //2.配置路由表 let router = new VueRouter({ routes:[ { path:'/a', component:{template:'<div>aaaaa</div>'} }, { path:'/b', component:{template:'<div>bbbbb</div>'} }, { path:'/c', component:{template:'<div>ccccc</div>'} } ] }); let vm = new Vue({ el:'#div1', data:{}, //将路由表添加到vm中，通过地址去填充router-view router:router }); </script> </html>

但是这里我们写href又感觉很原始，其实router里面封装了router-link能方便我们进行页面的跳转

<router-link to="/a">页面1</router-link> <router-link to="/b">页面2</router-link> <router-link to="/c">页面3</router-link>

PS：用#可以防止页面刷新在router-link内给按钮加样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> <style media="screen"> .links {overflow:hidden;} .links .nav {float:left; color: aqua;margin-right:10px} .links .router-link-active { color: blueviolet;} </style> </head> <body> <div id="div1"> <div class="links"> <router-link class="nav" to="/a">页面1</router-link> <router-link class="nav" to="/b">页面2</router-link> <router-link class="nav" to="/c">页面3</router-link> </div> 文字  <router-view></router-view> </div> </body> <script> //2.配置路由表 let router = new VueRouter({ routes:[ { path:'/a', component:{template:'<div>aaaaa</div>'} }, { path:'/b', component:{template:'<div>bbbbb</div>'} }, { path:'/c', component:{template:'<div>ccccc</div>'} } ] }); let vm = new Vue({ el:'#div1', data:{}, //将路由表添加到vm中，通过地址去填充router-view router:router }); </script> </html>

5.命名路由

若router path太复杂，就可以选择给router进行命名，而且路由的选择根据举例来决定顺便加入了一些样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> <style media="screen"> .links {overflow:hidden;} .links .nav {float:left; color: aqua;margin-right:10px} .links .router-link-active { color: blueviolet;} </style> </head> <body> <div id="div1"> <div class="links"> <router-link class="nav" :to="{name:'aaa',params:{id:55}}">页面1</router-link> <router-link class="nav" to="/b">页面2</router-link> <router-link class="nav" to="/c">页面3</router-link> </div> 文字  <router-view></router-view> </div> </body> <script> //2.配置路由表 let router = new VueRouter({ routes:[ { path:'/news/:id', name:'aaa', component:{template:'<div>新闻：{{$route.params.id}}</div>'} //route 路由信息 }, { path:'/b', name:'bbb', component:{template:'<div>bbbbb</div>'} }, { path:'/c', name:'ccc', component:{template:'<div>ccccc</div>'} } ] }); let vm = new Vue({ el:'#div1', data:{}, //将路由表添加到vm中，通过地址去填充router-view router:router }); </script> </html>

6.JS控制路由跳转

之前提到了，获取id的时候我们使用的是$route 而使用js来控制路由跳转，使用的是 $router

首先先创建一个事件，导向定义好的路由地址，根据路由地址对应的template去填充router-view，而如果是参数，就通过调用的函数找到对应的参数后再填充。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> <style media="screen"> .links {overflow:hidden;} .links .nav {float:left; color: aqua;margin-right:10px} .links .router-link-active { color: blueviolet;} </style> </head> <body> <div id="div1"> <div class="links"> <input type="button" value="页面1" @click="fn1()"> <input type="button" value="页面2" @click="fn2()"> <input type="button" value="页面3" @click="fn3()"> </div> 文字  <router-view></router-view> </div> </body> <script> //2.配置路由表 let router = new VueRouter({ routes:[ { path:'/news/:id', name:'news', component:{ template:'<div>新闻：{{$route.params.id}}</div>' } //route 路由信息 }, { path:'/b', name:'bbb', component:{ template:'<div>bbbbb</div>' } }, { path:'/c', name:'ccc', component:{ template:'<div>ccccc</div>' } } ] }); let vm = new Vue({ el:'#div1', data:{}, //将路由表添加到vm中，通过地址去填充router-view router:router, methods:{ fn1() { this.$router.push({ name:'news', params:{ id:22 } }); }, fn2() { this.$router.push('/b'); }, fn3() { this.$router.push('/c'); } } }); </script> </html>

7.监视路由

使用watch来实现路由监视的功能

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> <style media="screen"> .links {overflow:hidden;} .links .nav {float: left; color:#CCC; margin-right:10px} .links .router-link-active {color:black;} </style> </head> <body> <div id="div1"> <div class="links"> <input type="button" value="页面1" @click="fn1()"> <input type="button" value="页面2" @click="fn2()"> <input type="button" value="页面3" @click="fn3()"> </div> 文字  <router-view></router-view> </div> </body> <script> //2.路由表 let router=new VueRouter({ routes: [ { path: '/news/aaa/', component: { template: '<div>新闻2</div>' } }, { path: '/news/:id/', name: 'news', component: { template: '<div>新闻：{{$route.params.id}}</div>' } }, { path: '/b', component: {template: '<div>bbbbb</div>'} }, { path: '/c', component: {template: '<div>cccccc</div>'} } ] }); let vm=new Vue({ el: '#div1', data: {}, methods: { fn1(){ this.$router.push('/news/19'); //this.$router.replace({name: 'news', params: {id: Math.random()}}); }, fn2(){ this.$router.push('/b'); }, fn3(){ this.$router.push('/c'); } }, router, watch: { $route(value, old_value){ console.log(value, old_value); } } }); </script> </html>

但用watch进行路由监视不推荐，因为只能看，无法干预，官方更推荐使用路由守卫，因为可以进行干预。

？

8.多视图

使用多个router-view，用name去进行标注

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <script src="vue-router.js" charset="utf-8"></script> </head> <body> <div id="div1"> <div class="links"> <router-link to="/">首页</router-link> <router-link to="/news">新闻</router-link> </div>  <router-view name="header"></router-view> <router-view></router-view> <router-view name="footer"></router-view> </div> </body> <script> const headerCmp = { template:'<div>头部</div>' }; const footerCmp = { template:'<div>底部</div>' }; const newsCmp = { template: '<div>新闻</div>' }; const userCmp = { template: '<div>用户</div>' }; const indexCmp = { template: '<div>首页</div>' }; //2.路由表 let router=new VueRouter({ routes: [ { path:'/', name:'index', //完成视图对应的工作,以router-view的name与声明的变量进行配对 components: { default:indexCmp,//默认视图 header:headerCmp, footer:footerCmp } }, { path:'/news', name:'news', components:{ default:newsCmp, header:headerCmp, footer:footerCmp } } ] }); let vm=new Vue({ el: '#div1', data: {}, methods: { }, router }); </script> </html>

最新回复(0)