实例

VUE2
- 数据data
- 父子传值props
- 获取元素refs
- 获取元素属性el
- 实例属性options
- 父实例parent
- 根实例root
- 插槽slots
- 爷孙传值attrs
重点★★★property
- 自定义实例
- 自定义实例方法
- 使用场景
- - 全局引入js文件的某个方法
  - 全局引入整个js文件
实例方法
- 监听$watch
- - deep
  - 取消监听
  - immediate
- emit
- forceUpdate
- $nextTick
VUE3新特性

VUE中也有很多实例，我们来讲一讲这些实例

VUE2

数据data

我们在组件中会定义数据

data() {return {text: "I,dog",show: true,post: { name: "代码哈士奇", id: 741741741 },datas:[{ name: "代码哈士奇", id: 1 },{ name: "哈哈", id: 2 }],lookData: ""};},

一般我们读取的时候直接this,text就能得到"I,dog"
其实还可以这样写

this.$data.text

效果一样

其实data是通过property引入的

在本文会详细讲下

父子传值props

我们之前用插槽得时候讲过它
传送门：组件
同data一样，按照文档的话

组件实例代理了对其 props 对象 property 的访问

调用
比如

props: ["mdshowd"],console.log(this.$props.mdshowd)或者 console.log(this.mdshowd)

一般使用this.mdshowd

获取元素refs

获取有ref属性的元素或者组件
用法如下

注：model是我们自己定义的组件，详细可看上一篇文章插槽

 <model :mdshowd="show" @close="show = true" ref="modelOne"></model>

调用方法

this.$refs.modelOne

打印下看看

console.log(this.$refs.modelOne)

使用场景
获取文件或者元素/组件属性

获取元素属性el

是ref获取的其中一个属性

可以理解为
document.getElementById()获取的内容

<model :mdshowd="show" @close="show = true" ref="modelOne" >
</model>console.log(this.$refs.modelOne.$el)console.log(this.$refs.modelOne)console.log(document.getElementById("one"))

这里可以看出和document.getElementById()作用相同

实例属性options

读取实例的属性
data中会写一些数据
但是data外的比如我们给当前页面加一个属性

data() {return {text: "I,dog"};},
dmhsq: "dog"//这里没有写在data里面

那么要如何读取呢

this.$options.dmhsq

如果我们直接打印呢

console.log(this.$options)

看到dmhsq了吧其实是我啦
这里打印了本实例的所有属性
当然我们还看到了parent属性就是父亲的意思
接着看⬇

父实例parent

获取父实例
比如我在test实例中使用了model，那么test就是model的父实例
而test的父实例就是我们挂载的app $mount("#app");

前提是得有

this.$parent

我们打印它

console.log(this.$parent)

展开后
我们发现其实和options里面的parent一模一样其实parent也是实例的一个属性

根实例root

读取根实例，如果没用父实例，就返回自己

this.$root

比如我在test实例中使用了model，那么test就是model的父实例，app就是根实例
我们在model中打印

console.log(this.$root)

发现el中是id=app的实例就是根实例
我们也可以在它的孩子的孩子里面找到我们的model

插槽slots

访问插槽内容

this.$slots

我们使用model做插槽

父实例中如下调用

<template><div><div v-for="item in datas" :key="item.id"><div>{{item.name}}==={{item.id}}</div><button @click="look(item)">查看</button></div><model :mdshowd="show" @close="show = true" ref="modelOne" id="one"><template slot="title">{{lookData.name}}</template><template slot="message">我叫{{lookData.name}},我的代号是{{lookData.id}}</template><template slot="btnGroup"><button @click="closeLook">关闭</button></template></model></div>
</template>

我们的插槽分发了内容
因为lookData是[{ name: “代码哈士奇”, id: 1 },{ name: “哈哈”, id: 2 }]中的其中一个详细可以看上篇
我们在插槽中打印

console.log(this.$slots)

