输入

• 之前学习所有指令都属于输出指令, 都是通过表达式(JS代码)来操作数据如何显示在视图中, 是单向数据绑定

• 输入指令把用户的输入(例如: 输入, 选择等)同步到视图上

• 而通过用户输入改变视图就是双向数据绑定

v-model 指令

在学习v-model指令之前, 需要先熟悉表单元素 .

语法

v-model='变量'

• 绑定表单: v-model 必须绑定在表单元素上, 例如: input, textarea, select, checkbox, radio等

作用

• 绑定一个变量, 这个变量的值就是用户输入的value
• v-model实现了双向数据绑定

基本用法

绑定input, textarea标签

• type: text
• v-model绑定的是字符串

<div id="app">
  <p>绑定input标签：</p>
  <input type="text" v-model="message"> <!--绑定变量message-->
  <p>消息是: {{ message }}</p>  <!--显示变量message的值-->

  <p>绑定textarea标签：</p>
  <textarea v-model="message2"></textarea> <!--绑定变量message-->
  <p>{{ message2 }}</p> <!--显示变量message的值-->
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello', // 设置变量的值
    message2: '多行文本' 
  }
})
</script>

动态展示数据
<pre>{{$data|json}}</pre>

H5表单元素类型为number, date, e-mail的input标签
注: 无验证类型的提示信息

• type: number
• value: 用户输入的类型必须是number类型

<div id='app'>
<from>
 <input v-modle='phoneNumber' type='number'>
 <p>{{phoneNumber}}</p>
 </from>
</div>

<script>
  var app = new Vue({
    el: 'app',
    data: {
      phoneNumber: '18000001111'   
    }  
  });
</script>

绑定单选按钮

• type: redio
• value: string v-model与字符串绑定

 <div id="app">
  <input type="radio" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
  var app =new Vue({
    el: '#app',
    data: {
      picked: 'One'
  }
})
</script>

结果: v-model的值为'One'

绑定单选框

• type: checkbox
• v-model与布尔值绑定
• true为选择, false为取消

 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>

 // Vue实例里
 data: {
   checked: true
 }

结果: v-model的值为true

绑定多选框
将多个选择框, 保存在数组里

• type: checkbox
• v-model与数组绑定

 <input type="checkbox" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

// Vue实例里
 data: {
    checkedNames: []
    }

绑定下拉菜单

• v-model绑定的是value属性, 不是用户看到的文本内容
• 属性值为字符串

<div id="example-5" class="demo">
  <select v-model="selected">
    <option value='a'>A</option>
    <option value='b'>B</option>
    <option value='c'>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

// Vue实例里
 data: {
    selected: 'b'  // 选择大写字母B
  }

结果: v-model的值为'c'

获取多个输入数据

<div id="app">
    <input type="text" v-model="inputTask.text"/>
    <input type="number" v-model="inputTask.priority" />
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            inputTask: {text: "新任务", priority:0}
        },
        methods:{
        }
    });
</script>

input有了v-model就不要再用vaule。

MVVM的概念

• MVVM是MVC的演变, 与MVC的设计思想是一样的

• MVC是单向数据绑定, 在Vue里就是通过JS代码(表达式)来更新数据到视图

• 用户的输入就是双向数据绑定, 而v-model实现了双向数据绑定

• Vue实例就是MVVM里的VM