vue 指令

最新推荐文章于 2024-08-28 11:43:01 发布

前端新手2022

最新推荐文章于 2024-08-28 11:43:01 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言 vue

本文链接：https://blog.youkuaiyun.com/qq_35112578/article/details/126858426

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue中的指令，包括内容渲染的v-text、{{}}、v-html，属性绑定的v-bind，事件绑定的v-on及其修饰符，如.prevent、.stop，以及v-model的双向绑定和修饰符。还讨论了v-if和v-show的条件渲染，v-for的列表渲染，强调了在使用v-for时设置key的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-bind:实际工作中，‘v-bind:’可以简写为“：”

事件绑定指令：v-on：“v-on：”可以简写为：@

事件修饰符

阻止默认行为：.prevent 如a链接的跳转，表单的提交等

阻止事件冒泡：.stop

捕获模式触发当前事件处理函数：.catch

只触发一次：.once

只有当e.target是当前自身元素时触发事件处理函数：.self

双向绑定：v-module,只能配合表单元素一起使用，不同于v-bind只能单向绑定

v-model.lazy:在变化时更新而不是实时更新，相当于防抖

条件渲染函数

v-if:每次动态地移除或添加元素，如果刚进入页面，某些元素不需要被显示，后期也很可能不需要被显示，v-if性能更好

v-show:给元素添加CSS样式，频繁切换显示状态，用v-show性能更好

实际开发中不用考虑性能问题时，直接使用v-if就可以

v-else和v-else-if:必须和v-if配套使用，否则不会被识别

列表渲染指令

内容渲染指令

v-text：几乎不用，会覆盖原有内容。
差值表达式{{}}：常用，不能渲染标签
v-html:可以渲染带标签的内容

属性绑定指令

v-bind:实际工作中，‘v-bind:’可以简写为“：”

<input type="text":placeholder="tips">

<img :src="photo" >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性绑定指令</title>

    <script type="text/javascript"  type="module" src="./vue-2.6.12.js"></script>
</head>

<body>
    <!-- 定义vue操作的区域 -->
    <div id="app">        
        <!-- v-bind:属性绑定指令：冒号后面不能有空格 -->
       <input type="text" 
       v-bind:placeholder="tips">     
       <hr>
       <img :src="photo" >  
    </div>


    <!-- 引入vue -->

    <script>
        const vm = new Vue({
            // 使用el知道vue要控制的区域
            el: '#app',
            // 数据源
            data: {
            
                tips:'请输入用户名',
                photo:'http://www.itheima.com/images/logo.png'
            }
        })

    </script>
</body>

</html>

事件绑定指令：v-on：“v-on：”可以简写为：@

    <div id="app">
       <h1 >count的值为：{{count}}</h1>
       <button v-on:click="conNum">+1</button>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: { count: 0 },
            methods: {
                conNum() {
                    this.count += 1
                }

            }
        })
    </script>

事件修饰符

阻止默认行为：.prevent 如a链接的跳转，表单的提交等
阻止事件冒泡：.stop
捕获模式触发当前事件处理函数：.catch
只触发一次：.once
只有当e.target是当前自身元素时触发事件处理函数：.self

按键修饰符

按键修饰符只能配合键盘使用
@keyup
@keydown

@keyup.enter="submit"

@keydown.esc="clear"

双向绑定：v-module,只能配合表单元素一起使用，不同于v-bind只能单向绑定

input
select
type="radio"
type="checked"
type="xxx"
textarea

双向绑定指令的修饰符

v-module.number：
v-module.trim：
v-model.lazy:在变化时更新而不是实时更新，相当于防抖

条件渲染函数

v-if:每次动态地移除或添加元素，如果刚进入页面，某些元素不需要被显示，后期也很可能不需要被显示，v-if性能更好
v-show:给元素添加CSS样式，频繁切换显示状态，用v-show性能更好
实际开发中不用考虑性能问题时，直接使用v-if就可以
v-else和v-else-if:必须和v-if配套使用，否则不会被识别

列表渲染指令

v-for="item in items"或者v-for="（item，index） in items"
注意，如果用到了v-for,一定要在v-for后面加一个“：key="id" ”，否则会报错，key的值只能是字符串或数字的类型，key值不能重复，必须具有唯一性

品牌列表综合案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品牌列表案例</title>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
</head>

<body>

  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">
        添加品牌
      </div>
      <div class="card-body">
        <!-- 添加品牌的表单区域 -->
        <!--!!!!!!!!!!!!!!!!!!!!! 阻止表单的默认提交事件*************************************** -->
        <form @submit.prevent="add">
          <div class="form-row align-items-center">
            <div class="col-auto">
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">品牌名称</div>
                </div>
                <!-- 表单双向绑定：v-model -->
                <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
              </div>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-2" >添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">品牌名称</th>
          <th scope="col">状态</th>
          <th scope="col">创建时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 循环渲染，注意key的值必须定义 -->
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <div class="custom-control custom-switch">
              <!-- input表单的id必须和label一一对应 -->
              <!-- 单向绑定数据： v-bind: -->
              <input type="checkbox" class="custom-control-input" :id="'customSwitch'+item.id" v-model="item.status">
              <!-- v-if:条件渲染指令 -->
              <label class="custom-control-label" :for="'customSwitch'+item.id" v-if="item.status===false">已禁用</label>
              <label class="custom-control-label" :for="'customSwitch'+item.id" v-else="item.status===true">已启用</label>
            </div>
          </td>
          <!-- 差值表达式 -->
          <td>{{item.time}}</td>
          <td>
            <!-- 绑定事件指令@click="" -->
            <a href="javascript:;" @click="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        list: [
          { id: 1, name: "宝马", status: true, time: new Date() },
          { id: 2, name: "奔驰", status: true, time: new Date() },
          { id: 3, name: "奥迪", status: true, time: new Date() },
        ],
        nextid: 4,
        brand: '',

      },
      methods: {
        add() {
          if(this.brand===""){
            alert('品牌名称不能为空！')
            return
          }
          console.log("111");
          this.list.push({
            id:this.nextid,
            name: this.brand,
            status: true,
            time: new Date(),

          })
          // 清空
          this.brand = ""
          this.nextid++


        },
        // 删除操作
        del(id) {
          // !!!!!!!!!创建一个新数组：filter()    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
         this.list= this.list.filter(item=>item.id!==id)

        },
        
      }
    })
  </script>
</body>

</html>