vue create()获取ref_Vue双向数据绑定，时间介绍，ref获取dom节点

最新推荐文章于 2022-11-16 16:57:08 发布
最新推荐文章于 2022-11-16 16:57:08 发布
阅读量256 收藏
点赞数
文章标签： vue create()获取ref
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42298760/article/details/113626116
版权

vue 一个MVVM的框架

M model

V view

MVVM:model改变会影响视图view，view视图改变反过来影响model

双向数据绑定必须在表单里面使用

双向数据绑定

logo.png

{{ msg }}

Essential Links

获取表单数据

运行结果展示

de50c443f3807601f55eaa1f9b5f36ad.png 
getMsg(){ alert('vue方法执行')}替换成getMsg(){ alert(this.msg)}

显示效果

8392a329c13e671fbe62722aff90faa5.png

这样可以看出获取model信息，修改信息model也会改变，这就是vue的双向数据绑定

ref获取dom节点

logo.png

{{ msg }}

Essential Links

获取表单数据 修改表单数据
box
获取第二个表单数据

运行结果展示

40c5656099f35822a82de781ef01aadc.png

vue执行方法的两种写法

执行方法的第一种写法 执行方法的第二种写法

vue事件对象

 事件对象

打印结果

b90df5d2f45239c0011c8a4ab22cb0b4.png

可以利用事件对象获取dom节点

