插值

使用 “Mustache” 语法（双大括号），只能是单个表达式：{{ message }}

模板中能用的全局变量汇总： Infinity, undefined, NaN, isFinite, isNaN, parseFloat, parseInt, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, Math, Number, Date, Array, Object, Boolean, String, RegExp, Map, Set, JSON, Intl, require, BigInt

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute
指令可以接受参数（在指令后用冒号表示），表示和哪个 HTML attribute 进行绑定，指令参数可以是动态的，用方括号表示，如：v-bind:[xxx]=xxx
指令可以有修饰符（在点之后），指出一个指令应该以特殊方式绑定
指令的值是等于号后面的，除了 v-for 以外其他的指令值是一个表达式

<form v-on:submit.prevent="onSubmit">...</form>
                               ^--值
                     ^--修饰符
              ^--参数
       ^--指令名称

基本指令

v-html：输出原始的 HTML 代码：
v-once：只会执行一次插值，数据改变时不会更新：{{ message }}
v-text：指令的值会覆盖 HTML 标签包含的内容：abcdefg // 网页只显示 message 的内容，不显示 abcdefg
v-pre：用于显示原样内容：{{ message }} // 网页显示{{ message }}

v-bind

缩写：v-bind:xxx=“yyy” ⇒ :xxx=“yyy”

1.绑定 HTML 标签的属性

<a v-bind:href="aHref">一个链接</a>
<img v-bind:src="imgURL" alt="一个图片">

2.绑定 class

（1）对象语法：表示有没有这个类（对象中的类名加不加引号都是字符串，对应 CSS 中具体的类名）

<!-- v-bind:class="{ 类名1: Boolean, 类名2: Boolean }" -->
<p v-bind:class="{ active: isActive, changeColor: isChange }">Hello</p>

（2）数组语法：表示这个类叫什么（数组中的类名不加引号表示变量，根据 Vue 中的 data 进行替换；加引号表示字符串，对应 CSS 中具体的类名）

<!-- v-bind:class="[类名1, 类名2]" -->
<p v-bind:class="[class1, class2]">Hello</p>

3.绑定 style

（1）对象语法：fontSize 也可以写成 ‘font-size’（小驼峰和短横线命名都行）

<!-- v-bind:style="{ 样式名1: 值1, 样式名2: 值2 }" -->
<p v-bind:style="{ fontSize: myFontSize, color: myColor }">Hello</p>

（2）数组语法：数组里的每个值也是对象

<!-- v-bind:style="[样式对象1, 样式对象2]" -->
<p v-bind:style="[style1, style2]">Hello</p>

v-if

条件渲染

<p v-if="isTrue">isTrue 为 true 时渲染</p>
 
data: {
  isTrue: true
}

v-else-if，v-else 必须紧跟在 v-if 或 v-else-if 之后
注意：同时使用 v-if 和 v-for 时，v-for 优先级高（一般不同时使用 v-if 和 v-for）

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，可以为标签添加 key 防止被复用从而能够重新渲染。给标签添加一个唯一的 key 属性表示不进行复用（ key=“xxx” ）

v-show

条件显示

<p v-show="isShow">isShow 为 true 时显示</p>
 
data: {
  isShow: true
}

v-if 和 v-show 的区别：

v-if 是条件渲染，为 true 时才会出现在 DOM 中，而 v-show 从一开始就在 DOM 中，为 false 时只是将元素设置一个 style=“display: none”;
所以，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

列表渲染

<!-- 遍历数组： -->
<ul>
  <li v-for="item in movies">{{ item }}</li>
</ul>
<ul>
  <li v-for="(item, index) in movies">{{ index }} : {{ item }}</li>
</ul>
 
<!-- 遍历对象： -->
<ul>
  <li v-for="value in info">{{ value }}</li>
</ul>
<ul>
  <li v-for="(value, key) in info">{{ key }} : {{ value }}</li>
</ul>
<ul>
  <li v-for="(value, key, index) in info">{{ index }} - {{ key }} : {{ value }}</li>
</ul>
 
data: {
  movies:['盗梦空间', '星际穿越', '让子弹飞'],
  info: {
    name: 'Chloe',
    age: 18,
    loves: 'Max',
  }
}

v-for 可以接受整数 n，他会重复 n 次：{{ n }} // 1 2 3 … 10

使用 v-for 时需要绑定 key：即 <li> 中需要再添加 :key=“item” 和 :key=“value”
可以用 of 替代 in 作为分隔符，更接近 JS 迭代器语法

v-model

表单绑定，本质是 v-bind 和 v-on 的语法糖

1. 输入框：
  <p>{{ message }}</p>
  <input type="text" v-model="message">
 
 
2. 单选框：
  <input type="radio" id="male" name="sex" value="男性" v-model="checkedSex">
  <label for="male">男</label>
  <input type="radio" id="female" name="sex" value="女性" v-model="checkedSex">
  <label for="female">女</label>
  <p>你选择的性别是：{{ checkedSex }}</p>
 
 
3. 复选框：
  <label>
      <input type="checkbox" name="game" value="Xbox" v-model="checkedNames">微软
  </label>
  <label>
    <input type="checkbox" name="game" value="PlayStation" v-model="checkedNames">索尼
  </label>
  <label>
    <input type="checkbox" name="game" value="Switch" v-model="checkedNames">任天堂
  </label>
  <p>你选择的主机是：{{ checkedGames }}</p>
 
 
4. 下拉框：
  <select v-model="selectedSingle">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  </select>
  <p>你选择的是：{{ selectedSingle }}</p>
 
  <select v-model="selectedMultiple" multiple>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  </select>
  <p>你选择的是：{{ selectedMultiple }}</p>
 
data: {
  message: 'Hello Vue.js',
  checkedSex: '',
  checkedGames: [],
  selectedSingle: '',
  selectedMultiple: []
}

原生标签上的 <input v-model="searchText" /> 等价于下面这段：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

修饰符：

.lazy（失去焦点或者输入回车时才会更新）
.number（在 type=“number” 的情况下将用户的输入值从字符串 '123' 转为数值类型 123）
.trim（过滤前后的空格）

🏡 Hayoee

探索

02. 模板语法

插值

指令