前言
一、Vue高级有什么作用?
Vue为我们提供了很多高级特性,学习和掌握它们有助于提高代码水平。
二、高级方法
1.v-model
一个组件上的 v-model默认会利用名为 value的 prop 和名为 input的事件,来双向绑定。当然名称也可以自定义,代码如下:
//第一种方法如下
<SteperView :value='w' @input="w=$event"></SteperView>
// 简写成如下:
<SteperView v-model="w"></SteperView>
data(){
return{
count:this.value
}
},
props:{
value:{type:Number,default:1}
},
watch:{
// 当count发生改变的时候,发送一个input事件 值为this.count
"count":{
handler(){
this.$emit("input",this.count)
}
},
"value":{
handler(){
this.count = this.value
}
}
}
<hr>
//第二种方法如下:
<steper-view2 :num="w" @change="w=$event"></steper-view2>
<steper-view2 v-model="w"></steper-view2>
// 第二种简写要注意
model:{
prop:"num",//不是props
event:"change"
},
data(){
return{
count:this.num
}
},
props:{
num:{type:Number,default:1}
},
watch:{
// 当count发生改变的时候,发送一个input事件 值为this.count
"count":{
handler(){
this.$emit("change",this.count)
},
deep:true
},
"num":{
handler(){
this.count = this.num
}
}
}
2.混合
- 在每个组件创建完毕以后,输出当前的时间
代码如下:
// 需要在main.js中写入
Vue.mixin({
data(){
return{
mynum:15,
}
},
created() {
console.log(this._uid,Date.now(),this)
}
})
3.bus传参
- 利用vue空实例实现跨页面传参方式
代码如下:
// vue文件
<template>
<div id="app">
<nav :style="{'backgroundColor':bg}">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
// 新建一个js文件
// 导入vue
import Vue from 'vue'
// 创建vue的实例,
var bus = new Vue();
// 在导出实例
export default bus;
// 在app.vue
<button @click="setColor('red')">红</button>
<button @click="setColor('green')">绿</button>
<button @click="setColor('blue')">蓝</button>
import bus from '@/utils/bus.js'
export default{
data(){
return{
bg:'orange'
}
},
created() {
// 监听colorchane时间,动态改变bg
bus.$on("colorchange",$event=>{
this.bg = $event
})
console.log(this.$children)
}
}
//有bus.$on("colorchange",e=>{})
// bus.$emit("colorchange","red")
//bus.$off("移除监听")
4.跨组件传参
跨组件传参有一下几种方式
- bus传参
- $parent父组件
- $root根组件
- $refs.myref dom引用
- vuex
- cookie/localStorage/sessionStorage
5.nextTicker
数据更新,等待dom更新完执行回调函数
参考代码如下:
// html代码
<h1 id="myh">{{msg1}}</h1>
<h2>{{msg2}}</h2>
//js代码
data() {
return {
// num:1
msg1: "我爱我的祖国",
msg2: '祖国统一',
}
},
methods: {
getNew() {
this.msg1 = "收咯!"
// 数据更新 ,等待dom也更新执行this.$nextTick的回调函数
this.$nextTick(() => {
this.msg2 = document.getElementById("myh").innerText
})
},
}
5.set
强制更新视图
参考代码如下:
// html代码
<ul style="text-align: left;">
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
//js代码
data() {
return {
list:["天","天","向","上"]
}
},
methods: {
changeIt(){
// 强制更新
this.$set(this.list,3,"下")
console.log(this.list)
// vue双向绑定原理,数据更新,试图更新,试图更新,数据更新
// 数据与视图桥梁是:所有的指令
// 原理:通过object.definePropery劫持对象的getter获取,setter设置
// 使用数组的更新,重写了数组的方法原型来实现.push pop split
}
}
总结
以上是vue高级的一些方法及参考代码,vue还有很多高级方法.下次更新!!!