精华内容
下载资源
问答
  • v-model在一个组件中只能用一次,即只能定义监听一个变量和事件 一下是一个tab切换组件 父组件 <tab v-model="active" @change="change" :list="list"/> 子组件 &...

    https://cn.vuejs.org/v2/guide/components-custom-events.html

    v-model在一个组件中只能用一次,即只能定义监听一个变量和事件

    一下是一个tab切换组件

    父组件
    <tab v-model="active" @change="change" :list="list"/>

    子组件

    <!--

    运用v-model

    change:事件

    active: 选中状态

    list:数据

    -->

    <template>

    <ul class="mw hcc f28 pc bcf h90">

    <li class="hcc f1" @click="$emit('change',item.id)" v-for="item in list" :key="item">

    <span class="h90 lh90" :class="active==item.id?'ab tc':'abf'">{{item.title}}</span>

    </li>

    </ul>

    </template>

     

    <script>

     

    export default {

    props: {

    active: Number,

    list:Array

    },

    model: {

    prop: "active",

    event: "change"

    },

    };

    </script>



     

    展开全文
  • 一、Vue中v-model和v-bind:value的区别 1. v-model //html <div> <input type="text" v-model="message" /> <div>{{message}}</div> </div> //js export default { data(){ ...

    以下都以input为例:

    一、Vue中v-model和v-bind:value的区别

    1. v-model

    //html
    <div>
       <input type="text" v-model="message" />
       <div>{{message}}</div>
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
    }
    

    当修改输入框中的数据时,data中的message也会跟着变化,所以上下都是显示的"123456" 

    2. v-bind:value

    //html
    <div>
       <input type="text" v-bind:value="message" />
       <div>{{message}}</div>
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
    }

     

    可以看到当修改输入框中的值时,data中的message并没有跟着改变,所以{{message}} 中仍然显示的是初始时候的“123”

    小结:

    (1)v-model实现了视图和data中数据的双向绑定,二者有一个改变,另一个也会随之改变。

    (2)v-bind:value 只是在初始化的时候把data中的数据绑定到input上,修改input的值不会改变data中的数据。

     

    二、手动实现v-model  (v-bind:value+事件)

    注意:input的change和input事件都可以实现,区别是input是实时触发而change是失去焦点或者按回车时才会触发。

    (实际上,在默认情况下,v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步)

    因为我们想要实时改变的效果,所以这里我们选择监听input事件

    //html
    <div>
         <input type="text" @input="handleInput" :value="message" />
         <div>{{message}}</div>
         
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
      methods:{
        handleInput(e){
          this.message = e.target.value;
        }
      }
    }
    

    或者直接简写:

    <input type="text" @input="message=$event.target.value" :value="message" />

    v-model原理:

    v-model 其实是一个语法糖,它的背后本质上是包含两个操作

    • v-bind绑定一个value属性
    • v-on指令给当前元素绑定input事件

     

     

    展开全文
  • v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点) <input v-model="something"> 其实和下面一样的 <input :value=...

    v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)

    <input v-model="something">
    

    其实和下面一样的

    <input :value="something"  @input="something = $event.target.value">
    

    因此,对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传入新值

    自定义myInput组件

    <template>
      <div style="padding-top: 100px;">
        <button @click="minu"  class="btn">-</button>
            <input type="text" :value="currentValue" @input="handleInput" />
        <button @click="plus" class="btn">+</button>
      </div>
    </template>
    <script>
    export default {
      props:['value'],
        data () {
        return {}
      },
      computed:{
      	currentValue:function(){
      		return this.value
      	}
      },
      methods:{
      	handleInput:function(event){
          	this.$emit('input', event.target.value); //触发 input 事件,并传入新值
      	},
      	minu:function(){
      		this.$emit('input', this.currentValue - 1 );
      	},
      	plus:function(){
      		this.$emit('input',  this.currentValue + 1 );
      	},
      }
    }
    </script>
    <style type="text/css">
    	.btn{
    		width: 60px;
    	}
    </style>
    

    在页面使用

    <template>
      <div class="hello">
      	<myInput v-model='name'></myInput>
      	{{name}}
      	<myInput v-model='othername'></myInput>
      	{{othername}}
      </div>
    </template>
    <script>
    import myInput from "@/components/myInput";
    export default {
      name: 'HelloWorld',
      data () {
        return {
         name:10,
         othername:6,
        }
      },
      components: {
       myInput
      }, 
     
      methods:{
      }
    }
    </script>
    <style scoped>
    
    </style>
    

    效果
    在这里插入图片描述
    总结:
    自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以),然后给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入

    v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
    text 和 textarea 元素使用 value 属性和 input 事件;
    checkbox 和 radio 使用 checked 属性和 change 事件;
    select 字段将 value 作为 prop 并将 change 作为事件。

    展开全文
  • 1.v-model可以看成是value+input方法的语法糖。 2.组件的v-model就是value+input方法的语法糖。 3.可以绑定v-model的有:input,checkbox,select,textarea,radio 二、源码 1.组件的 v-model源码 组件的 v-...

    一、概念

    1.v-model可以看成是value+input方法的语法糖。

    2.组件的v-model就是value+input方法的语法糖。

    3.可以绑定v-model的有:input,checkbox,select,textarea,radio 

    二、源码

    1.组件的 v-model源码

    组件的 v-model 是默认转化成value+input

    总结:

          在组件初始化的时候,回去判断当前数据中有没有model属性,如果有就会使用transformModel方法进行model的转换,transformModel会对数据的model属性进行判断,如果没有prop属性默认就是value,如果没有event属性就是input,然后将值赋给value,给on绑定input的事件,对于的就是callback。

           自定义model时,只需要在组件中传入model的prop和event属性。

    const VueTemplateCompiler = require('vue-template-compiler');
    const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></elcheckbox>');
    // 解析后
    with(this) {
        return _c('el-checkbox', {
            model: { // v-model解析后
                value: (check), 
                callback: function ($$v) {
                    check = $$v
                }, 
                expression: "check"
            }
        })
    }

     (1)组件初始化时,会判断是否有model属性。(src/core/vdom/create-component.js)

               在createComponent方法中

    // 如果当前数据有model属性,就会使用transformModel转换model
    if (isDef(data.model)) {
       transformModel(Ctor.options, data)
    }

    (2)transformModel 方法用来转换model(src/core/vdom/create-component.js)

    function transformModel (options, data: any) {
      // 如果没有prop属性默认就是value
      const prop = (options.model && options.model.prop) || 'value'
      // 如果没有event属性,默认就是input
      const event = (options.model && options.model.event) || 'input'
      ;(data.attrs || (data.attrs = {}))[prop] = data.model.value// data.attrs.value="xxx"
      const on = data.on || (data.on = {})
      const existing = on[event] // 给on绑定input的事件,对应的函数就是callback
      const callback = data.model.callback
      if (isDef(existing)) {
        if (
          Array.isArray(existing)
            ? existing.indexOf(callback) === -1
            : existing !== callback
        ) {
          on[event] = [callback].concat(existing)
        }
      } else {
        on[event] = callback // 
      }
    }

    (3)自定义v-model

    Vue.component('el-checkbox', {
        template:`<input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)">`, 
        model:{
            prop:'check', // 更改默认的value的名字
            event:'change' // 更改默认的方法名
        },
        props: {
            check: Boolean
        }
    })
     

    2.原生的 v-model

    原生的 v-model ,会根据标签的不同生成不同的事件和属性

    总结:

           如果是普通标签,它一看是input就会直接绑成domProps,值是value,把on绑定input,在除了valueinput外还会加上一个指令directives,如果input上面写上type是checkbox时,这时候domProps就会变成checked,on的事件就会变成change,它在编译的时候会根据type生成不同的事件和属性。

          在编译的时候,如果有v-model,就会执行这个指令,找对指令下对应的model,就会对他进行判断,根据不同的类型生成不同的内容:

        组件---------->genComponentModel方法

        select-------->genSelect方法------------------>添加value属性,change事件

        checkbox--->genCheckboxModel方法----->添加checked属性,change事件

        radio--------->genRadioModel方法----------->添加checked属性,change事件

        textarea ---->genDefaultModel方法--------->添加value属性,input事件

        input--------->genDefaultModel方法--------->添加value属性,input或change事件,如果lazy是ture就是change

         在编译后多出一个directives指令是,是在运行时,在inserted方法中会对元素处理一些关于输入法的问题,对它增加了compositionstart,compositionend,change三个事件

    compositionstart:当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。

    compositionend:将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

    <input v-model="sth" />
    //  等同于
    <input :value="sth" @input="sth = $event.target.value" />
    const VueTemplateCompiler = require('vue-template-compiler');
    const ele = VueTemplateCompiler.compile('<input v-model="value"/>');
    
    with(this) {
        return _c('input', {
            directives: [{
                name: "model",
                rawName: "v-model",
                value: (value),
                expression: "value"
            }],
            domProps: {
                "value": (value)
            },
            on: {
                "input": function ($event) {
                    if ($event.target.composing) return;
                    value = $event.target.value
                }
            }
        })
    }
    
    // 将input添加上type,值是ckeckbox
    const ele = VueTemplateCompiler.compile('<input type="checkbox" v-model="value"/>'); 
     // 编译完后domProps的属性就是checked,on绑定的就是change事件

    (1)编译时:不同的标签解析出的内容不一样 (src/platforms/web/compiler/directives/model.js)

    if (el.component) {
        genComponentModel(el, value, modifiers)
        // component v-model doesn't need extra runtime
        return false
      } else if (tag === 'select') {
        genSelect(el, value, modifiers)
      } else if (tag === 'input' && type === 'checkbox') {
        genCheckboxModel(el, value, modifiers)
      } else if (tag === 'input' && type === 'radio') {
        genRadioModel(el, value, modifiers)
      } else if (tag === 'input' || tag === 'textarea') {
        genDefaultModel(el, value, modifiers)
      } else if (!config.isReservedTag(tag)) {
        genComponentModel(el, value, modifiers)
        // component v-model doesn't need extra runtime
        return false
      } else if (process.env.NODE_ENV !== 'production') {
        warn(
          `<${el.tag} v-model="${value}">: ` +
          `v-model is not supported on this element type. ` +
          'If you are working with contenteditable, it\'s recommended to ' +
          'wrap a library dedicated for that purpose inside a custom component.',
          el.rawAttrsMap['v-model']
        )
      }

    (2)运行时:会对元素处理一些关于输入法的问题 (src/platforms/web/runtime/directives/model.js)

    inserted (el, binding, vnode, oldVnode) {
        if (vnode.tag === 'select') {
          // #6903
          if (oldVnode.elm && !oldVnode.elm._vOptions) {
            mergeVNodeHook(vnode, 'postpatch', () => {
              directive.componentUpdated(el, binding, vnode)
            })
          } else {
            setSelected(el, binding, vnode.context)
          }
          el._vOptions = [].map.call(el.options, getValue)
        } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
          el._vModifiers = binding.modifiers
          if (!binding.modifiers.lazy) {
           // 对输入法做了一些校验,然后绑定自己的事件
            el.addEventListener('compositionstart', onCompositionStart) 
            el.addEventListener('compositionend', onCompositionEnd)
            // Safari < 10.2 & UIWebView doesn't fire compositionend when
            // switching focus before confirming composition choice
            // this also fixes the issue where some browsers e.g. iOS Chrome
            // fires "change" instead of "input" on autocomplete.
            el.addEventListener('change', onCompositionEnd)
            /* istanbul ignore if */
            if (isIE9) {
              el.vmodel = true
            }
          }
        }
      }

     

    展开全文
  • v-model

    千次阅读 2019-03-06 10:51:50
    input v-model="poin"&gt; {{ poin }} &lt;/div&gt; js new Vue({ el:'#app', data:{ poin:'zqz' } }) 一旦我们输入的值发生变化,data中的poin值也会发生变化。 理论上data中的值...
  • 1、Vue中v-model的实现原理 组件 v-model 可以看成是 value+input 方法 的语法糖 <el-checkbox :value="" @input=""></el-checkbox> <el-checkbox v-model="check"></el-checkbox> 原理: ...
  • vue中关于checkbox数据绑定v-model指令的个人理解

    万次阅读 多人点赞 2018-06-07 15:16:45
    vue.js未开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见,下面是最常见的例子:&lt;div id='myApp'&gt;&lt;input type="text" v-model="msg"&gt;&lt;br...
  • vue3 v-model的使用(多个 v-model 绑定)

    千次阅读 2020-09-30 17:23:27
    //父组件 setup(props) { const msg = ref("msg"); const foo = ref('123') ...HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld> <!--子组件--!> <input
  • vue中使用v-model在表单元素上创建双向数据绑定,在官方文档中简单的提到了它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能; 对,它本质上只是一个语法糖,但到底是一个...
  • 一、v-model? https://segmentfault.com/a/1190000009492595   v-model 其实是一个语法糖,这背后其实做了两个操作 v-bind 绑定一个 value 属性 v-on 指令给当前元素绑定 input 事件 在原生表单元素...
  • Vue-学习笔记-08 v-model详解

    千次阅读 2020-07-26 00:47:32
    一、v-model简介 二、v-model基本使用 三、v-model的原理 四、v-model 结合radio类型使用 五、v-model 结合checkbox类型使用 六、v-model配合select使用 六、修饰符 6.1 .lazy(懒惰)修饰符: 6.2 .number修饰符: ...
  • 在vue中,v-bind 只能实现数据的单向绑定,从 M (model)自动绑定到 V(view), 无法实现数据的双向绑定,因此如果想要实现数据的双向绑定,可以使用 v-model 指令,实现表单元素和 Model 中数据的双向数据绑定, ...
  • 今天要写的是 vue.js 里面两个很常用的指令:v-model 和 v-for 。 1、v-model v-model 是 vue.js 里面唯一一个可以实现数据双向绑定的指令。 v-model 只能通过表单元素实现与用户的交互,也就是说, v-model 只能...
  • vue中v-model和v-bind区别

    万次阅读 多人点赞 2019-05-15 11:18:05
    vue中v-model和v-bind区别 Vue中的数据绑定 绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind: v-model: v-bind eg:v-bind:class 可简写...
  • 指令详解:v-model和v-bind

    万次阅读 多人点赞 2018-05-08 21:14:55
    v-model 我们可以使用 v-model 指令在 &lt;input&gt; (&lt;input&gt; 标签有多种类型,如 button、select 等等)及 &lt;textarea&gt; 元素上进行双向数据绑定。但 v-model 本质上不过是语法...
  • v-model : 使用在表单控件中,创建数据双向绑定 //在输入框中 <input v-model = 'value' /> data(){ return{ value:'' } } v-bind : 1.动态的绑定数据或者属性 2.给组件传值 //如果current 等于 0 绑定 ...
  • vue中v-model和v-bind 和v-on的区别 Vue中的数据绑定 绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind: v-model: v-bind eg:v-bind:class 可简写为 :class...
  • v-bind和v-model的区别

    千次阅读 2019-04-29 16:34:20
    v-bind与v-model区别 有一些情况我们需要 v-bind 和 v-model 一起使用: 1 data.name 和 data.body,到底谁跟着谁变呢?甚至,它们会不会产生冲突呢? 实际上它们的关系和上面的阐述是一样的,v-bind 产生的效果不...
  • 别低头,皇冠会掉,别...v-model 双向绑定 v-for 循环 v-for (item,index in xx) v-for (item in xx) v-model > 双向数据绑定 单向数据绑定 数据 —> 视图 双向数据绑定 数据 < —> 视图 (v-model) ...
  • v-model指令 代码参考/lesson2/01. v-model指令.html v-model指令的作用是双向绑定数据,它只能用于输入组件,如input、textarea、select、radio等。 需要注意的是,通过v-model绑定的数据都为字符串。 实现一个...
  • v-model和v-decorator同用时的赋值方法

    千次阅读 2020-09-10 14:32:35
    vue中v-model和v-decorator的使用 Vue中,使用v-model来进行数据绑定,在Vue-Ant Design 框架的使用中,会有v-decorator的使用,但是两者同时使用的时候,v-model数据绑定却会失效,使用this.name可以获取到组件的值...
  • v-model是一个指令,能够轻松的实现表单输入与应用状态之间的双向绑定 解!!! 1.进入GitHub中下载vue源文件 2.进入GitHub页面中,进行clone or download操作 3.下载好压缩包进行解压 4.ctrl-c解压好的文件 然后...
  • 在使用v-model时,如果用中文输入法输入中文,一般在没有选定词组前,也就在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以用@input来代替v-model. <div id="app"> ...
  • v-for 循环时直接使用 v-model 绑定value报错 报错vue v-model directives cannot update the iteration variable ‘x’ itself 将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组,因为写入别名就...
  • 理解v-model

    千次阅读 2019-04-19 12:24:06
    理解v-model 参考文档: 65.从 Vue.js 自定义输入框深入理解 v-model vue中v-model等父子组件通信 v-model一般用于双向绑定: 以下内容来自:vue 自定义组件使用v-model <input v-model="something"> v-...
  • 但是删除是有问题的,div里删除后,el-cascader绑定的v-model值会变更,但是界面上的el-cascader控件已选中内容却不会发生变更,找了资料未找到解决办法,最后通过setTimeout解决了该问题,但是有个瑕疵,每次在下面...
  • 动态生成v-model时不能直接使用string[‘name’]=value,无法编辑,这时需要使用this.$set

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,973
精华内容 17,989
关键字:

v-model