快捷搜索:

Vue学习的第九天,入门基础

作者: w88官方网站手机版  发布:2019-07-28

vue中平时利用到<input>和<textarea>那类表单成分,vue对于那几个因素的数码绑定和大家以前日常用的jQuery某些差距。vue使用v-model完成那么些标签数据的双向绑定,它会基于控件类型自动选取精确的点子来更新成分。

表单输入绑定


能够用v-model 指令在表单<input>及<textarea>成分上成立双向数据绑定,v-model本质上然而是语法糖.它担任监听用户的输入时间以及更新数据.

v-model 会忽略全体表单成分的 value、checked、selected 个性的开始值而连日将 Vue 实例的多寡作为数据来自。你应该通过 JavaScript 在组件的 data 选项中扬言开首值。

<input v-model="message" placeholder="edit">

<p>Message is :{{message}}</p>

八,事件管理器

    v-model本质上是二个语法糖。如下代码<input v-model="test">实质上是<input :value="test" @input="test = $event.target.value">,个中@input是对<input>输入事件的叁个监听:value="test"是将监听事件中的数据归入到input,上边代码是v-model的一个轻易易行的例证。在那边必要重申一点,v-model既能给input赋值还是能获得input中的数据,而且数量的获得是实时的,因为语法糖中是用@input对输入框举行监听的。能够在如下div中投入<p>{{ test}}</p>获取input数据,然后去修改input中数据会开掘<p></p>中数量随之转移。

#复选框


<div id="example-1">

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

    <label for="jack">Jack</label>

     < input type="checkbox" id="jone" value="Jone" v-model="checkedNames">

     <label for="jone">Jone</label>

     <br>

     <span>Checked Names:{{ checkedNames }}</span>

</div>

监听事件
  能够用v-on 指令监听DOM 事件来触发一些javaScript
    <div id="example-1">
      <button v-on:click="counter = 1">增加1</button>
      <p>这些开关被点击了{{ counter }} 次</p>
    </div>
    var example1 = new Vue({
      el: "#example-1"
      data: {
        counter: 0
      }
    })
办法事件处理器
    v-on 能够吸取贰个定义的点子来调用
      <div id="example-2">
        <butto v-on:click="greet">Greet</button>
      </div>
      var example2 = new Vue({
        el:'#example-2',
        data: {
           name: 'Vue.js'
        },
        methods: {
          greet: function (event) {
            alert('Hello' this.name '!')
            }
        }
      })
      example2.greet()
内联事件管理方法
  能够内联JavaScript语句
    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        alert(message)
      }
    })
    一时候也急需内联语句管理器中做客原生DOM事件 能够用特别变了$event 把它传播方法:
    <button v-on:click="warn('For cannot be submitted ye.',$event)" >Submit</button>
      methods: {
        warn: function(message, event) {
          if(event) event.preventDefault()
              alert(message)
          }
      }
事件修饰符
    为v-on 提供了 事件修饰符 通过由(.)表示的的授命后缀来调用修饰符。
      .stop .prevent .capture .self .once
      // 幸免事件冒泡
        <a v-on:click.stop="doThis"></a>
      // 提交事件不在重载页面
        <form v-on:submit.prevent="onSubmit"></form>
      // 修饰符能够串联
        <a v-on:click.stop.prevent="doThat"></a>
      // 唯有修饰符
        <form v-on:submit.prevent></form>
      // 增多事件监听器时利用事件捕获格局
        <div v-on:click.capture="doTthis"></div>
      // 只当事件在该因素自个儿(实际不是子成分)触发时触发回调
        <div v-on:click.self="doThat"></div>
按钮修饰符
  在监听键盘事件时,vue允许 v-on 在监听键盘事件时增多开关修饰符
      // 只有在keyCode 是 13 是调用 vm.submit()
    <input v-on:keyup.13="submit">
      // 记住全部的 keyCode 比较辛勤, 所以Vue 为最普及的按钮提供了小名:
    <input v-on:keyup.enter="submit">
    <input @keyup.enter="submit">
总体的开关名
  .enter .tab .delete .esc .space .up .down .left .right
  能够透过全局 config.keyCodes 对象自定义按钮修饰符别称:
  // 能够应用 v-on:keyup.f1
  Vue.config.keyCodes.f1 = 112
w88官方网站手机版,按钮修饰符
  能够用如下修饰符开启鼠标或键盘事件监听,使在开关按下时发生响应。
  .ctrl .alt .shift .meta
    <!-- Alt C -->
      <input @keyup.alt.67="clear">
    <!-- Ctrl Click -->
      <div @click.ctrl="doSomething">Do something</div>

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script>

#单选开关


