Vue3 基础 – 快速上手 & 常用指令

1. 在 HTML 网页中使用 vue3 的3个基本步骤

a.通过 script 标签的 src 属性，在当前网页中全局引入 vue3 的脚本文件：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

b.创建 vue3 的单页面应用程序实例：

// 2.1 从 Vue 对象中解构出 createApp 函数
const { createApp } = Vue
 
// 2.2 调用 createApp 这个函数，就能够创建出一个单页面应用程序的实例
const app = createApp()
 
// 2.3 调用 app 实例对象上的 mount() 函数，
// 指定单页面应用程序 app，实际要控制页面上哪个区域的渲染
app.mount('#app')

c.声明 vue3 的单页面应用程序实例，实际要控制的页面区域：

<div id="app">div>

2. 定义和渲染数据

a.在调用 createApp() 函数时，可以提供一个对象作为配置参数，例如：

const app = createApp({ /*配置对象*/ })

b.如果想提供要渲染的数据，可以在步骤1的配置对象中，通过 data 节点提供渲染期间要使用的数据：

const app = createApp({
 // 2.1 注意：data 节点是一个函数
 data() {
   // 2.2 在 data 函数内部，return 的这个对象，就是数据对象，
   // 要渲染的数据，可以直接写到这个对象中，例如 return { name: 'ls' }
   return {}
 }
})

c.在步骤2的 data 节点中，定义一个名为 name 的数据，值是 zhangsan：

const app = createApp({
 data() {
   return {
     name: 'zhangsan'
   }
 }
})

d.在 vue3 控制的模板结构中，使用 {{ 数据名 }} 语法，把数据渲染出来：

<div id="app">
<h1>我是：{{ name }}</h1>
</div>

e.拓展：当我们修改 data 节点下的数据后，即可看到页面上的 HTML 内容会自动被刷新。这就是 vue 的强大之处：数据驱动视图。修改 data 数据的示例代码如下：

app._instance.proxy.name = 'wangwu'

3. vue3 中常用的渲染指令

在 vue 中，指令是带有 v- 前缀的特殊 attribute，它是 vue 提供的特殊语法，大家有必要掌握 vue 中常用指令的使用。

指令能够辅助前端程序员高效地把数据渲染为 HTML 的结构，而程序员不需要调用任何操作 DOM 的 API。

3.1常用指令的分类

1.内容渲染指令

a. 插值表达式

插值表达式（又叫做：Mustache）的语法为 {{ }}，vue 在解析模板期间，会把 {{ }} 所在的位置，替换为对应的数据值，例如：

<h1>大家好，我是：{{ name }}</h1>

 vue 会把 name 的值，替换到 {{ name }} 所在的位置。

注意：插值表达式 {{ }} 是唯一一个不以 v- 前缀开头的指令。

b.v-text

v-text 指令用来填充 HTML 元素的内容，如果 HTML 元素内部有其它内容存在，则会被覆盖掉。语法格式如下：

<h3 v-text="msg">展示看看</h3>

对应的数据为：

const app = createApp({
  data() {
    return {
      msg: '我是绑定的数据'
    }
  }
})

 注意：由于 v-text 指令存在覆盖已有内容的问题，所以在实际开发中它很少被用到。最常用的还是 {{ }} 插值表达式，因为它只是占位符，不会覆盖已有内容。

c.v-html

v-html 指令用来渲染带有 HTML 标记的文本内容，它可以把 HTML 标记解析为真正的 HTML 元素，并插入到模板中渲染。

而插值表达式和 v-text 指令只会把 HTML 标记渲染为纯文本，而不是 HTML。

v-html 的语法格式如下：

<div v-html="rawHtml"></div>

 对应的数据为：

const app = createApp({
  data() {
    return {
      rawHtml: '少年强中国说'
    }
  }
})

2. 属性绑定指令 

a.v-bind

v-bind 指令用来为元素的属性绑定动态的属性值。指令语法如下：

<div v-bind:title="titleMsg">xxx</div>

对应的数据为： 

const app = createApp({
  data() {
    return {
      titleMsg: '哇哈哈'
    }
  }
})

又例如，为图片的 src 属性动态绑定属性的值： 

<img v-bind:src="url" />

对应的数据为： 