可以看到，两次的内容不一样
而这些内容的获取就是通过 this.$slots

爷孙传值attrs

获取父组件中的非props内容

$attrs

如果在子实例中调用打印

console.log(this.$attrs)

可以看到如下

我们来个隔代传值
爷爷组件为test
父组件为model
孩子为easy-model
easy-model代码如下

<template><div><button @click="onDo">点击</button></div>
</template><script>
export default {name: "EasyModel",methods:{onDo(){console.log(this.$attrs)}}
};
</script>

在model中引入传递$attrs其实就是将父亲给孩子就是爷爷给孙子
就是model将tes的t给easy-model

 <easy-model v-bind="$attrs"></easy-model>

test中

 <model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" ></model>

然后我们看看打印结果

完成隔代遗传

重点★★★property

我们先来看看vue的代码
在ode_modules\vue\types\options.d.ts中定义了包括声明周期的引用在这里插入图片描述
当然深入挖掘我没用那个能力和时间
我们发现vue.d.ts中发现

我们在控制台打印下property

发现了什么吗，常用的实例都在这里，我们引用创建页面的时候都已经挂载了

自定义实例

在main.js中

Vue.prototype.dmhsq = "I,dog"

在我们的组件中

  console.log(this.dmhsq)

使用场景
可以定义一些全局的变量去使用

自定义实例方法

在main.js中

function myTest(){console.log("我是可爱的狗子")
}Vue.prototype.myTest = myTest;**加粗样式**

在任意页面调用

使用场景

全局引入js文件的某个方法

在自己创建的js中比如util.js中写入

function myTest(){console.log("我是可爱的狗子")
}export  {myTest}

在main.js中

import {myTest} from "./util/util";Vue.prototype.myTest = myTest;

全局引入整个js文件

这样写util.js

export default {myTest(){console.log("嘿,I,dog");}
}

在main.js中

import util from "./util/util";Vue.prototype.util = util;

在实例中

this.util.myTest()

实例方法

监听$watch

监听变化可以是表达式也可以是单个值也可以是property

<input v-model="testData" />

 this.$watch(()=>this.testData,()=>{console.log(this.testData)})

我们还可以监听子组件的变化比如我们监听model的props: [“mdshowd”]

 this.$watch(()=>this.mdshowd, () => {console.log(this.mdshowd);})

监听对象或者数组内部变化不会触发
我们点击改变post.name的值但是post没用被监听到改变

如果要监听内部变化就要deep

deep

将post的值传递给model子实例

<model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" :d-list=post >
</model>

在子实例中监听变化

this.$watch(() => this.dList,() => {console.log("dog wang wang!");},{ deep: true });}

效果如下

取消监听

如下

 const haha = this.$watch(() => this.dList,() => {console.log("dog wang wang!");},{ deep: true });haha();//在你需要监听的地方掉用，就只会监听一次console.log(haha())}

immediate

同deep开启方法相同，加入可立即返回回调函数执行结果

加入 immediate会让取消监听失效
调用haha监听
如果我们在haha内部调用haha

const haha = this.$watch(() => this.dList,() => {haha();console.log("dog wang wang!");},{ deep: true,immediate:true});haha();

就会报错

文档给出方案是检测函数可用性

let haha = nullhaha = this.$watch(() => this.dList,() => {if (haha){haha();}console.log("dog wang wang!");},{ deep: true,immediate:true});

emit

触发当前实例上的事件，常用于子组件监听父组件的事件或自定义事件

在子组件中

 this.$emit("close");

父组件中

<model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" :d-list=post >
</model>

相当于调用了自定义事件

forceUpdate

this.$forceUpdate();

强制重新渲染，只影响本身和插槽
触发update

 shuaxin() {this.$forceUpdate();},updated() {console.log("我更新了哈哈")},

