Vue.js 模板语法

1.大括号语法插值

(1)使用 {{}} 将变量包裹起来，vue会将变量的值解析为普通文本，而非 HTML 代码
(2)这个行为是响应式的，动态修改 {{}} 中数据的值，相关Dom的内容也会发生改变

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

data() {
  return {
    msg:"good day",
    html:"<h2>我是h2</h2>"
  }
}

渲染结果：

2.v-html/v-text指令

v-html指令至关于对当前标签元素中的innerHTML属性进行赋值
v-text指令至关于对当前标签元素中的innerText属性进行赋值

<div v-text="msg"></div>
<div v-html="html"></div>

data() {
  return {
    msg:"good day",
    html:"<h2>我是h2</h2>"
  }
}

渲染结果：

3.v-bind 为标签的属性绑定变量

(1)通常标签属性的值解析为文本，当使用v-bind指令时，则属性的值解析为vue中定义的变量
(2)v-bind能够简写成:

<!-- msg值为good day -->
<div v-bind:title="msg">你好</div>
<!-- 简写 -->
<div :title="msg">世界</div>

渲染结果：

<div title="good day">你好</div>
<div title="good day">世界</div>

4.v-model 双向数据绑定

前面的指令v-html/v-text/v-bind实现的数据绑定是单向的，即 数据 -> 视图（视图会响应数据的变化）
而v-model能够实现双向数据绑定，除了视图会响应数据的变化外，视图层的变化也会致使data中数据的变化

(1)文本框和文本域将值绑定到value属性上，同时监听input事件，将input框的值同步至data对应的数据上
(2)单选框和复选框也是将值绑定到value属性，同时监听change事件，与文本框不一样的是，它只绑定checked属性为true的元素。单选框绑定是一个数据，而c复选框绑定一个数组
(3)下拉菜单绑定select标签的value属性，并监听change事件

<template>
<div id="app">
    <h4>文本框的值为{{msg}}</h4>
    <h4>单选框的值为{{gender}}</h4>
    <h4>复选框的值为
        <span v-for="item in hobby" :key="item"> {{item}} </span>
    </h4>
    <h4>选中的城市为{{city}}</h4>
    <h4>文本域的值为{{content}}</h4>
    <input type="text" v-model="msg">
    <div>性别：
        <input type="radio" name="gender" v-model="gender" value="man">男
        <input type="radio" name="gender" v-model="gender" value="women">女
    </div>
    <div>
        爱好
        <input type="checkbox" name="hobby" v-model="hobby" value="电影">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="音乐">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="游泳">游泳
    </div>
    <div>
        <select v-model="city">
            <option value="" disabled>请选择一个城市</option>
            <option value="020">广州</option>
            <option value="0755">深圳</option>
            <option value="021">上海</option>
        </select>
    </div>
    <div>
        <textarea v-model="content" cols="30" rows="10"></textarea>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      msg:"good day",
      gender:"man",
      hobby:[],
      city:"",
      content:""
    }
  }
}
</script>

5.JavaScript 表达式

对于全部的数据绑定，Vue.js 都提供了彻底的 JavaScript 表达式支持

<div id="app">
    <div v-html="5+10"></div>
    <p>{{10+30}}</p>
    <p>{{num>10? 'YES' : 'NO'}}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
</div>