Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性

Vue高级特性

一、自定义v-model实现Vue的双向数据绑定

父组件中

<p>{{name}}</p>
<custormModel v-model="name" />
data() {
     return {
          // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定
          name: ‘颜色‘
     }
},
components: {
     custormModel
}

组件custormModel

<input type="text"
            :value="strName"
            @input="$emit(‘change‘, $event.target.value)"
>

1、上边的 input 使用了 :value 而不是 v-model
2、上边的 change 要和 model.event 对应起来
3、:value 要和 model.prop 对应起来

export default {
    model: {
        prop: ‘strName‘,  // 对应 props strName
        event: ‘change‘
    },
    props: {
        strName: String,
        default(){
            return ‘‘
        }
    },
    data() {
        return {}
    }
}

二、$nextTick  refs

  1、Vue是异步渲染
  2、data改变之后,DOM不会立刻渲染;(这就是异步渲染的概念)
  3、$nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点
(也就是说,data改变之后你想操作DOM这个时候,有可能是拿不到DOM的,因为2,所以就要用 $nextTick)

vue 中获取DOM元素
<div refs="ul1"></div>
methods: {
            add(){
                // 获取 DOM 原色
                const ulElem = this.$refs.ul1;
                this.$nextTick( () => {
                    // 数据改变之后 待新DOM渲染完成之后的回调
                })
            }
        }

原文地址:https://www.cnblogs.com/haonanZhang/p/12557908.html

时间: 2024-10-27 17:04:00

Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性的相关文章

vue的双向数据绑定

这篇文章我会仿照vue写一个双向绑定的实例,主要实v-model  ,  v-bind  ,  v-click 1.原理 Vue的双向数据绑定的原理大家可能或多或少了解一点,主要是通过 Object 对象的 defineProperty 属性,重写data的 set 和 get 函数来实现的. 2.页面结构 包含了 一个input,使用v-model指令 一个button,使用v-click指令 一个h3,使用v-bind指令. 我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们

vue自定义指令(Directive中的clickoutside.js)的理解

.array p { counter-increment: longen; margin-left: 10px } .array p::before { content: counter(longen) "." } .alink { font-size: 16px; color: blue } 阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DO

Vue 自定义图片懒加载指令v-lazyload

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

双向数据绑定与单向数据绑定

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定.为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下. 一.各自优势 双向数据绑定给人的最大的优越感就是方便.当数据data发生变化时,页面自动发生更新.但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道是谁变了,变化后也不会通知你,当然你可以watch来监听data的变化,但是这变复杂了,还不如单向数据绑定. 所以说按照方神的说法:Vu

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

vue 自定义封装组件 使用 model 选项

自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同的目的.model 选项可以用来避免这样的冲突: Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input

[转] vue自定义组件中的v-model简单解释

在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件的封装效果更好.所以,个人认为,我们自己封装组件也应该有这样的思维,父组件通过slot或者props传值,由子组件完成一些效果,再抛出必要的事件让父组件接受,这样组件的可复用性就很强,有利于多次使用. v-model指令是什么? 刚刚提到,iview通过v-model双向绑定数据,所以首先我们要明白

vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法 目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元