vue笔记

1>添加数据
let p={
name:'',
}
Object.defindProperty(变量名p,'添加项名',{
value: //数值
emumerable: //可选布尔值是否可以被枚举
writable: //可选布尔值是否可以被修改
configurable: //可选布尔值是否可以被删除以上默认false
})
包括的两个函数 get set
Object.defineProperty(person,'age',
{
//有人读取所添加的属性age时调用,返回值就是age的value值
get:function(){
return 'number'
},
//有人修改所添加的属性age时调用,返回值就是修改的age的value值
set(value){

number=value
}
})
console.log(person)
2>

6.事件处理

//可以写一些简单语句
1>指令 v-on:click='函数名' 简写 @click
在vue绑定的实例中添加methods:{
函数(e){
//可以传递参数，this是vm
}
}
eg：
<button @click='fun'>按钮1</button> 可以在此处传递参数写做 fun(需要传递的值,$event)可以不传
js：
const vm=new Vue({
el:'#d1',
methods:{
fun(需要传递的值,e){
alert("dd")
}
}
})
2>@scroll绑定滚动条,@wheel绑定鼠标滚动轮
3>@keyup @keydown 键盘点击事件
在其后加.enter表示判断是否否回车，回车才传值
相当于js中 if(e.keycode==13){return}

7.事件修饰符

//写在事件处理指令的后边可以同时写几个并列使用

.prevent 阻止默认事件
.stop 阻止冒泡事件加在最内层
.once 事件只触发一次
.passive 优先执行默认行为再回调函数中内容
.capture
.self

8.vue中常用按键别名

1>常见

回车 enter 删除 delete 退出 esc 空格 space 换行 tab 上下左右 up down left right
在键盘绑定事件后6.3>中后加上.以上表示判断后传值如果需要绑定的按键事件的按键不是以上常用的可以通过输出e.key查看名称以同样方式绑定.caps-lock多个单词小写用-链接
绑定的函数中写 console.log(e.target.value)
tab一般配合@keydown使用，因为tab按下会失去焦点

2>系统修饰键

crtl alt shift win
如果这三个按键绑定在@keyup上那么触发条件是，需要和其他按键同时按下，并在其他按键被释放时触发可以与其他按键并列写记作同时按下时触发@keyup.ctrl.y
如果和@keydown绑定则正常直接在按下时触发

3>自定义按键绑定名称方法

全局中写 Vue.config.keyCodes.自定义名称 = 按键的编码号（keycode值）
使用时写做@keyup.自定义名称或 @keydown.自定义名称

9.计算属性无法通过异步数据同步

1>不使用时同步显示输入框变量拼接显示