<div id="example-2">

    <input type="radio" id="one" value="One" v-model="picked">

    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked">

    <label for="two">Two</label>

    <br>

    <span>Picked:{{picked}}</span>

</div>

var vm = new Vue({

     el:"#example-2",

     data:{

           picked:""

     }

})

九,表单控件绑定
基本成效法
  用v-model 指令在表单控件成分上成立双向数据绑定。
    <input v-model="message" placeholder="edit me">
    <p>Message is:{{ message}}</p>
多行文本
    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ message }}</p>
    <textarea v-model="message" placeholder="add multtiple lines"> </textarea>
复选框
  单个勾选框,逻辑值
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked}}</label>
三个勾选框,绑定到同三个数组
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="john" v-model="checkedNames">
    <label for="jack">john</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <span>Checked names: {{checkedNames}}</span>

1.v-model在input的下拉框、单选按键、复选框中的应用

#选择框


<div id="example-3">

     <select v-model="selected">

           <option disabled value="">请选择</option>

           <option>A</option>

           <option>B</option>

           <option>C</option>

     </selected>

</div>

var vm = new Vue({

     el:"example-3",

     data:{

           selected:""

     }

})

用v-for渲染动态选项

<div id="example-4">

       <select v-model="selected">

       <option v-for="option in options" v-bind:value="option.value">

           {{option.text}}

        </option>

        <span>Selected:{{selected}}</span>

</div>

var vm = new Vue({

     el:"#example-4",

     data:{

         selected:"A",

     options:[

            {text:"One", Value:"A"},

            {text:"Two", Value:"B"},

            {text:"Three", Value:"C"}

      ]

   }

})

    new Vue({
      el:'...',
      data: {
        checkedNames: [ ]
      }
    })
单选按键
    <input type="radio" id="one" value="One" v-model="picked">
    <lable for="one">One</lable>
    <input type="radio" id="two" value="Two" v-model="picked">
    <lable for="one">One</lable>
    <span>Picked: {{ picked }}</span>
选择列表
  单选列表:
    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  多选列表(绑定到多少个数组):
    <select v-model="selected" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
动态选项,用v-for 渲染
    <select v-model="selected">
      <option v-for="opction in options" v-bind:value="option.value">
        {{ option.text }}
      </option>

    如下边代码,分别是v-model在input分歧的零件中的应用,可是大要用法一样。注意:像上面代码中复选框那样须要接受多条数据的景况下,在data里面应该由数组与其对应二不是字符串。

值绑定


对于单选按键,复选框及挑选框的选项,v-model 绑定的值一般是静态字符串 (对于复选框也足以是布尔值)

<!--当选中时,picked为字符串a-->

<input type="radio" v-model="picked" value="a">

<!--toggle 为true或false-->

<input type="checkbox" v-model="toggle">

<!--当选中时 selected为字符串abc-->

<select v-model="selected">

<option value="abc">ABC</option>

</select>

可是有时大家兴许想把值绑定到 Vue 实例的四个动态属性上,那时能够用 v-bind 达成,并且这天性情的值能够不是字符串。

    </select>
    <span>selected: {{ sekected}}</span>
    new Vue({
      el:'...',
      data: {
          selected: 'A',
          options: [
            {text:'One',value: 'A'},
            {text:'Two',value: 'B'},
            {text:'Three',value: 'C'}
          ]
      }
    })
绑定 value
  对于单选按键,勾选框及挑选列表, v-model 绑定的value 平时是静态字符串。
    // 当选中时 picked 为字符串 a
      <input type="radio" v-model="picked" value="a">
    // toggle 为 true 或 false
      <input type="checkbox" v-model="toggle">
    // 当选中时 selected 为字符串女abc
      <select v-mode="selected">
        <option value="abc">ABC</option>
      </select>
复选框
  <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="a">
    // 当选中时
  vm.toggle === vm.a
  vm.toggle === vm.b
等选开关
    <input type="radio" v-model="pick" v-bind:value="a">
      // 当选中时
    vm.pcik === vm.a
选料列表设置
    <select v-model="selected">
      // 内联对象字面量
      <option v-bind:value="{number: 123}">123</option>
    </select>
      // 当选中时
    typeof vm.selected // object
    vm.selected.number //123
修饰符
  .lazy
     在暗中认可情形下, v-model 在 input 事件中联合输入框的值与数据 (除了 上述 IME 部分),但你可以增添四个修饰符 lazy ,进而调换为在 change 事件中同步:
    // 在“change” 并非在 "input" 时间中创新
    <input v-model.lazy="msg">
  .number
    尽管想自行将用户的输入值转为 Number 类型(即使原值的改造结果为 NaN 则赶回原值),能够加上一个修饰符 number 给 v-model 来管理输入值:

    这里有一个值绑定的难题,不管是下拉框恐怕单选按键如故复选框,我们都能够在对应的价签内安装value。以下拉框为例,我们在<option>中增添了vulue=“A被选”,当大家挑选第二个下拉框A的时候,在selected中的字符串为‘A被选',要是大家不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘A'。

