Vue基础指令（超详细）

2022-04-01 本文已影响0人生命里那束光

✍目录总览：

一、内容渲染指令

内容渲染指令内容和示例比较多，单独归纳整理了一篇在《Vue全家桶》专题下。

二、属性绑定指令

2.1 v-bind

前面的指令主要作用是将值插入到我们的模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如动态绑定a元素的 href 属性
比如动态绑定img元素的 src 属性

绑定 href、src 用法

在实际开发中，照片img的url值可能也是由服务器端获取，a标签的href值可能也是由服务器端获取的，那么我们如何动态绑定呢？例如我们看下面的例子：

<div id="app">
  <h1>{{message}}</h1>
  <a href="url">百度</a>
</div>

<script src="../js/vue.js"></script>
<script>
   // 1.创建Vue的实例对象
   const app = Vue.createApp({
    data(){
      return {
        message: '你好Vue3！',
        url: 'http://www.baidu.com'
      }
    }
   }).mount('#app');
</script>

如上图，我们给a标签的href是不能直接写url的，因为它不会解析。这个时候就需要给href前添加v-bind指令了。

<div id="app">
  <h1>{{message}}</h1>
  <a v-bind:href="url">百度</a>
</div>

语法糖写法如下： :href="url"

<div id="app">
  <h1>{{message}}</h1>
  <a :href="url">百度</a>
</div>

三、样式绑定指令

3.1 class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

样式绑定相关语法细节：

对象绑定和数组绑定可以结合使用

<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>

data: {
    activeClass: 'active',
    errorClass: 'error',
    isTest: true
}

class绑定的值可以简化处理

<div v-bind:class='arrClasses'>测试样式</div>
data: {
    arrClasses: ['active', 'error']
}

默认的class会保留（base）

3.2 style样式处理

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

四、事件监听指令

4.1 v-on

1. Vue如何处理事件？

v-on指令用法

<input type=‘button' v-on:click='num++'/>

v-on简写形式

<input type=‘button' @click='num++'/>

2. 事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>Hello</button>

调用函数

<button v-on:click='say()'>Say hi</button>

3. 事件函数参数传递

普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hi</button>

4.2 v-on修饰符

4. 事件修饰符

.stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

5. 按键修饰符

.enter 回车键

<input v-on:keyup.enter='submit'>

.esc 退出键

<input v-on:keyup.delete='handle'>

6. 自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

4.3 小结

.stop - 调用 event.stopPropagation()
.prevent - 调用 event.preventDefault()
.{keyCode|keyAlias} - 只当事件是从特定键触发时才触发回调
.once - 只触发一次回调

五、条件渲染指令（分支结构）

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。

v - if、v-else-if、v-else

这三个指令与JavaScript的条件语句 if、else、else if 类似
Vue 的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

5.1 v-if

<div id="app">
  <p v-if="flag">今天要下雨</p>
  <p v-else>今天不要下雨</p>
</div>


<script src="../js/vue.js"></script>
<script>
   // 1.创建Vue的实例对象
   const app = Vue.createApp({
    data(){
      return{
        flag: true
      }
    }
   }).mount('#app');
</script>
</body>

v-if的原理：

v-if 后面的条件为 false时，对应的元素以及子元素不会渲染
也就是根本没有对应的标签出现在DOM中

5.2 v-if、v-else-if、v-else

我们一般不会使用 v-else-if，因为这样的代码不美观，我们一般想要切换的话使用如下代码：

<body>
<div id="app">
  <p v-if="flag">今天要下雨</p>
  <p v-else>今天不要下雨</p>
  <button @click="toggle()">切换</button>
</div>

<script src="../js/vue.js"></script>
<script>
   // 1.创建Vue的实例对象
   const app = Vue.createApp({
    data(){
      return{
        flag: true
      }
    },
     methods:{
       toggle(){
         return this.flag = !this.flag;
       }
     }
   }).mount('#app');
</script>
</body>

5.3 v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏
v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏

<body>
<div id="app">
  <p v-show="flag">今天要下雨</p>
  <p v-show="!flag">今天不要下雨</p>
  <button @click="toggle()">切换</button>
</div>

<script src="../js/vue.js"></script>
<script>
   // 1.创建Vue的实例对象
   const app = Vue.createApp({
    data(){
      return{
        flag: true
      }
    },
     methods:{
       toggle(){
         return this.flag = !this.flag;
       }
     }
   }).mount('#app');
</script>
</body>

5.4 v-if与v-show的区别

v-if控制元素是否渲染到页面（是否创建）
v-show控制元素是否显示（已经创建，是否显示）

开发中如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用 v-show
当只有一次切换时，通过 v-if

六、列表渲染指令（循环结构）

6.1 v-for(遍历数组)

遍历数组