<body>
<div id="d1">
<input v-model="f">
<input v-model="l">
<span>{{aname()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm=new Vue({
el:"#d1",
data:{
f:'张',
l:"三"
},
methods:{
aname(){
return this.f.slice(0,3) + this.l
}
}
})
</script>

2>不放在data中放在computed中函数的this是vm 对属性进行计算不包括变量

将1中的methods内容并把绑定数据{{中的()去掉}}改成如下实现相同效果
computed:{
aname:{
//读取触发
get(){
console.log('dd')
return this.f+this.l
} ,
//修改触发
set(){
const arr = value.split('-')
this.f =arr[0]
this.l=arr[1]
}}
}
凭借计算简写方式
computed:{
凭借后属性名(){

}
}//在html中用{{属性名}}渲染

10 监听

watch监视属性
其中写属性可以写成属性有val值

1>写在实例中

watch:{
监测的属性名:{
//初始化时被handler调用
immediate:true,
//当na发生变化时，handler被调用
handler(newValue,oldValue){
console.log(newValue)
}
}

2>不写在实例中通常用于不知道监视哪个配置项

vm.$watch('监视的数据名',
{
//初始化时被handler调用
immediate:true,
//当na发生变化时，handler被调用
handler(newValue,oldValue){
console.log(newValue)
}
)

3>多层级深度监测

监测某属性中的某一属性
当监测某属性下的属性时属于深度监测需要在watch中将属性写做
'父属性.子属性':{}
监测某属性的全部属性
在watch中父属性名:{ 加入deep属性赋值为true }
eg:
watch:{
na:{
deep:true
handler(){

}
}
}

11.绑定class样式

:class后的字符串可以是变量也可以是数组可以是对象
html中<div class="b" :class="改变的样式存放的变量x" ></div> //:class后接的是字符串可以动态改变
在vue中
data中定义x变量初始值
在绑定的点击响应函数中操作重新赋值该变量达到变化效果 this.变量='新值'

12.绑定内联样式

内联样式中有值为变量
<h1 :style="{fontsize:变量名+'px';}"></h1> 变量放在data中也可以直接把样式中某个属性写成对象
<h1 :style="对象名"></h1>在data中对象名:{fontsize:'40px'}
也可以是数组

13.条件渲染

整体判断不可以被打断
v-show可以用来控制节点的显示和隐藏，选值为布尔类型可以是变量 //display并没有删除掉
v-if可以用来隐藏节点，选值也为布尔值可以是变量 //直接删除了节点结构
v-else-if if表同级需要历遍，elseif如果有一个成立则直接停止
v-else 其他条件都不符
css中template可以站位不影响结构只能与v-if配合使用

14.列表渲染

v-for
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.属性 }} //渲染的属性
</li>
</ul> //items 是源数据数组，而 item 则是被迭代的数组元 item可以在后边加.index获取索引值放在key中
vuedata中
数组:[
{},
{}
]

15.模糊筛选框

<body>
<div id="dd">
<input type="text" v-model='a'>
<li v-for="arr in arrs1">
{{ arr.name }}-{{arr.age}}-<input>
</li>
</div>
<script type="text/javascript">
const vm=new Vue({
el:"#dd",
data:{
a:'',
arrs: [
{name:'王一',age:'18'},
{name:'李一',age:'28'},
{name:'王二',age:'08'},
{name:'李二',age:'17'},
],
//筛选后的数组定义
arrs1:[
]
},
watch:{
//简写方式，少初次判断
// a(val) {
// this.arrs1= this.arrs.filter((e)=>{
// return e.name.indexOf(val) !==-1
// })

// }
a:{
immediate:true,
//返回值为在搜索框中输入值
handler(val){
//返回值为新筛选的数组,当name值为-1时字符匹配
this.arrs1= this.arrs.filter((e)=>{
return e.name.indexOf(val) !==-1
})
}
}
}

})
</script>
</body>

16.Vue.set(target,key,val) 添加位置，属性名，属性值
vm.$set(target,key,val) 添加位置，属性名，属性值

可以放在methods中响应式增加页面中的内容，但是不能添加到根vm和data中
如果要更新数组中某元素响应式，也可以用数组方法eg：push等

17.收集表单数据v-model的修饰符

lazy失去焦点后收集
number输入字符后转为有效
trim 输入首尾空格后过滤

18.过滤器filters:{}

也相当于一个函数
<h3>{{time |timeF}}</h3> |+过滤器名，会自动将time(即绑定数据值)传递給该过滤器
vue中
time存放在data中
filters:{
timeF(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
}
})
多个过滤器可以串联

19.内置指令

v-text向其所在节点渲染文本内容，作用插值语法
v-clock 用属性选择器在css中[clock]{}选中可以写网页刷新前的样式常用隐藏
v-once 初次渲染后改为静态 <h1 v-once>{{n}}</h1>一次后无论函数怎么操作{{n}}不变
v-pre 跳过编译不用vue解析

20.自定义指令

//可以是函数形式带有两个参数，当模板被重新解析时触发
//也可以是对象形式，包括多个函数内置和自定义
directives:{
//函数形式
自定义指令名(element //节点，binding //value值){}
//对象形式
对象名:{
//绑定时调用和模板被解析时调用
bind(element,binding){

},
//指令所在元素被插入页面时
inserted(element,binding){

},
//模板被重新解析时调用
update(element,binding){

}
}
}
}
命名时不要用驼峰式大小写不互通
指令中的this是指windon不是vm
console.log('函数名',this)
可以用 Vue.directive(属性名,{内容})把指令定义成全局

21.生命周期

1.mounted(){}//vue完成模板解析生成真实DOM后挂载完毕后调用
一般在此发送网络请求，订阅消息，开启定时器，绑定自定义事件等初始化操作
调用周期函数 this.$destroy()
2.beforeDestroy() {}//销毁程序之前，关闭定时器，订阅解绑自定义事件
该函数和周期之后所有对数据的更新不触发
销毁后事件的失效都是自定义事件，原生的DOM事件不销毁
函数写在beforeDestroy()中调用this.destroy()执行整个，销毁前

22.组件

非单文件组件：一个文件中包括几个组件;单文件组件：一个文件中只包含一个组件

1）.创建组件

const 组件名的key = vue.extend({
//可以在name配置项中命名在开发者工具中(vuetool中)呈现的组件名,可以不写名字呈现的是注册时的
name:'名',
template'结构html'
data(){
return{
组件变量名和赋值
}
}
})

2).注册组件