const app = createApp({
  data() {
    return {
      url: 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  }
})

 b.v-bind的简写

在实际开发中，v-bind 指令的使用频率非常高，为了简化它的写法，vue 规定 v-bind 指令可以简写为英文的 : 且二者是完全等价的。如上面的例子可以使用 : 简写为：

:title="titleMsg">xxx
:src="url" 

对应的数据为： 

const app = createApp({
  data() {
    return {
      titleMsg: '哇哈哈',
      url: 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  }
})

 注意：今后在 vue 项目开发中，只要看到某个属性前面出现了英文的 : 那么，一定是为这个属性绑定了动态的值。

c.绑定布尔值

在 vue 中，某些属性的取值可以是布尔值 true 或 false，表示当前的属性是否应该应用于当前的元素。例如 disabled 属性：

<button :disabled="true">按钮Abutton>
 
<button :disabled="false">按钮Bbutton>

与之类似的，还有 radio 和 checkbox 的 checked 属性： 

<!-- 默认选中“男” -->
<input type="radio" name="gender" :checked="true">男
<input type="radio" name="gender">女
 
<!-- 默认选中“足球”和“乒乓球” -->
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby" :checked="true">足球
<input type="checkbox" name="hobby" :checked="true">乒乓球

另外，表单元素 select 下的 option 选项的 selected 属性，也可以绑定布尔值： 

<select>
  <option value="北京">北京</option>
  <option value="上海" :selected="true">上海</option>
  <option value="广州">广州</option>
</select>

d.动态绑定多个值

 如果要为某个元素同时绑定多个动态的属性值，可以把多个动态属性封装为一个 JavaScript 对象

const app = createApp({
  data() {
    return {
      // propObj 对象中封装了一系列属性的键值对
      attrsObj: {
        id: 'box',
        class: 'container',
        title: '布局容器'
      }
    }
  }
})

通过不带参数的 v-bind 指令，即可方便的把 attrsObj 对象中封装的属性，一次性绑定到对应的元素上：

<div v-bind="attrsObj">顶部 header 区域</div>

 注意：不带参数的 v-bind 指令，指的是省略了 :属性名 的用法。

e. 拓展：使用 JavaScript 表达式

在 vue 的数据绑定中，除了支持简单的属性名绑定之外，还支持完整的 JavaScript 表达式绑定。

例如，以下这些都属于简单的属性名绑定，它们是直接把 data 中数据项的名字，绑定到了模板中：

<div>我是：{{ name }}</div>
 
<div v-text="msg"></div>
 
<img :src="url" />

 除此之外，还支持表达式的绑定，例如：

<div>我是：{{ name.toUpperCase() }}，我今年{{ age + 1 }}岁了。div>
 
<div v-text="msg.split('').reverse().join('')">div>
 
<img :src="'https://img.yzcdn.cn/vant/' + url" />
 
<div>{{ age >= 18 ? '抽烟喝酒烫头' : '可乐牛奶娃哈哈' }}div>

 对应的数据如下：

const app = createApp({
 data() {
   return {
     name: 'liulongbin',
     age: 17,
     msg: '冯绍峰',
     url: 'cat.jpeg'
   }
 }
})

3.双向绑定指令

v-model 双向绑定指令，简化了表单元素的赋值和取值操作。

v-model 的作用：

1.data 数据源发生变化，自动重新渲染页面

2.表单数据发生变化，自动更新到 data 数据源中

a.文本框的双向绑定

input 元素通过 v-model 指令，可以方便地进行赋值和取值，示例代码如下：

<p>Message 的值是：{{ message }}</p>
<input type="text" v-model="message">

对应的数据如下：

const app = createApp({
  data() {
    return {
      message: 'hello'
    }
  }
})

b.多行文本框的双向绑定

textarea 元素通过 v-model 指令，可以方便地进行赋值和取值，示例代码如下：

<p>Message 的值是：</p>
<pre>{{ message }}</pre>
<textarea v-model="message"></textarea>

 对应的数据如下：

const app = createApp({
  data() {
    return {
      // 注意：这里的 \n 是换行符
      message: 'hello \nworld.'
    }
  }
})

c.复选框的双向绑定

单一复选框的双向绑定，绑定的是布尔类型的值：

<p>复选框选中的flag值为：{{flag}}</p>
<input type="checkbox" v-model="flag">
 
const app = createApp({
 data() {
   return {
     // 是否被选中
     flag: false
   }
 }
})

多个复选框的双向绑定，绑定的是数组类型的值，而且每个 checkbox 必须通过 value 属性提供选中项的值：

<p>多个复选框选中的 hobbies 值为：{{ hobbies }}</p>
<label><input type="checkbox" v-model="hobbies" value="篮球">篮球</label>
<label><input type="checkbox" v-model="hobbies" value="足球">足球</label>
<label><input type="checkbox" v-model="hobbies" value="冰球">冰球</label>
 
const app = createApp({
 data() {
   return {
     // 选中的值
     hobbies: []
   }
 }
})

 d.单选按钮的双向绑定

单选按钮的特点是多选一，所以对单选按钮进行双向绑定时，需要把多个单选按钮通过 v-model 指令绑定到同一个数据源，并通过 value 属性指定选中后的值：

<p>单选按钮选中的 gender 值为：{{ gender }}</p>
<label><input type="radio" v-model="gender" value="男">男</label>
<label><input type="radio" v-model="gender" value="女">女</label>
 
数据如下：
 
const app = createApp({
  data() {
    return {
      // 选中的值
      gender: '男'
    }
  }
})

e.选择器的双向绑定

单选选择器的双向绑定，只允许选中一个值：

<p>选中的城市为：{{ city }}</p>
<select v-model="city">
 <option value="">请选择</option>
 <option value="beijing">北京</option>
 <option value="shanghai">上海</option>
 <option value="nanjing">南京</option>
</select>
 
 
const app = createApp({
 data() {
   return {
     city: ''
   }
 }
})

多选选择器的双向绑定，允许选中多个值，所以需要绑定数组格式的数据源：

<p>选中的城市为：{{ areas }}</p>
<select v-model="areas" multiple>
 <option value="shunyi">顺义区</option>
 <option value="haidian">海淀区</option>
 <option value="daxing">大兴区</option>
</select>
 
 
const app = createApp({
 data() {
   return {
     areas: []
   }
 }
})

f.v-model 的 .lazy 修饰符

默认情况下，v-model 会在每次 input 事件后更新数据。可以添加 .lazy 修饰符来改为在每次 change 事件后更新数据：

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

g. v-model 的 .number 修饰符

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

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

注意：

1. 如果该值无法被 parseFloat() 处理，那么将返回原始值。
2. number 修饰符会在输入框有 type="number" 时自动启用。

h.v-model 的 .trim 修饰符

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

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

4.条件渲染指令

条件渲染指令用来条件性地渲染页面上的某一部分内容。只有表达式的条件成立，才会真正渲染这一部分的内容。

常用的条件渲染指令是 v-if、v-else 和 v-else-if。其中，v-if 指令可以单独使用，也可以结合 v-else 和 v-else-if 指令实现两个或多个条件的按需渲染。

1.v-if的使用

v-if 的语法格式如下：

<div v-if="表达式"></div>

其中，只有表达式的返回值为 true 时，才会真正渲染被 v-if 指令控制的 div 元素。

如果 v-if 的表达式返回值为 false，则被 v-if 指令控制的 div 不会被渲染到浏览器中。

例如：

<div v-if="flag">无敌是多么的寂寞</div>
 
 
const app = createApp({
  data() {
    return {
      flag: true
    }
  }
})

2. v-if 结合 v-else 的使用

v-if 指令可以结合 v-else 指令一起使用。

当条件为真时渲染被 v-if 指令控制的元素，当条件为假时渲染被 v-else 指令控制的元素。例如：

<div v-if="age >= 18">抽烟喝酒烫头</div>
<div v-else>牛奶可乐娃哈哈</div>

注意：v-else 指令不需要通过 = 指定相应的表达式，因为 v-else 是兜底的条件，只要前面的所有条件都不满足，那么必然会触发 v-else 的执行。

3.v-if 结合 v-else-if 和 v-else 的使用

v-if 指令可以结合 v-else-if 和 v-else 指令一起使用，从而组成复杂的条件渲染逻辑。

当 v-if 或某个 v-else-if 相应的条件为真时，被控制的元素才会被渲染。

最后的 v-else 依然是兜底的条件，当所有的 v-if 和 v-else-if 条件都不成立时，才会触发 v-else 的执行。例如：

<div v-if="score === 'A'">优秀</div>
<div v-else-if="score === 'B'">良好</div>
<div v-else-if="score === 'C'">一般</div>
<div v-else>差</div>
 
 
const app = createApp({
  data() {
    return {
      score: 'A'
    }
  }
})

4.