//语法1
<li v-for='item in list'>{{item}}</li>
//语法2
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

例子:

<div>水果列表</div>
    <ul>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>
    </ul>
</div>

data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        }, {
          id: 2,
          ename: 'orange',
          cname: '橘子'
        }, {
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
}

6.2 组件的key属性

官方推荐我们在使用 v-for时，给对应的元素或组件加上一个 :key属性，key的作用主要是为了高效的更新虚拟DOM
当列表的数据变化时，默认情况下， vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能 。
但这种默认的性能优化策略，会导致有状态的列表无法被正确更新 。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下， 提升渲染的性能 。此时，需要为每项提供一个唯一的 key 属性

<div id="app">
  <ul>
    <li v-for="item in myFruits" :key="item">{{item.id}}</li>
  </ul>
</div>

key的注意事项

key 的值只能是字符串或数字类型
key 的值必须具有唯一性(即：key 的值不能重复)
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性)
使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

不绑定key的后果:

向数组添加数据

上面就是由于没有加 :key 属性造成的Bug，所以官方也建议我们在使用 v-for 指令时最好要加上 :key 属性

6.3 v-for(遍历对象)

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

例子:

//v-if判断值为13的记录,进行输出  v-for对obj里面的属性进行遍历
<div id="app">
    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
//定义的对象
data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
}

七、双向绑定指令

7.1 v-model

双向绑定指令也叫表单元素绑定，vue提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
vue中使用 v-model 指令来实现表单元素和数据的双向绑定，经常用于表单 input 和 textarea 元素。

<body>
  <div id="app">
    <input type="text" v-model="message">
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          message: '你好Vue3!'
        }
      }
     }).mount('#app');
  </script>
</body>

理解双向绑定：

我们来看上述代码，当我们在输入框输入内容时
因为 input 中的 v-model 绑定了message，所以会实时的将输入的内容传递给 message，message发生改变。
当message 发生改变时，因为上面我们使用 Mustache 语法，将 message 的值插入到 DOM 中，所以 DOM 会发生响应的改变。
所以，通过 v-model 实现了双向的绑定

7.2 v-model底层原理实现

v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind 绑定一个 value 属性
v-on 指令给当前元素绑定 input 事件

也就是说下面的代码，等同于下面的代码：

<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

7.3 dom类型与 v-model

v-model:radio(单选框)

使得单选框只能选一个

<body>
  <div id="app">
    <label><input name="sex" type="radio" value="男" v-model="sex">男</label>
    <label><input name="sex" type="radio" value="女" v-model="sex">女</label>

    <h2>选择的性别是:{{sex}}</h2>
  </div>



  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          sex: '男'
        }
      }
     }).mount('#app');
  </script>
</body>

v-model：checkbox(单/多勾选框)

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框

v-moduel 即为布尔值
此时 input 的 value 并不影响v-model的值

<body>
  <div id="app">
    <label><input  type="checkbox"  v-model="isAgree">同意会员协议</label>
    <h2>是否同意协议：{{isAgree ? '同意' : '不同意'}}</h2>
  </div>


  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          isAgree: 'false'
        }
      }
     }).mount('#app');
  </script>
</body>

多个复选框

当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组
当选中某一个时，就会将 input 的 value 添加到数组中

<body>
  <div id="app">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的爱好是: {{hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
     const app = Vue.createApp({
      data(){
        return {
          hobbies: [], // 多选框,
        }
      }
     }).mount('#app');
  </script>
</body>

v-model:select（单选/多选下拉表单）

和 checkbox 一样，select 也分单选和多选两种情况

单选：只能选中一个值

v-model 绑定的是一个值
当我们选中 option 中的一个时，会将它对应的 vaule 赋值到 city 中

<body>
  <div id="app">
    <p>选择所在的城市:</p>
    <select name="city" v-model="city">
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="天津">天津</option>
    </select>
    <p>选择的城市是:{{city}}</p>
  </div>



  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          city: '上海'
        }
      }
     }).mount('#app');
  </script>
</body>

多选：可以选中多个值

v-model 绑定的是一个数组
当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects中

<body>
  <div id="app">
    <p>选择所在的城市:</p>
    <select name="cities" v-model="cities" multiple>
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="天津">天津</option>
    </select>
    <p>选择的城市是:{{cities}}</p>
  </div>



  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          cities: []
        }
      }
     }).mount('#app');
  </script>
</body>

7.4 v-model修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符

修饰符	作用	示例
.number	自动将用户的输入值转化为数值类型	`<input v-model.number = "age" />`
.trim	自动过滤用户输入的首尾空白字符	`<input v-module.trim = "msg" />`
.lazy	在 `change` 时而非 `input` 时更新(失去焦点或回车时)	`<input v-model.lazy = "msg" />`