一、为什么要学习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",//不是propsevent:"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、bus传参

利用vue空实例实现跨页面传参方式

3、nextTick

数据更新,等待dom更执行回调函数,可以看成高级setTimeout

4、跨组件传参的常用方法

1、bus传参
2、$parent 父组件
3、$root 根组件
4、$refs.myref dom引用
5、vuex
6、cookie/localStorage/sessionStorage

5.混合

可添加各个组件的共同方法,在每个组件创建完毕以后,输出当前的时间
代码如下:

// 需要在main.js中写入
Vue.mixin({data(){return{mynum:15,}},created() {console.log(this._uid,Date.now(),this)}
})

6、set

可以强制更新,当数据更新时,dom视图还没来得及更新,或因为种种原因没能共同更新. 这时就可以使用set强制更新,完成
您的期望效果


<ul style="text-align: left;"><li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>data() {return {list:["天","天","向","上"]}},methods: {changeIt(){//set 强制更新this.$set(this.list,3,"下")console.log(this.list)}

三、总结。

本次推送知识点共6个，仅属于个人观点，学习路长，望各位坚持下去。找寻属于自己的颜如玉。

biu Vue2高级知识点相关推荐

原生遍历_细品原生JS从初级到高级知识点汇总（三）
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
个人总结------高级知识点必会
高级知识点之必会共44题 1.OC中创建线程的方法是什么?假设指定在主线程中执行代码?怎样延时执行代码.[难度系数★★] 1)创建线程的方法 NSThread NSOperationQueue和NS ...
mysql 高级知识点_这是我见过最全的《MySQL笔记》，涵盖MySQL所有高级知识点！...
作为运维和编程人员,对MySQL一定不会陌生,尤其是互联网行业,对MySQL的使用是比较多的.MySQL 作为主流的数据库,是各大厂面试官百问不厌的知识点,但是需要了解到什么程度呢?仅仅停留在建库. ...
「万字总结」熬夜总结50个JS的高级知识点，全都会你就是神
前言大家好,我是林三心,基础是进阶的前提,上一篇,我给大家分享了我这一年来平时记录的工作中碰到的50个JS基础知识点,今天就给大家分享一下,我这一年来,工作中遇到的50个JS高级知识点吧!!! 知识 ...
带你全面掌握高级知识点！深入理解java虚拟机pdf下载
一般来说,零基础从入门到就业,所学学习内容如下,今天划重点的内容是第一个文件夹:001基础(se) 二.其中第一个文件夹,001基础(se)作为整个java的语法思想等基础,下面我来进行划分下内容重点 ...
Unity高级知识点总结：性能优化与图形渲染进阶！
A.性能优化相关知识一.综合优化 1.降低屏幕分辨率尤其是在android平台对性能提升很大.可以有效缓解gpu的压力. 我们在android上分辨率是实际的0.85左右. 2.做好资源异步加载,实 ...
带你全面掌握高级知识点！一个本科渣渣是怎么逆袭从咸鱼到Offer收割机的？年薪50W
开头在大厂,写得一手好文档是一个非常吃香的技能.这可不只是一个锦上添花的东西,而是很多工程师晋升,打造自己话语权的武器. 我这两年在组内的深刻体会就是,大部分厉害的高级工程师(不包括那些纯混日子靠资 ...
SpringBoot之配置文件，带你全面掌握高级知识点
pets:‐ cat‐ dog‐ pig 而第二种写法则是yaml对于这类数组类型的优化写法,支持将值写入一行,代表一个数组的值,使用[]进行包裹,如下: pets: [cat,dog,pig] 自动 ...
Python高级知识点汇总第一部
Linux常见命令 ls:查看当前路径下的所有文件及文件名; clear:清空操作; cd 跳转操作,可以跳转到任意路径位置; cd-:跳转到上次所在的路径; cd~:快速切换到当前用户的主目录(快速 ...

biu Vue2高级知识点

一、为什么要学习Vue高级？

二、高级方法都有哪些?

1.v-model

2、bus传参

3、nextTick

4、跨组件传参的常用方法

5.混合

6、set

三、总结。

本次推送知识点共6个，仅属于个人观点，学习路长，望各位坚持下去。找寻属于自己的颜如玉。

biu Vue2高级知识点相关推荐

最新文章

热门文章

biu Vue2高级知识点

一、为什么要学习Vue高级？

二、高级方法都有哪些?

1.v-model

2、bus传参

3、nextTick

4、跨组件传参的常用方法

5.混合

6、set

三、 总结。

本次推送知识点共6个，仅属于个人观点，学习路长，望各位坚持下去。找寻属于自己的颜如玉。

biu Vue2高级知识点相关推荐

最新文章

热门文章

三、总结。