菜单

什么知道Vue的v-model指令的施用办法

2019年5月25日 - Json

本文首要教学v-model指令,主要不外乎HTML成分的v-model和组件上的v-model三种,用七个简易的案例介绍v-model的利用。

法定文书档案讲的可比模糊,自身通过例子实行领悟。

案例一:HTML元素的v-model -输入框(text)

v-model是语法糖

首先鲜明一点,v-model仅仅是语法糖。

        <input
                type="text"
                v-model="something">
        <!--等价于-->
        <input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

还要理解$emit的用法:

vm.$emit(event,[...args])

接触当前实例上的事件。附加参数都会传给监听器回调。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app4">
      {{price}}<br>
      <input v-model="price"><!-- 下行注释的语法糖 -->
      <!-- <input :value="price" @input="price = $event.target.value"> -->
    </div>
    <script>
      new Vue({
        el: '#app4',
        data: {
          price: '20'
        }
      });
    </script>
  </body>
</html>

v-model在 普通input上

明确要旗帜显然在给 <input /> 元素增添 v-model 属性时,暗许会把 value
作为成分的品质,然后把 ‘input’ 事件视作实时传送 value
的触及事件
(具体参照他事他说加以考查语法糖的疏解)

图片 1

v-model用在组件上

这里是3个自定义组件currency-input,父组件的 price 的早先值是
100,退换子组件的值能实时更新父组件的 price

html:

<div id="demo">
 <currency-input v-model="price"></currentcy-input>
 {{price}}
</div>

js:

Vue.component('currency-input', {
 template: `

   <input
    ref="input"
    :value="value"
    <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?-->
    @input="$emit('input', $event.target.value)"
   >

 `,
 props: ['value'],// 为什么这里要用 value 属性,value在哪里定义的?貌似没找到啊?
})

var demo = new Vue({
 el: '#demo',
 data: {
  price: 100,
 }
})

那边的js代码,props中接受了value,不过在组件中<currency-input v-model="price"></currentcy-input>并从未传来value,而且在input中是监听了input事件,可是并不曾在父组件中定义input。

要掌握那些,就要回来语法糖的主题材料上,
<currency-input v-model="price"></currentcy-input>
真相上等价于:
<currency-input :value="price" @input="price = arguments[0]"></currency-input>
于是能够看到value和input了

通晓v-model在组件中的达成,给组件增加 v-model 属性时,私下认可会把 value
作为组件的天性,然后把 ‘input’ 值作为给组件绑定事件时的风浪名

案例2: 定制组件的v-model – 输入框(text)

代码分析

故此那边在js中@input="$emit('input', $event.target.value)"
子组件在监听input事件发生的时候(即@input),向父组件传递了input($emit中的input)事件,并且传递了当前子组件的price值。

而在父组件中,监听了自定义事件input,当自定义事件input触发后,将近期父组件本身的price值改为子组件中$emit上来的值($event.target.value
是用作$emit传递的参数,所以是arguments[0])

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app3">
      {{price}}
      <my-input v-model="price"></my-input><!-- 下行注释的语法糖 -->
      <!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->
    </div>
    <script>
      Vue.component('my-input', {
        template: '<div><input type="text" ref="input" :value="value" @input="doThis"/></div>',
        props: {
          value: String
        },
        methods: {
          doThis() {
            this.$emit('input', this.$refs.input.value);
          }
        }
      });
      new Vue({
        el: '#app3',
        data: {
          price: '10'
        }
      });
    </script>
  </body>
</html>

v-model存在的难点

对于复选框恐怕单选框的宽广组件时,由于v-model私下认可传的是value,不是checked,触发事件也不是oninput而是onchange

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
 tempalte: `<input 
        type="checkbox"
        @change="$emit('input', $event.target.checked)"
        :checked="value"
       />`
 props: ['value'],
})

其临时候需求Vue的model选项
model选项能够钦点当前的风云类型和传颂的props

因而能够由此如此革新:

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
 tempalte: `<input 
        type="checkbox"
        <!--这里就不用 input 了,而是 balabala-->
        @change="$emit('balabala', $event.target.checked)"
        :checked="value"
       />`
 props: ['checked'], //这里就不用 value 了,而是 checked
 model: { // model选项来指定
  prop: 'checked',
  event: 'balabala'
 },
})

图片 2

案例三: 定制组件的v-model – 复选框(checkbox) – 二.2.0 新扩充

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>v-model指令</title>
      <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
      <div id="app2">
        {{fruit}}<!-- 观测数据变化 -->
        <my-checkbox v-model="fruit.apple" value="apple"></my-checkbox><!-- 下行注释的语法糖 -->
        <!-- <my-checkbox :checked="fruit.apple" @change="val => {fruit.apple = val}" value="apple"></my-checkbox> -->

        <my-checkbox v-model="fruit.peach" value="peach"></my-checkbox><!-- 下行注释的语法糖 -->
        <!-- <my-checkbox :checked="fruit.peach" @change="val => {fruit.peach = val}" value="peach"></my-checkbox> -->
      </div>
      <script>
        Vue.component('my-checkbox', {
          template: '<div>{{value}}<input type="checkbox" :checked="checked" @change="doThis" :value="value"/></div>',
          model: {
            prop: 'checked',
            event: 'change'
          },
          props: {
            checked: Boolean,
            value: String
          },
          methods: {
            doThis() {
              this.$emit('change', !this.checked);
            }
          }
        });
        new Vue({
          el: '#app2',
          data: {
            fruit: {//数据
              apple: true,
              peach: false
            }
          }
        });
      </script>
    </body>
  </html>

图片 3

案例四: 定制组件的v-model – 单选开关(radio) -2.二.0 新扩充

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model指令</title>
  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
  <div id="app">
    {{fruit}}<!-- 观测数据变化 -->
    <my-radio v-model="fruit" value="apple" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="apple"></my-radio> -->

    <my-radio v-model="fruit" value="peach" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="peach"></my-radio> -->
  </div>
  <script>
    Vue.component('my-radio', {
      template: '<div>{{value}}<input :name="name" type="radio" ref="radio" :checked="checked===value" @change="doThis" :value="value"/></div>',
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: String,
        value: String,
        name: String
      },
      methods: {
        doThis() {
          this.$emit('change', this.$refs.radio.value);
        }
      }
    });
    new Vue({
      el: '#app',
      data: {
        fruit: 'peach'//数据
      }
    });
  </script>
</body>
</html>

图片 4

以上就是本文的全体内容,希望对大家的读书抱有扶助,也指望我们多多帮忙脚本之家。

你只怕感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图