在vm中加入
//局部注册
components:{
组件名：key
}
//全局组件
Vue.component('组件名',组件名的key)

3).在html直接使用组件<></>

嵌套组件
组件中的this是此组件中的实例对象

2>.单文件组件把非单分层

1.即.vue文件

   有三层架构分别控制组件的结构<template></template>，组件的js交互<script></script>，和组件的样式<style scoped></style>
*//style加scoped属性限制作用域在该组件内避免冲突，app.vue不要用
   <template>
   <div id="b1">
<h1 >{{name}}</h1>
</div>
   </template>

   <script>
   此处非单文件组件用Vue.extent()创建组件可以省略但是在暴露时不省略反而会无反应note
   const 组件名的key = {
//可以在name配置项中命名在开发者工具中(vuetool中)呈现的组件名,可以不写名字呈现的是注册时的
name:'名',
<--!template'结构html'--!>被写在<template></template>中
data(){
return{
组件变量名：赋值，
}
}，
   methods:{
}
//js中的交互需要被暴露，
export default 组件名的key;
   </script>
   <style>
   #b1{}
   </style>

2.所有定义好的单文件组件模块要引入进App.vue组件模块中方便引入和使用

<template>
   *自定义组件不可以作为根元素使用必须外层要有原生元素
   <div>
   <自定义组件></自定义组件>
   <div>
   </template>
   <script>
   //引入定义的组件
   import 组件名 from '相对路径'
   export default{
   name:'App'
   //注册
   component:{
   组件名：组件名的key
   //同名的组件名和key可以简写
   组件名，
   }
   }
   </script>
   <style></style>

3.app.js创建vm注册组件

//引入vue.js文件,和app.vue
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
//创建vue实例
new Vue({
el: '#app',
注册组件，render函数
components: { App },
template: '<App/>'
})

24.render函数

当使用残缺vue时不能解析template模板即main.js中的
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
template不被解析无法读取app中的模板
此时用
render :e=>e(App)引入代替 components: { App },
template: '<App/>'

25.ref属性

相当于原生dom操作用来获取元素
html中为元素添加ref属性
<h1 ref="d1"></h1>
js中可以用this在vm中找到该元素节点
this.$refs.d1
如果给自定义的组件标签设置ref属性，则$refs存储了他的实例对象而原生dom会滑铲到自定义组件的外部原生元素的结构

26.props配置

当自定义组件渲染的内容不能是固定的数据(写在data中)需要添加props配置使vue可以解析外部传递的参数属性
使用props传递的数据不能通过函数修改
自定义组件sc的template结构中
<div>
<h1>{{already}}</h1> //此处的{{}}数据已经定义在该组件的<script>data中
<h1>{{dynamic1}}</h1>//此处的{{}}数据未定义在该组件的<script>data中而保存在props的数组中,其数值是引入的页面在元素标签中传入的
<h1>{{dynamic2}}</h1>//此处同dynamic1
</div>
自定义组件的<script>结构的data函数
data(){
return{
already:'已被定义的' //此处定义了already渲染值
}
},
//三种
props:['dynamic1','dynamic2'] //此处用props数组的形式配置动态的渲染简单接收
如果需要控制该值类型则把props写成对象
props:{'dynamic1':String,'dynamic2':Number} //接收同是对数据进行类型限制
如果还需要限制默认值和必要性
props:{dynamic1:{type:String,required:true},dynamic2:{type:String,default:'默认值'}}
引用该模板的页面html中
<sc :dynamic1='动态内容1',:dynamic2='动态内容2'></sc>
Eg：
组件模板
<template>
<div id="d1">
<span>{{name}}</span>
<span>{{a}}</span>
</div>
</template>
<script>
const sc={
name:'sc',
data(){
return{
name:'我是sc1'
}
},
props:['a'] //简单接收
}
export default sc;
</script>
<style>
</style>
页面中
<sc a="动态的"></sc>
如果一定要修改props中传入的数据可以在data中设置中转变量接收this.props中的变量，在页面中渲染data中的中转变量

27.mixin 混合

新建一个存放混合项的js文件 mixin.js //名字任意
声明一个对象保存需要混合的内容可以是函数可以是data中的数据，需要复用的值并将其暴露
export const mixin1={
mounted() {
console.log('混合中的控制台输出')
},
}
export const mixin2={
data() {
return {
hunhe:'混合数据1' //引入后可以在页面中渲染
}
},
}
组件模板中引入
import {mixin1} from '../mixin.js'
在配置对象中加入暴露的对象
mixins:[mixin1]

28.插件

以对象的形式内置install方法
创建一个文件保存插件 plugins.js写入对象在包含install函数
import Vue from "vue"
export const obj={
install(){
console.log("插件在控制台输出的内容")并暴露
}
}
在main.js文件中引入并在vm创建之前使用
//引入
import {obj} from './plugins.js'
//使用
Vue.use(obj)
axios不同
Vue.prototype.$http = axios;
*插件中可以封装各种函数和配置过滤器，混合属性，全局指令，原型方法
形式为 Vue.其关键字('命名'，函数或对象代码体) 原型方法 Vue.prototype.函数名=function(){}
Eg：
plugins中
import Vue from "vue"

export const obj={
install(vue){
console.log("插件在控制台输出的内容",vue)
//定义一个过滤器 Vue.filter('过滤器名',函数体)
Vue.filter('timeF',function(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
})
//定义一个混入Vue.mixin('混合名'，混合配置对象)
Vue.mixin('minxin1',{
mounted() {
console.log('混合中的控制台输出')
},
data() {
return {
pminxin:'我是插件中的混合数值'
}
},
})
//给vue原型加一个方法使其可以在vcvm上找到
Vue.prototype.mizig=function(){console.log("我是不一样的原型方法呢")}
//全局自定义指令
Vue.directive('fbind',function(el){
console.log(el);
console.log(this)
el.style.color='red';
})
}
}

29. vue文件中style的属性

在style加scoped属性限制作用域在该组件内避免冲突，app.vue不要用
写做<style scoped></style>
lang=""设置编译的语法可以是css默认不写或者是less
写做<style lang="less"></style>可以再其中写less语句需安装less解析器less-loaders
控制台 npm i less-loader@版本号 -S
npm view less-loader versions //查看某包版本 less-loader这里
npm i webpack webpack-cli -g //全局安装webpack
npm i webpack webpack-cli -D //本地安装webpack
npm install webpack --save-dev安装webpack到package.json文件中
30.axios 配置代理服务器解决跨域
安装 npm i axios
在main.js中引入axios并绑定
import axios from 'axios'
Vue.prototype.$http = axios;
在使用axios的vue文件中引入 //aap.vue
import axios from 'axios'
在文件与package.json文件同级目录下新建 vue.config.js文件配置代理端口号为请求的外部服务器端口号
module.exports = {
devServer: {
proxy: 'http://localhost:5000'
}
}
绑定接收请求事件函数在组件vue文件中
<button @click="getImg">axios请求</button>
在组件vue文件中的暴露中配置函数和axios方法此时get的端口号为本地端口号需要加在到文件
methods:{
getImg:function(){
axios.get('http://localhost:8080/students').then(
response=>{
console.log('请求成功',response.data)
},
error=>{
console.log('失败',error.message)
}
)
}
控制多个代理问题与单个配置基本相同更改如下
vue.config.js中其中的'/api':{}内容可以复制并列增加新的代理
module.exports = {
devServer: {
proxy: {
//配置请求头为api的代理端口 api可以更改
'/api': {
target: 'http://localhost:5000',
//axios请求外部服务器时去掉前缀api
pathRewrite:{'^/api':''},
//支持websocket
ws: true,
//代理服务器向外部服务器请求是否请求头中真实的值
changeOrigin: true
},

}
}
}
组件文件中更改加入请求头
methods:{
getImg:function(){
//在端口号上加入请求头
axios.get('http://localhost:8080/api/students').then(
response=>{
console.log('请求成功',response.data)
},
error=>{
console.log('失败',error.message)
}
)
}

31.插槽slot

默认插槽 //所有变化内容在一个结构中
在自定义组件标签中加入<slot></slot>标签占位，中可以设置默认值
在app.vue使用时候
<自定义组件标签>此处写不同的内容结构</自定义组件标签> 其中不同的结构会呈现
具名插槽 //变化内容结构是一个以上的
自定义组件中<slot name=""></slot>
使用的页面父组件中 <div slot=''></div> ''号中填写插槽的name
作用域插槽 //当使用组件的页面结构需要遍历或获取自定义组件中的data return数据时
自定义组件
<slot :games='数据名'></solt>
使用的页面中在自定义的标签元素中添加插槽内容是必须包裹template标签并添加scope属性
<自定义组件名>
<template scope='接收数据名//自定义'>
{{接收数据名.}}
</template>
</自定义组件名>
slot 可以传递多组数据但是都会被接收到同一个 scope中形成数组
<slot :games='数据名' x='数据二'></solt>
此时的渲染层
<自定义组件名>
<template scope='接收数据名//自定义'>
{{接收数据名.games}}
{{接收数据名.x}}
</template>
</自定义组件名>

32.vue-X

集中式管理数据的Vue插件对多个组件通信
安装 npm i vuex
在src中创建store 文件夹中添加index.js文件添加结构并加入
Vue.use(Vuex)
结构如下
//引入
import Vue from'vue'
import Vuex from 'vuex'
//三层操作引入对象
const actions ={

}
const mutations ={

}
const state ={

}
Vue.use(Vuex)
//storenew
const store =new Vuex.Store({
actions,
mutations,
state,
})
//暴露
export default store
在main.js中引入store
import store from './store/index.js' //此代码写在引入vuex的引入之前
在其vue实例对象new vue中加入数据
new Vue({
el:'',
render: h => h(App),
store,
}).$mount('#app')
此时vm和组件实例对象中中的stroe属性方法存在（commit despath)
vuex将所有的组件的数据都放在其中，
其流程为自定义组件把共享数据写在state中并在方法methods或周期中调用dispath api连接actions中的函数
存放所有vuex配置的store 的 index.js中actions中写函数与自定义组件连接并接收mutations中的功效函数
mutations中定义函数完成业务逻辑
值在存在state中
当要在自定义组件中读取值时从已经被添加到vuecompnents中的$store state中收到
自定义组件中绑定函数
<h1>data中定义的值{{n}}</h1>
<button @click="getadd">点击加一<button>
<h1>定义在store中加一之后的值{{sum}}</h1>
methods中定义函数
methods:{
getadd:function(){
//连接store的actions，寻找其中的add函数传递本组件中的data值
//dispatch传递的两个参数一个是要连接的Actions中函数名，一个是本组件中data的数据
this.$store.dispatch('add',this.n)
}
store中的index.js
actions中
const actions ={
add:function(context,value){
//连接mutations中的逻辑函数
context.commit('Add',value)
}
}
mutations中
const mutations ={
Add:function(state,value){
state.sum+=value
}
}
state中
const state ={
sum:0
}
数值首先在mutation中改变传入actions最后传入组件的函数中，actions和mutations中的两个参数一个是方法对象另一个就是dispatch传递过来的值
如果不需要对数据进行dispatch的外部操作（条件判断例如上边的例子）则可以用commit方法直接连接mutations中的函数
methods中定义函数只把dispatch改成commit，其中连接的参数函数名改成mutation中的
methods:{
getadd:function(){
//连接store的actions，寻找其中的add函数传递本组件中的data值
this.$store.commit('Add',this.n)
}
store中的index中不用写actions中内容了其余相同
除了mutations和actions方法store身上还有getters方法可以复用逻辑，渲染层可以通过$store.getters找到,同计算组件多组件通用返回值
//其参数中保存的是state中的数据返回的数据也会放回其中
const getters={
函数(state){
return state.变量名进行运算
}
}
   mapState，mapGetters
   当渲染层有多个数据同组件使用时需要从this.$store.state中获取数据时可以引入mapState，mapGetters(用法同mapState)
   在该组件中引入
   import mapState from 'vuex'
   在该组件的计算属性中加入
   对象写法
   ...mapState({函数名:'this.$store.state/中的数据名',函数名:'this.$store.state/中的数据名'})
   数组写法
       ...mapState(['this.$store.state/中的数据名',''])
       eg：<div>{{this.$store.state.sum}}</div>
       ...mapState(['sum',''])
   mapAtions和mapMutions
   引入 import mapState from 'vuex'
       methods中
       ...mapAtions({渲染层调用的函数名:action中调用的函数名})
       当需要传递该组件中的data中的数据时需要在html绑定函数时传递参数
       eg: eg：<div @click='add(传递的变量)'></div>
       methods:{
       ...mapAtions({add:action中调用的函数名})
       }
多组件共享操作数据notes

33.路由route 此处引入使用router和vuerouter好像不同

key value形式
安装和使用
npm i vue-router -S
main.js中引入
   import VueRouter from 'vue-router'

创建文件夹router添加一个index.js文件
   import VueRouter from "vue-router";
Vue.use(Vverouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../pages/Login/Login.vue'
import Navm from '../pages/Navm/Navm.vue'
Vue.use(VueRouter)
const router =new VueRouter({
routes:[
{
name:'Login',
path:'/Login',
component:Login
},
{
name:'Navm',
path:'/Navm',
component:Navm
},
//重定向即如果随机输入其他未定义的字符会自动跳转该页面
{
path:'*',
name:'any',
redirect:'/Login'
}
]
})
export default router
在main.js中引入
import router from '../router'
在new vue中添加配置项
   router：router
呈现页面效果时把需要跳转的项目<router-lin>to到其相对路径
<router-link slot="title" to="/Home">导航yi</router-link>
需要改变的结构用<router-view></router-view>站位
创建需要路由的两个自定义vue组件并将其引入暴露在app.vue中
当路由被嵌套时在其父组件的路由中添加配置项children:[]其中的子路由path的值不加/
当需要从一个路由直接掉转到另一个路由的子路由时，直接写该子路由的name就好
引入其模板地址
   import Haizi from '../src/components/Haizi'
    import VueRouter from "vue-router";
import Peom from '../src/components/Peom'
import Home from '../src/components/Home'
export default new VueRouter({
routes:[
{
path:"/Peom",
component:Peom,
       children:[
       {
       path:'Haizi',
       component:Haizi,
       }
       ]

},
{
path:"/Home",
component:Home
}
]

子组件的to地址其父组件路径
路由命名可以简化嵌套陆游的to后地址
routes:[
{ name:'poem'
path:"/Peom",
component:Peom
},
{
path:"/Home",
component:Home
}

]
使用时把to前加： to后写成对象形式传递name
:to="{name:'poem'}"

路由传参

query参数直接在roputer-link上传递
   <router-link slot="title" to="/Home?id=1&name=字符串">导航yi</router-link>
在接收的路由中的mounted生命周期中的vc 即 this.$route
   当传递的参数是data中的变量时把在to前加：to后的值改为对象形式在qurey中传递
:to="{
       path:'/Home',
       qurey:{
       id:m.id,
       title :m.name,
       }
       }"
params参数notes
路由中的props
在路由的index.js中配置props
   当其是一个对象时可以传递不变的数据该对象中的所有数据都会以key value的形式传递給该路由
routes:[
{ name:'poem'
path:"/Peom",
component:Peom
       props:{a:1;b:1;}
},
{
path:"/Home",
component:Home
}
]
在路由组件中以
   props的形式接收
   props:['a','b']
   当需要传递参数是变量时即在$stroe的pamas身上时设置props为true则可以直接使用
   routes:[
{ name:'poem'
path:"/Peom",
component:Peom
       props:true
},
{
path:"/Home",
component:Home
}
*props值为函数时其参数是$route可以收到
    routes:[
{ name:'poem'
path:"/Peom",
component:Peom
       props:function($route){
       return{id:$route.query.id}
       }
},
{
path:"/Home",
component:Home
}

路由对历史的影响

两种方式默然开启push可以回退如果1要改成replace需要在标签上添加replace属性
   <router-link replace>
replace切换后不保存当前状态
编程路由 push与replace同理back和forword
在需要进行路由的按钮上绑定一个函数，在methods中定义该函数在$routers上寻找方法
使用this.$router.push()方法把需要跳转的信息进行传递同to中内容
   //该函数中的参数无法使用data和props的所以定义函数时需要传递
       <button @click='jump(m)'></button>
   methods:{
jump:function(m){
   this.$router.push({
       name:'home',
       query:{
       id:m.
       }
       })
   }
}
前进和后退设置按钮可以直接调用同理back和forword不需要传递地址，其余想相同
go方法传入正负数可以选择掉转路由的层数
路由的缓存切出切回可以保留数据
在需要缓存的组件中的<router-view></router-view>外包裹一层
   <keep-alive include='缓存组件名'> //不是路由名多个前面加：写成数组：include='['','']'
   <router-view></router-view>
   </keep-alive>
   但是当该属性被添加时此组件不触发销毁
   路由独有的生命周期
   activated(){},激活
   deactivated(){},失活

路由守卫

达成条件才可以点击组件需要验证
    在router中获取数据
   前置路由守卫：暴露之前调用berforEach设置前置全局路由守卫接收了三个参数to from next
设置判断语句决定是否调用next()
   设置判断是否需要校验信息的路由

   可以在路由的meta中存放字符串布尔值判断是否需要触发守卫检测     在需要被检测的路由后写
   { name:'poem'
path:"/Peom",
component:Peom
       meta:{isAuth:true}
},
   路由守卫中
   router.beforeDestroy((to from next)=>{
   if(to.meta.isAuth){
   if( ){
   next()
   }
   else(){
   next()
   }
   })
   }
   后置路由守卫：只to from两个参数可以用来获取当前路由的title
   在路由中自定义标题
      { name:'poem'
path:"/Peom",
component:Peom
       //meta中可以存放多组数据
       meta:{isAuth:true,title:'添加'}
},
   后置路由守卫
   to.meta中读取自定义数
   router.afterEach((to,from)=>{
decodeURIComponent.title =to.meta.title
})

34.ui模块引入

element ui模块引入//官网可看
全局安装 npm i element-ui -S
按需引入
   npm install babel-plugin-component -D
   npm i @babel/preset-env -D //如果此指令在控制台报查找不到可以直接替换presets中es2015为babel
npm install babel-plugin-component -D
   在config.bebal中新增
module.exports = {
presets: [

"@vue/cli-plugin-babel/preset",
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
在main.js中引入和use所使用的组件
import { Button} from 'element-ui';
Vue.component(Button.name, Button);
import 'element-ui/lib/theme-chalk/index.css';
组件的html结构中使用

贺今宵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

目录1.创建vue实例 2.tip3.指令语法 //可以绑定函数也可以绑定数据4.层级5.数据代理6.事件处理7.事件修饰符8.vue中常用按键别名 1>常见 2>系统修饰键 3>自定义按键绑定名称方法9.计算属性无法通过异步数据同步 1>不使用时同步显示输入框变量拼接显示 2>不放在data中放在computed中函数的this是vm 对属性进行计算不包括变量10 监听 1...
复制链接

扫一扫