3.vue2-模板语法

Author:vanessa
Date:2018/02/04

* 指令：带有 v- 前缀的特殊属性，指令属性的值预期是单个 JavaScript 表达式，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

* 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如v-bind:href，href即为参数

* 修饰符：是以半角句号 . 指明的特殊后缀，如：v-on:submit.prevent="onSubmit"，prevent为修饰符

* 缩写：v-bind 缩写为空，v-on 缩写为@

    v-bind 指令可以用于响应式地更新 HTML 属性
    v-on 指令，它用于监听 DOM 事件

一.数据显示方式

1.大括号

<div>{{msg}}</div>

2.v-once绑定,特殊性：只执行一次数据绑定，当数据改变，其值不更新

<div v-once>{{msg}}</div>

3.v-html绑定，v-text绑定
ps：.v-html可以包含html标签

	{{rawHtml}}
    <div v-html="rawHtml"></div>
    <div v-text="rawHtml"></div>

var vm=new Vue({
    el:'#aa',
    data:{
        rawHtml:'<span style="color:green">wahaha</span>'
    },
})

页面显示：

二、表单数据显示

1.文本框input-text和文本域textarea用v-model绑定数据

<input type="text" v-model="msg">
<textarea v-model="msg" name="" id="" cols="30" rows="10"></textarea>

2.复选框：checkbox
(1)单个复选框绑定到布尔值

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

(2)多个复选框绑定到同一数组，当选中某一个时，这个checkbox的value添加到这个绑定的数组中

<div id='example-3'>
  <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="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

3.单选按钮，radio，选中那个radio的value被赋值给绑定的元素

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

4.选择框，select
（1）单选时：选中的option被赋值给v-model的变量

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
	data: {
    selected: ''
  }
</script>

（2）多选时 (绑定到一个数组)：选中的值添加到v-model绑定的数组中，select添加multiple属性

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  data: {
    selected: []
  }
</script>

5.表单修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">