#复选框

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

入选中时vm.toggle ==="yes"

当没有当选时vm.toggle === "no"

那边的 true-value 和 false-value 性子并不会影响输入控件的 value 性格,因为浏览器在付出表单时并不会富含未被选中的复选框。假设要保管表单中那八个值中的八个力所能致被交给,(比如“yes”或“no”),请换用单选开关。

    <input v-model.number="age" type="number">
    因为在 type="number" 时 HTML 中输入的值也三番五次会回去字符串类型。
  .trim
    要是要自行过滤用户输入的前后空格,能够增添 trim 修饰符到 v-model 上过滤输入:
    <input v-model.trim=msg>

    这里还大概有三个和vue毫无干系的难题,比较轻松,不过出于日常根本做后台java开采没太放在心上那个前端难题。以上面包车型地铁单选开关代码为例,<label>标签内有八个for成分与input中的id值对应(多个值同样),刚开首不太驾驭为何这么写,这一个对后面一个人士的话应该是一个非常粗大略的难题。那样写的目标绝非别的任何功用,只是label元素为鼠标立异了可用性,在点击label的时候也一定于点击了相应的input控件,点击label标签也足以触发input标签控件。比方单选开关在加了for之后点击small也得以选取对应开关,不过只要不加for是绝非其余反馈的。

#单选开关

<input type="radio" v-model="pick"  v-bind:value="a">

当选中时vm.pick === vm.a

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  Selected: {{ selected }}
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

<!--单选按钮-->
<div id="app">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  Picked: {{ picked }}
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

<!--复选框-->
<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">选项三</label>
  <br>
  Checked names: {{ checkedNames }}
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      checkedNames: []
    }
  })
</script>

#选取框的选料

<select v-model="selected">

     <option v-bind:value="{number : 123 }">123</option>

</select>

当选中时

typeof vm.selected   // => 'object'

vm.selected.number // => 123

2.v-model修饰符

#修饰符

.lazy

在私下认可境况下,v-model 在历次 input 事件触发后将输入框的值与数据举行同步 (除了上述输入法结合文字时)。你能够加多 lazy 修饰符,进而调换为利用 change 事件实行共同

.number

只要想自行将用户的输入值转为数值类型,能够给 v-model 增加 number 修饰符

.trim

借使要自行过滤用户输入的前后空白字符,能够给 v-model 加多 trim 修饰符

    v-model也足以和.lazy、.trim和.number那些修饰符一同使用。

  <!-- 在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件进行同步 -->
  <input v-model.lazy="msg" >
  <!--去除字符串首尾的空格-->
  <input v-model.trim="msg">
  <!--将数据转化为值类型-->
  <input v-model.number="age" type="number">

    .trim和.number的用法相比轻巧,这里就不做过多解释。.lazy相当于三个延迟加载的历程。在地点大家讲过<input v-model="test">也正是贰个语法糖<input :value="test" @input="test = $event.target.value">,<input v-model.lazy="msg" >则一定将input的实时更新改为二个change事件,v-model.lazy唯有当难点移除input时才会接触事件。下图1位v-model效果,图2位v-model.lazy效果。

w88官方网站手机版 1

下边在单独给大家介绍下vue中v-model使用

v-model用于表单数据的双向绑定,其实它正是一个语法糖,这一个背后就做了三个操作:

  1. v-bind绑定三个value属性

  2. v-on指令给当下成分绑定input事件

自定义组件使用v-model,应该有以下操作:

  1. 收起一个value prop

  2. 触发input事件,并传播新值

在原生表单成分中:

<input v-model="inputValue">

相当于

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中

<my-component v-model="inputValue"></my-component>

相当于

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这年,inputValue接受的值就是input事件的回调函数的第一个参数,所以在自定义组件中,要贯彻数量绑定,还索要$emit去触发input的风浪。

this.$emit('input', value)

总结

上述所述是作者给大家介绍的vue中v-model的使用及选取详解,希望对大家具备支持,假使我们有别的疑问请给自身留言,小编会及时过来大家的。在此也极其感激我们对台本之家网址的帮衬!

您可能感兴趣的稿子:

  • vue v-model动态变化详解
  • Vue 进级教程之v-model详解
  • 详解VUE自定义组件中用.sync修饰符与v-model的分别
  • vue.js学习笔记之v-bind和v-on解析
  • 对Vue- 动态成分属性及v-bind和v-model的界别详解

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:Vue学习的第九天,入门基础

关键词: www.w88985.c