Vue-指令Vue 指令 Vue 会根据不同的【指令】，针对标签实现不同的【功能】指令：带有 v- 前缀的特殊标

Vue 指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v- 前缀的特殊标签属性

v-html

作用：设置元素的 innerHTML
语法：v-html = "表达式 "

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
  
    <div id="app">
      <!-- <div>{{msg}}</div> 错误❌ -->
       <div v-html="msg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <!-- 
    `` 多行字符串   
    -->

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          msg: `<a href="https://www.baidu.com">
              百度
            </a>`,
        },
      });
    </script>
  </body>
</html>

v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box{
        width: 200px;
        border: 3px saddlebrown solid;
        margin: 20px;
      }
    </style>
  </head>
  <body>

    <!-- 
      v-show底层原理：切换 css 的 display:none 来控制显示隐藏
      v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
    -->

    <div id="app">
      <div v-show="flag" class="box">我是v-show控制的盒子</div>
      <div v-if="flag" class="box">我是v-if控制的盒子</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          flag: true
        },
      });
    </script>
  </body>
</html>

v-else v-else-if

作用：辅助 v-if 进行判断渲染
语法： v-else v-else-if = "表达式"
注意：需要紧挨着 v-if 一起使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-if="gender === 1">性别：♂男</p>
      <p v-else>性别：♀女</p>
      <hr />
      <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
      <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
      <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
      <p v-else>成绩评定D：奖励一周不能玩手机</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          gender: 1,
          score: 95,
        },
      });
    </script>
  </body>
</html>

v-on

作用：注册事件
语法：
v-on:事件名 = "内联语句"
v-on:事件名 = "methods中的函数名"
简写：@事件名

内联语句

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
<!--     <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+</button> -->

    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+</button>

    <!-- <button v-on:mouseenter="count--">-</button>
    <span>{{count}}</span>
    <button v-on:mouseenter="count++">+</button> -->
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        count: 100
      }
    })
  </script>
</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="fn">切换显示隐藏</button>
      <h1 v-show="flag">Hello,Vue</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          flag: true,
        },
        methods: {
          fn() {
            // 让提供的所有methods中的函数，this都指向当前实例
            console.log("执行了fn");
            // if(app.flag)app.flag=false;
            // else app.flag=true;
            console.log(app,"   dsvsdvsdv\n ",this);
            this.flag = !this.flag;
          },
        },
      });
    </script>
  </body>
</html>

函数传参

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
      <p>银行卡余额：{{money}}元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          money: 100,
        },
        methods: {
          buy(price) {
            this.money -= price;
          },
        },
      });
    </script>
  </body>
</html>

v-bind

作用：动态的设置html的标签属性 → src url title ...
语法： v-bind:属性名="表达式"
注意：简写形式 :属性名="表达式"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-bind:src  :src-->
      <img v-bind:src="imgUrl" v-bind:title="msg" alt="" />
      <img :src="imgUrl" :title="msg" alt="" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          msg:'Hello,图片',
          imgUrl: 'https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg'
        },
        methods: {
          
        },
      });
    </script>
  </body>
</html>

v-for

作用：基于数据循环，多次渲染整个元素→ 数组、对象、数字...
遍历数组语法：
v-for = "(item, index) in 数组"
item 每一项， index 下标
省略 index: v-for = "item in 数组"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <!-- <li v-for="(item,index) in list">{{item}} - {{index}}</li> -->
      <li v-for="item in list">{{item}}</li>
    </ul>
    <!-- <p v-for="(item,index) in list">{{index+" "+item}}</p> -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
  const app = new  Vue({
    el:"#app",
    data:{
      list : ['西瓜','苹果','鸭梨','西瓜','苹果','鸭梨']
    }
  })
</script>
</body>
</html>

v-model

作用: 给表单元素使用, 双向数据绑定
数据变化 → 视图自动更新
视图变化 → 数据自动更新
语法: v-model = '变量'

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <!--
    v-model 可以让数据和视图，形成双向数据绑定
    （1）数据变化，视图自动更新
    （2）试图变化，数据自动更新

    可以快速获取或设置表单元素的内容
    -->
    账户：<input type="text" v-model="username"><br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button @click="login">登陆</button>
    <button @click="reset">重置</button>
  </div>
  <script src="../../vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        username: '',
        password: '', 
      },
      methods:{
        login(){
          console.log(this.username,this.password)
        },
        reset(){
          this.username='';
          this.password='';
        }
      }
    })
  </script>
</body>
</html>

trim()函数用于去除字符串两端的空白字符。
trim()函数会返回一个新的字符串，表示从原始字符串的开头和结尾删除了所有空白字符后的结果。这里的空白字符包括空格、制表符（\t）、换行符（\n）等。例如，对于字符串 "\n hello world \n"，使用trim()函数后将返回 "hello world"。

let str = " JavaScript is fun!    "; 
let trimmedStr = str.trim(); 
console.log(trimmedStr); // 输出: "JavaScript is fun!"

filter()函数返回包含所有满足条件元素的新数组。

const employees = [ { name: 'Alice', age: 25 }, 
                    { name: 'Bob', age: 35 }, 
                    { name: 'Charlie', age: 40 } ]; 
const filteredEmployees = employees.filter(employee => employee.age > 30); console.log(filteredEmployees); 
// 输出: [{ name: 'Bob', age: 35 }, { name: 'Charlie', age: 40 }]

unshift()是数组的一个方法，用于在数组的开头添加一个或多个元素，并返回新的数组长度。

let arr = [4, 5, 6]; 
let newLength = arr.unshift(1, 2, 3); 
console.log(arr); // 输出: [1, 2, 3, 4, 5, 6] 
console.log(newLength); // 输出: 6