VUE核心
-
插值语法：
功能:用于解析标签体内容（如
<div>标签体</div>）语法：
{{xxx}}，xxx会作为js表达式解析 -
指令语法：
功能:解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href=‘xxxx’，xxxx会作为js表达式被解析（v-bind绑定标签属性的内容，v-bind可简写为
:）Vue中有有很多的指令，此处只是用v-bind举个例子
-
vue对象绑定和data的两种写法：
-
第一种：
<div id="root"></div> <script type="text/javascript"> new Vue({ el:'#root'; <!--进行绑定--> data:{} <!--对象式--> }) </script> -
第二种：
<div id="root"> </div> <script type="text/javascript"> const v=new Vue({ data:function(){ <!--函数时，也可以简写为data(){return{}}--> return{} } }) v.$mount('#root') <!--进行绑定--> </script>
-
数据绑定
-
单向数据绑定：
使用
v-bind进行数据绑定。特点：数据只能从data流向页面，在页面上进行的数据改变不会使data里的数据发生变化。
-
双向数据绑定：
语法
v-mode:value="xxx"或简写为v-model="xxx"；但v-model只能应用在表单类元素（输入类元素）上，因为v-model默认收集的就是value值。特点：数据不仅能从data流向页面，还能从页面流向data。
MVVM模型
- Model：（模型）对应data中的数据
- View：（视图）DOM模板
- ViewModel：（视图模型）Vue实例对象。用来连接
Model和View，是Model和View之间的桥梁。每当V层获取或者保存数据的时候，都要由VM层做中间的处理，从而交给M层。
vm身上所有的属性及vue原型上所有属性，在Vue模板中都可以直接使用
数据代理
-
Object.defineProperty方法
<script type="text/javascript"> let number=18 let person={ name:'张三', sex:'男' } Object.defineProperty(person,'age',{//向person对象中设置age属性 //value:number, enumerable:true,//控制属性是否可以枚举 writable:true,//控制属性是否可以被修改 configurable:true,//控制属性是否可以被删除 get(){//当读取person的age属性时，get函数就会被调用，且返回值就是age的值 return number; } set(value){ number=value } }) </script> -
数据代理
vm会对data里的数据进行数据代理。vm中也有data中的属性，但与data是不一样的，就是进行了数据代理（其中还添加了监视数据的功能），将data中的数据进行代理然后再通过get方法传给 vm 中的属性
计算属性-computed
要显示的数据不存在，要通过计算得来。为了简化在DOM中的操作，在 computed 对象中定义计算属性。
computed对象 比 methods 的好处是增加了缓存机制，且可直接使用类似属性名的方式使用
<div id="root">
<input type="text" v-model="data1">
<input type="text" v-model="data2">
{{data3}}<!--调用属性-->
</div>
<script type="text/javascript">
const v=new Vue({
data:{
data1:1
data1:2
},
computed:{
data3:{//就是defineProperty的机制，data3还是个属性
get(){
return this.data1+this.data2
},
set(value){...}
}
}
//简写方式：直接写成data3(){}代替get()【在不使用set的情况下】
})
v.$mount('#root') <!--进行绑定-->
</script>
静态资源处理
如需引用本地的图片或者视频，需要加上require
{url:require("../static/video/video.mp4")}
事件处理
-
事件的基本使用：
<div id="root"> <button @click="showInfo($event,arg)">点击</button> </div> <script type="text/javascript"> const v=new Vue({ data:{}, methods:{//所有的方法都放在这 showInfo(event,arg){ <!--事件处理--> } } }) v.$mount('#root') <!--进行绑定--> </script>-
使用
v-on:xxx或@xxx绑定事件，其中 xxx 为事件名。例如 点击事件
v-on:click="方法名"（方法用于处理事件） -
showInfo($event,arg)：在方法名后的括号里可以进行传参，为了避免event丢失，最好手动添加一个$event。
-
-
vue中的事件修饰符：(如
@click.xxx).prevent:阻止默认事件（比如点击一个链接的默认事件为跳转页面）.stop:阻止事件冒泡.once:事件只触发一次（方法中执行的事件）.self:只有event.target是当前操作的元素时才触发事件。（如发生事件冒泡时，event.target不会随着事件冒泡而发生改变。）.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(比如方法中的执行)。
-
键盘事件（
@keydown.xxx,@keyup.xxx）：-
Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right -
系统修饰键（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 -
按键修饰符：
keycode : 操作的是某个 keycode 值的键
keyName : 操作的某个按键名的键(少部分
-
-
状态改变事件（@change）
监视属性-watch
通过vm对象的$watch()或watch配置来监视指定的属性。当属性变化时,回调函数自动调用,在函数内部进行计算。
new Vue({
....
watch:{
被监视的属性名:{
handler(newValue,oldValue){/*处理事务*/}
}
}
})
//另一种写法
vm.$watch('属性名',{handler(newValue,oldValue){/*处理事务*/}})
-
如果被监视属性为一个对象，则需使用
'对象.属性' -
如果对象中存在多个层级（默认不监视内部属性值的改变），则需要开启深度监视
deep:true -
两个小原则：
- 所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象（Vue会自动把this替换）
- 所有不被Vue所管理的函数（在Vue对象内部调用），最好写成箭头函数（内部没有this，会自动向外找this），这样this的指向才是vm
绑定样式
-
class绑定：
<style> .style1{...} .style2{...} ........ </style> <div id="root"> <div class="basic" :class="str" @click="action1"></div><!--@click为触发事件，也可以为其他的事件--> <div class="bassic" :class="arr" @click="action2"></div> <div class="bassic" :class="obj" @click="action2"></div> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ //将class值转换为Vue里的属性值，通过触发事件可以动态的改变样式 str:'style1,style2...',//字符串法绑定 arr:['style1','style2']//数组法绑定，用于样式类名不确定，且数量不确定的方式 obj:{ //对象绑定法 style1:false, style2:true } } //可以通过在methods中通过事件动态改变样式 }) </script> -
style绑定：
<div id="root"> <!-- 绑定style样式--对象写法 --> <div class="basic" :style="styleObj">{{name}}</div> <br/><br/> <!-- 绑定style样式--数组写法 --> <div class="basic" :style="styleArr">{{name}}</div> </div> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', mood:'normal', styleObj:{ fontSize: '40px', }, styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] } </script>
条件渲染
-
v-show:
<h2 v-show="false">hello</h2><!--当v-show值为false时，该标签将会被隐藏起来，为true则会显现--> -
v-if和 v-else-if
v-if与v-show不同的是，v-if的值为false时直接将标签元素删除。v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。使用
<template v-if>可以包裹元素，且不会影响页面结构。（在渲染时<template>会自动去掉） -
如果需要频繁切换 v-show 较好
列表渲染
-
v-for指令：
用于展示列表数据
<div id="root"> <h2>人员列表（遍历数组）</h2> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(value,k) of car" :key="k"> {{k}}-{{value}}<!--key-value键值对--> </li> </ul> <h2>测试遍历指定次数（用得少）</h2> <ul> <li v-for="(number,index) of 5" :key="index"> {{index}}-{{number}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奥迪A8', price:'70万', color:'黑色' } } }) </script> -
key的作用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zm2x3G0F-1684223486801)(D:\学习图片资料\Vue\虚拟dom中的key.png)]
在列表中，虚拟dom的对比是根据key值来进行的（默认为下标索引）
对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
Vue监视数据
Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据属性（生成一个新的data(数据代理)，为属性添加get和set，其中含有监听机制）。
(1)对象中后追加的属性，Vue默认不做响应式处理
(2)如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
(target为包含要修改的属性的对象或数组，propertyName为要修改或添加的属性，value为值)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。（pop、push、shift...）
(2).重新解析模板，进而更新页面。（增加监听机制，使能够响应给前端页面）
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！（即target不能是vm.data之类的）
表单数据收集
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(配置value值：<input type="checkbox" v-model="xxx" value="xxx">)
2.配置input的value属性:
(1)v-model中的"xxx"的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model中的"xxx"的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
.lazy：失去焦点再收集数据
.number：输入字符串转为有效的数字（搭配<input type="number"/>使用，其功能为只能输入数字）
.trim：输入首尾空格过滤
过滤器
/**过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理，较为复杂的操作还是使用computed和methods）。
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
**/
//1、注册过滤器：
//全局过滤器
Vue.filter('过滤器名',function(value){
return value
})
//局部过滤器
new Vue{
filters:{
filterName(value){
return value
}
}
}
//2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名 |过滤器名"(会默认将xxx的值传入到过滤器，如果还传递其他的参数不会将其覆盖)
//多个过滤器串联，形成一个过滤链。
内置指令
-
v-text
- 作用：向其所在的节点中渲染文本内容（输出文本）
- 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
- 不过与插值语法的效果一样
-
v-html
-
作用：向指定节点中渲染包含html结构的内容（即v-html可以识别html结构）
<div v-html="str"></div> <!--str:'<h3>你好啊！</h3>' 输出为：'你好啊！' --> -
严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(容易被别人通过标签中的js代码获取信息) (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
-
-
v-cloak
-
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
-
使用css配合使用，解决网速慢时页面展示出未经Vue解析的模板。
<style> [v-cloak]{ display:none; } </style>
-
-
v-once
-
v-once所在节点中的数据在初次动态渲染后，就视为静态内容了。
<h2 v-once> 初始化的n值是:{{n}} </h2> <!--如果设置个点击事件，且n的初始为1，则在第一次后就不会再显示后续n改变的值。就相当于将n中的值变为一个常数，但不是把n变为一个常数--> -
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
-
-
v-pre
- 作用：跳过其所在节点的编译过程。vue不会再解析该节点。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点、加快编译。
自定义指令
自定义指令：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives:{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
注意：在directives内的this不再是vm对象，而是windows
二、配置对象中常用的3个回调函数：
（vue的执行流程为：先与模板<div>中的指令进行绑定，然后在插入页面。当模板中数据或结构发送变化时会重新解析模板）
(1)bind(element,binding)：指令与元素成功绑定时调用。
(2)inserted(element,binding)：指令所在元素被插入页面时调用。
(3)update(element,binding)：指令所在模板结构被重新解析时调用。
(element为与指令绑定的dom元素，binding为html元素内 v-指令=""中的值)
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
生命周期函数
生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
-
mounted()周期函数
new Vue({ //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ ... } }) -
beforeDestroy：
清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
- 在beforeDestroy中执行销毁过程阶段，只解绑自定义事件，而对于原生的dom事件（如@click）是已经与dom进行绑定了，不会被解绑。
- 在
beforeDestroy及以后就不会再进行对数据的监视和更新了。所以一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程。
Vue组件化编程
非单文件组件
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
-
定义组件
//例如创建school组件 //组件实例中不配置 el项 //template:模板，该组件所用到的html代码使用 `` 包裹起来。html元素中必须使用<div>括起来 //data只能使用函数式返回对象数据。因为这样的数据对象不再是单例的 const school = Vue.extend({ template:` <div class="demo"> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return { schoolName:'尚硅谷', address:'北京昌平' } } }) //精简的写法去掉Vue.extend，直接定义成一个对象。在component中会自行判断调用Vue.extend。 -
注册组件
//1.局部注册：靠new Vue的时候传入components选项 new Vue({ el:'#root', components:{ school //是school:school 的简写 } }) //2.全局注册：靠Vue.component('组件名',组件) Vue.component('school',school) -
使用组件
<div id="root"> <!-- 第三步：编写组件标签--> <school></school> </div> -
嵌套组件
组件中也存在
component对象，将一个组件注册到另一个组件中，就实现了嵌套，然后在组件的template中使用注册的组件对应的html标签元素就可以了。 -
关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象， 即Vue帮我们执行的：new VueComponent(options)。 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！ 4.关于this指向： (1)组件配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例象】。 (2)new Vue(options)配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 Vue的实例对象，以后简称vm。
单文件组件
-
创建一个.vue文件（component组件）
//School.vue <template><!--存放html--></template> <script> //组件交互相关的代码 export default{ //向外暴露接口，以便html引用 name:'School', data(){} } </script> <style>/*组件的样式*/</style> -
创建App.vue（汇总所有的组件）
<template> <div> <School></School> </div> </template> <script> //引入组件 import School from './School.vue' export default { name:'App', components:{ School } } </script> -
创建main.js（创建vue实例）
import App from './App.vue' new Vue({ el:'#root', template:`<App></App>`, components:{App}, }) -
然后在html中引用。但是浏览器不支持
import，所以上述要在脚手架中支持运行。
Vue脚手架
脚手架中引入的vue并不是完整版的vue。
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
- 打标识：
<h1 ref="xxx"></h1>或<School ref="xxx"></School> - 获取：
this.$refs.xxx
- 打标识：
props配置项
-
功能：让组件接收外部传过来的数据
-
向组件传递数据：
<Demo name="xxx"/>（组件标签，默认传入的值为字符串，可以用v-bind绑定成JS表达式，转换为数值型）传送的数据也可以是对象和方法，对于方法传递过去调用时还是在属于原来定义它的组件中执行。（数据在哪，对数据的操作就在哪，然后任由其他组件调用）
-
声明接收数据：
-
第一种方式（只接收）：
props:['name'] -
第二种方式（限制类型）：
props:{name:String} -
第三种方式（限制类型、限制必要性、指定默认值）：
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 //required与default一般不同时出现 } }
备注：props是只读的，Vue底层会监测你对props的修改（只是监测地址的变化），如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份（属性名不能重名），然后去修改data中的数据。
props的优先级比data的高，会先在vc上配置props传来的属性
-
mixin（混入）
-
功能：可以把多个组件共用的配置提取成一个混入对象
-
使用方式：
-
第一步定义混合：重新创建一个
mixin.js文件export const mixin1 = { methods: {}, data:{}, mounted() {} } export const mixin2 = { .... } -
第二步使用混入：
全局混入：在main.js中导入
import {mixin1,mixin2} from './mixin' Vue.mixin(mixin1) Vue.mixin(mixin2)局部混入：在要使用的组件中导入
import {mixin1,mixin2} from './mixin' mixins:[mixin1,mixin2]
-
-
注意事项：
- 如果mixin对象与组件同时有相同的元素或方法，则以组件的为准
- 但是如果minxin对象与组件同时有mounted对象，两个mounted中的元素都会被加载。
scoped样式
- 作用：让样式在局部生效，防止冲突
- 写法：
<style scoped>
路由
- 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
- 前端路由：key是路径，value是组件。
基本使用
-
安装vue-router，命令：
npm i vue-router（vue2里引入npm install vue-router@3.2.0 -S） -
应用插件：
Vue.use(VueRouter)（一般在main.js中应用） -
创建index.js配置路由项（一般在src下新建router文件夹，放入其中）
import VueRouter from 'vue-router' import Login from "@/pages/Login"; export default new VueRouter({ routes:[ { path:'/', component:Login }, ] }) -
在App.vue中展示
<template> <router-view></router-view>//一个占位符，页面会在这进行展示 </template>-
如果存在导航栏，也可以在导航栏项中通过链接点击进行切换，内容展示在
<router-view></router-view>中<router-link active-class="active" to="/about">About</router-link>//在解析时会转换成a标签
-
几个注意点
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹。 - 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息。 - 整个应用只有一个router，可以通过组件的
$router属性获取到。
多级路由
-
配置路由规则，使用children配置项：
routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写：/news component:News }, { path:'message',//此处一定不要写：/message component:Message } ] } ] -
通过链接跳转（要写完整路径）
//通过路径引用 <router-link to="/home/news">News</router-link>
命名路由
-
作用：可以简化跳转，直接使用名称进行路由跳转
-
在路由对象中添加name属性
//注意，在router-link中的使用方式 <router-link :to="{name:xxxx}"></router-link>
默认跳转路由
例如点击链接，自动跳转到index页面
export default new VueRouter({
routes:[
{
path: '/', //在'/'页面默认跳转到'index'页面
redirect:'index'
},
{
path:'/',
component:Home,
children:[
{
name:'index',
path:'index',
component:()=>import('@/pages/index')
}
]
}
]
})
query参数传递
-
传递参数
<!-- 跳转并携带query参数，to的字符串写法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link> <!-- 跳转并携带query参数，to的对象写法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:m.id, title:m.title } }" >跳转</router-link> <router-view></router-view><!-- 指定组件的呈现位置 --> -
Detail.vue中接收参数（在template中）：例如<template> <ul> <li>消息编号:{{$route.query.id}}</li> <li>消息编号:{{$route.query.title}}</li> </ul> </template>
params参数传递
-
配置路由，声明接收params参数
{ path:'/home', component:Home, children:[ { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] } -
传递参数
<!-- 跳转并携带params参数，to的字符串写法 --> <router-link :to="/home/message/detail/${m.id}/${m.title}">跳转</router-link> <!-- 跳转并携带params参数，to的对象写法 --> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳转</router-link> <router-view></router-view><!-- 指定组件的呈现位置 -->特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
接收参数如同上述
props参数传递
-
在路由中配置
props属性<script> export default new VueRouter({ routes:[ { name:'Detail', path:'/:id/:title',//params占位,与第二种props写法搭配使用 component:Detail, //props的第一种写法，值为对象。 props:{id:1,title:'hello'} //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件，但是对于query参数无效 props:true //props的第三种写法，值为函数 props($route){ return{ id:$route.query.id, title:$route.query.title } } } ] }) </script> -
传递参数
<router-link :to="{ name:'detail', query(或者params):{ //第三种props写法中的$route.query数据来与此 id:666, title:'你好' } }" >跳转</router-link> <router-view></router-view><!-- 指定组件的呈现位置 --> -
在组件中配置props属性接收数据
<template> <!--可以在这通过插值语法引用传来的参数--> </template> <script> export default{ name:'Login', props:['id','title'] } </script>
编程式路由导航
-
不使用
<router-link>标签，使用方法的形式。<template> <div> <ul> <li v-for="m in messageList" :key="m.id"> <button @click="pushShow(m)">push查看</button> </li> </ul> <hr> <router-view></router-view><!-- 指定组件的呈现位置 --> </div> </template> <script> export default{ name:'Login', props:['id','title'], data() { return { messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'} ] } }, methods:{ pushShow(m){ this.$router.push({ name:'xiangqing',//跳转的页面 query:{ id:m.id, title:m.title } }) } } } </script>
缓存路由组件
-
如果路由中的组件存在类似于输入框这些的元素，不想在切换路由时将其组件销毁，则需要使用缓存。
-
在该组件展示所在的
<router-view>使用<keep-alive>包裹<keep-alive :include="['被展示组件的组件名']">//只有include中的组件才会在切换时不被销毁。 <router-view></router-view> </keep-alive>
激活与失活生命周期
-
**激活生命周期：**当点击并显示该组件页面时，才会触发一些事务（在组件不被销毁的情况下）
activated(){ //被激活时触发的事务 } -
**失活生命周期：**当切换到其他组件页面时，结束一些事务
deactivated(){ //结束事务 }
geList" :key=“m.id”>
<button @click=“pushShow(m)”>push查看
### 缓存路由组件
- 如果路由中的组件存在类似于输入框这些的元素，不想在切换路由时将其组件销毁，则需要使用缓存。
- 在该组件展示所在的`<router-view>`使用`<keep-alive>`包裹
```vue
<keep-alive :include="['被展示组件的组件名']">//只有include中的组件才会在切换时不被销毁。
<router-view></router-view>
</keep-alive>
激活与失活生命周期
-
**激活生命周期：**当点击并显示该组件页面时，才会触发一些事务（在组件不被销毁的情况下）
activated(){ //被激活时触发的事务 } -
**失活生命周期：**当切换到其他组件页面时，结束一些事务
deactivated(){ //结束事务 }
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