如果请求获得的数据没有及时渲染，就要调用它去
如果我们从后台获取了数据需要v-for里面套v-if
当item数据改变时不能及时触发v-if需要用到
forceUpdate

$nextTick

数据没有及时更新时使用
比如

 <button @click="shuaxin">shuaxin</button>shuaxin() {this.testData = 2;console.log(this.$refs.pp.innerText);this.$nextTick(()=>{console.log(this.$refs.pp.innerText);})},

用在一些数据请求后，不能立马得到新数据，比如请求后台得到新数据，不能及时拿到新的去做一些处理，就要调用它

VUE3新特性

设置全局属性的时候
不再使用Vue.property.
app.config.globalProperties.

记得练习哦

大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

后续会推出

前端：vue入门 vue开发小程序等
后端： java入门 springboot入门等
服务器：mysql入门服务器简单指令云服务器运行项目
python：推荐不温卜火一定要看哦
一些插件的使用等

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

有问题可以下方留言，看到了会回复哦

VUE2快速入门(六)---实例property(重点)相关推荐

05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
RabbitMQ快速入门及实例演示
RabbitMQ 先做起来,再去想其他. 1.MQ 消息队列概念 MQ(message queue)消息队列,FIFO先入先出.对服务器的请求先加入到消息队列中,再由消息队列来进行请求的分发. 还是一 ...
MyBatis：快速入门代码实例（maven代码版）
文章目录 1. MyBatis实例 1.1 添加Mybatis依赖 1.2 创建MyBatis配置文件 1.3.创建po类 1.4.创建映射文件 #{}: 表示sql参数,一个占位符. 1.5.测试 ...
createjs php通信,快速入门createjs实例教程
开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看. createjs简介官网:http://www.createjs.cc/ createjs中包含以 ...
micropython stm32f030_STM32F0单片机快速入门六用库操作串口(UART)原来如此简单
1.从 GPIO 到 UART 前面几节我们讲了MCU如何启动,如何用翻转IO引脚,以及用按键去触发中断.接下来我们介绍的也是最常用的一个模块,串口(UART). 串口可以说是最古老,而且生命力最强的 ...
达达php源码,【达达前端】Ajax实战项目源码讲解（快速入门的实例）Github源码...
作者 | Jeskson 来源 | 达达前端小酒馆源码地址: 什么是Ajax技术?实战中的运用ajax技术,了解前后端交互的方式,了解移动端的模式,了解H5的新技术,了解CSS3的使用,和JQuer ...
VPLC系列机器视觉运动控制一体机快速入门（六）
于形状匹配的视觉定位.BLOB有无检测以及测量尺寸. 本期课程,正运动技术和大家一起分享和标定有关的详细知识内容. 视频教程:<VPLC系列机器视觉运动控制一体机快速入门(六)> 机器视觉 ...
IM开发快速入门(一)：什么是IM系统？
本文在编写时参考了博客作者"鹿呦呦"和在线课程"即时消息技术剖析与实战"的相关资料,一并表示感谢. 1.系列文章引言 IM系统看似简单(没错,很多土老板认为开发 ...
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
【vue2.0进阶】vue-router10分钟快速入门
又一周过去了,时间过得很快,更新不能落下,继续我们的vue2.0进阶教程.今天前端君来跟大家一起快速入门vue-router. 学一个新东西之前,我们一定先要学会问:它有什么作用,为什么要学它? 对于 ...

VUE2快速入门(六)---实例property(重点)

实例

VUE2

数据data

父子传值props

获取元素refs

获取元素属性el

实例属性options

父实例parent

根实例root

插槽slots

爷孙传值attrs

重点★★★property

自定义实例

自定义实例方法

使用场景

全局引入js文件的某个方法

全局引入整个js文件

实例方法

监听$watch

deep

取消监听

immediate

emit

forceUpdate

$nextTick

VUE3新特性

VUE2快速入门(六)---实例property(重点)相关推荐

最新文章

热门文章