e.srcElement // dom节点e.srcElement.style.background = 'red'; // 设置背景颜色console.log(e.srcElement.dataset.aid) //获取自定义属性
RickyHll
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue create()获取ref_vue开发笔记（20200603更新）
weixin_30260057的博客
02-03 748
处理图片加载失败// 这里面src必须保证是个空值要不然不触发 onerrordata() { return { errorImg: 'this.src='//xxxxxxx'' }}// xxxxxx是地址另一种methods: { test(e) { e.target.src = 'xxx' // or this.avatar = 'xxxx' }}获取 url ...
vue create()获取ref_vue-next+typescript 初体验
weixin_42151373的博客
01-26 266
无意间又一次刷到了尤大介绍 Vue 3 的文章，这次决定试一下 Vue 3 的 TypeScript 支持到底如何，不管别人说什么，只有自己用的舒服才是真的舒服。Vue 2 可是因为 ts 的缘故被喷的很惨，来看看 Vue 3 如何吧。 值得注意的是，编写该篇文章时，vue 3 仍处于 beta 阶段，版本号为 beta.14，代码可能有变动，请关注官方和 RFC准备工作注意不要使用 vue-cl...
React - 通过refs/React.createRef()获取DOM元素
dogeliu的博客
07-31 6633
1.通过回调Refs获取dom 需要在想被获取的元素上设置属性ref ref 可以是回调函数 import React from 'react'; export default class RefApp extends React.Component{ constructor(props){ super(props); this.copy= this...
for里面调用方法 vue_Vue视图渲染原理解析，从构建VNode到生成真实节点树
weixin_36444104的博客
12-12 189
前言在 Vue 核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始， Vue 是如何构建 VNode ，又是如何将 VNode 转为真实节点并挂载到页面。挂载组件($mount)Vue 是一个构造函数，通过 new 关键字进行实例化。//src/cor...
vue3 | 在createVNode 或者 h函数中 设置ref
Mrbignose的博客
10-15 3289
在vue3中使用createVNode或者h函数设置ref属性，开发环境下可以正常使用，生产环境中报错
Vue ref获取元素和组件实例
最新发布
ScottePerk的博客
11-16 6674
在写Vue的过程中，我们从来不会写这种代码，但是下面的代码在vue里面是可以运行的。我们很少去获取元素的，因为根本不需要，我们只需要修改数据让vue自动帮我们更新UI就行。el会直接获取顶层元素，如果有多个元素，那么会获取第一个node节点，一般是#text,也就是换行。这是获取到的代理对象，里面有showBanner方法，可以证明，这个就是Banner的代理对象。，根本就不需要先找到具体的元素。获取组件实例后，我们是可以调用组件的方法的，这个还是有点用的。最后，获取到了banner组件的顶层元素。
Vue学习笔记（七）--- ref 引用 和 生命周期相关
weixin_45092437的博客
10-27 1507
ref 可以让开发者在不依赖 jQuery 的前提下，获得页面中 DOM 元素或组件的引用。 vue的生命周期主要分为四大步：创建、挂载、更新、销毁，每一大步又分为两小步。分别有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。...
createVNode - vue3源码解读
SK_study的博客
05-25 4495
theme: fancy 目录: createApp - vue3源码解读 - 掘金 (juejin.cn)) 我们接着上一篇文章来讲，createApp构建之后，我们进行mount挂载，在其中执行了两个重要的操作，第一是createVNode，第二是render，今天我们来学习下createVNode中究竟发生了什么。 一.执行createVNode 此方法在mount中调用，其中传入两个参数，一个是rootComponent，也就是我们的根组件App.vue，另一个是rootProps根参数，初始.
vue created中如何获取到dom元素（nextTick和settime）
m0_47564725的博客
03-08 4460
正常操作咱们一般是在mouted里面操作dom，但是有些特殊的地方会用到。所以分享给需要的朋友； 废话不说，下图 此时是无法操作dom的，但我们已经拿到数据了。同时控制台会报错，因为我们在created阶段是获取不到dom的。 如下就可以进行操作 有关nexttick后续会再说，有兴趣的朋友可以查看官方文档 ...
获取DOM对象的五种方式
微风的博客
08-15 2629
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
Vue3——04通过ref操作Dom元素，hooks的使用方法
NanChen的博客
03-03 3077
ref获取DOM元素 <div ref="divBox">Hello</div> import {ref,onMounted} from 'vue' setup() { const divBox = ref(null); onMounted(()=>{ console.log(divBox.value); }) return{divBox} } 父组件监听子组件中的元素 在父组件中的子组件里会打印.
vue created钩子函数不能获取到dom元素
web_zq的博客
08-21 5696
vue created钩子函数不能获取到dom元素 可以在mounted里面进行获取dom元素的操作
为什么VUE的created钩子函数能直接获取到dom?
jinzai9976的博客
01-26 3316
为什么VUE的created钩子函数能直接获取到dom? 为什么VUE的created钩子函数能直接获取到dom? 按照之前的概念，在created钩子函数里面是不能对dom进行操作的，因为在created的是时候还没有进行dom的渲染，但是今天在操作的时候发现居然可以直接获取到dom，所以希望哪位大佬能帮忙解释一下为什么能？跪谢~ 代码部分 控制输出 ...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
"✧treasure mountain✧"
04-22 1万+
一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 <div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="mytitle">This is title</h3&g...
vue获取dom元素的内容
热门推荐
Gcalolin的博客
08-25 2万+
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组比如我现在要实现的效果是点击用v-for生成的li ，获取到
Vue中ref和$refs的介绍和使用方法示例
qq_26780317的博客
06-15 8836
前言：在JavaScript中需要通过document.querySelector('#demo')来获取dom节点，然后，再获取这个节点的值。在vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 一、介绍 ref有三种用法： ①ref加在普通的元素上，用this.ref.name获取到的是dom元素； ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组...
vue 在 created 中获取不到ref（this.$refs）
qq_17627195的博客
11-24 4418
原因： ref在dom树渲染完成以后才会生成，而created()是挂载的过程，dom树还没渲染完成，所以找不到ref返回undefind。 解决方法： 在created()中加入this.$nextTick(()=>{})，在此方法里面调用ref，this.$nextTick(()=>{})会在渲染完成后执行，可以用于解决渲染异步问题。 ...
03 Vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
weixin_42467515的博客
07-04 299
Vue 双向数据绑定、事件介绍 、以及ref获取dom节点Vue 双向数据绑定(model、view)Vue 事件介绍（v-on:click 或 @click）Vue ref-获取dom节点实例一实例二完整代码如下： Vue 双向数据绑定(model、view) template模板： <template> <div id="app"> <input type=...
vue的动态绑定ref获取子组件的数据
qq_41660057的博客
05-21 2314
vue的动态绑定ref获取子组件的数据 看了很多博客，尝试了很久，发现有很多问题，特此来记录一下。 父组件 <el-form-item style="font-weight: bold" v-for="questionID in questionNum" :label="'问题'+questionID" > <Question :ref="'
vue里面ref和生命周期的理解
curry_zhao的博客
10-19 6197
1. ref vue里面增加一个DOM节点的写法。这是比较通俗的说法，vue里面讲的是ref是给元素或者子组件注册引用信息的，值得注意的是引用信息注册在父组件的$refs对象上。如果在普通的DOM元素使用，引用指向DOM；子组件指向组件实例。 注册后，vue会进行销毁。但如果不使用就不要注册了。 ref的源码如下： import { remove } from 'shared/util
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值