vue指令

一雨方知深秋

于 2024-08-25 09:12:14 发布

阅读量903

点赞数 26

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63178019/article/details/141455819

版权

vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.文本插值（双大括号法）

  <!-- 插值表达式：vue3的一种模板语法
  作用：利用表达式进行插值渲染 
  语法：{{表达式}}-->
  <div id="app">
    <span>message:{{msg}}</span>
    <span v-once>message:{{msg}}</span>
  </div>

  <script>
    new vue({
      el: "#app", //用来指定对应所管理的容器
      data: {         //data里边用于提供数据
        msg: "hello"   //用于在所管理的范围内进行渲染
      }
    })

  </script>

注意

1.使用的数据要存在(data)

2.支持的是表达式，而非if ...for...之类的语句

3.不能在标签属性里面使用

响应式：数据变化，视图自动更新

data中的数据，最终会被添加到实例上

访问数据和修改数据都是在控制台上执行

访问数据：实例 . 属性名

修改数据：实例 . 属性名 = 值

二.v-html：解析标签

<div id="app">
  <div v-html="msg"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 
      <a href="#">冻干粉石锅拌饭</a>
    }
  })
</script>

三.v-show和v-if

相同：控制元素的显示与隐藏，表达式true显示，false隐藏

语法：v-show="表达式"，v-if="表达式"

不同：

v-show通过切换dispay：none控制显示隐藏----频繁切换显示隐藏的场景

v-if基于条件判断，是否创建或者移除元素节点----要么显示，要么隐藏，不频繁切换场景

四.v-else和v-else-if

作用：辅助v-if进行判断渲染

语法：v-else 后面不需要跟什么，v-else-if = "表达式"

注意：需要紧挨着v-if一起使用。v-else-if有多种情况时使用，v-else有两种情况时使用

(在js中定义，在html中判断）

  <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://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 80,
      }
    })
  </script>

五.v-on

1.作用：注册事件 = 添加监听 + 提供处理逻辑

2.语法：

a. v-on:事件名 = ”内联语句“

<button v-on:click="count++">按钮</button> //click是一个点击事件，count++是直接写在行内的的代码，也就是内联语句

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

  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count:100
      }
    })
  </script>

注意：v-on:可以简写为@

b. v-on:事件名=”methods中的函数名“

<div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">我是一只羊</h1>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true,
        methods: {
          fn() {
            this.isShow = !this.isShow
          }
        }
      }
    })

点击按钮"切换显示隐藏"时，就会调用函数fn()，函数fn()所做操作是将布尔值取反，从而达到点击按钮进行显示和隐藏的切换。

注意：this指向实例对象，想要获取数据isShow是要用"实例.属性”,而一旦改变实例名称，fn函数中实例名称也要改变，直接使用this，因为this指向实例。

c.v-on调用传参：

<button @click = "fn">按钮<button> 事件名之后直接是注册函数，无法传递参数

<button @click = "fn（参数1，参数2）">按钮<button>该形式是函数调用，可以传递参数

  <div id="app">
    <div class="box">
      <h3>自动售卖机</h3>
      <button @click="buy(5)">可乐5圆</button>
      <button @click="buy(10)">咖啡10圆</button>
    </div>
    <p>银行卡余额：{{ money }}</p>  
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        money:100
      },
      methods:{
        buy (price){
          this.money -= price
        }
      }
     
    })

如果是注册事件，会变成以下情况：注册事件并没有进行参数传递，那么在methods的buy函数中就必须要将5写死，所以无论点击的是可乐还是咖啡，减少的都是5圆，出现了错误。

  <div id="app">
    <div class="box">
      <h3>自动售卖机</h3>
      <button @click="buy">可乐5圆</button>
      <button @click="buy">咖啡10圆</button>
    </div>
    <p>银行卡余额：{{ money }}</p>  
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        money:100
      },
      methods:{
        buy {
          this.money -= 5
        }
      }
     
    })

六.v-bind

作用：动态设置html标签属性 ---src url title

语法：v-bind:属性名=“表达式”

简写形式：：属性名=“表达式”

  <div id="app">
    <img v-bind:src="url" >
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        url:"https://..."
      } 
    })
  </script>

图片切换案例：

数组存储图片路径 [图片1，图片2，...]
准备下标index,数组[下标]---->v-bind设置src展示图片---->修改下标切换图片

  <div id="app">
    <button v-show="index >0 " @click="index--">上一页</button>
    <div>
      <img v-bind:src="list[index]" >
    </div>
    <button v-show="index < list.length -1 " @click="index++">下一页</button>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        index:0,
        list:[
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.gif',
          './imgs/11-05.gif',
        ]
      } 
    })

通过点击“上一页”和“下一页”对图片进行选择展示

七.v-for

作用：基于数据循环，多次渲染整个元素，可以遍历数组，对象，数字

遍历数组语法：v-for = "(item,index) in 数组“，item是每一项，index是数组下标

<div id="app">
    <h3>熊大水果店</h3>
    <ul>
      <li v-for="(item,index) in list">
        {{item}} - {{index}}
      </li>
      <!-- <li v-for="item in list">
        {{item}}
      可以不要index，不要index的话直接把括号都去掉了
      </li> -->
      
    </ul>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        list:['西瓜','苹果','鸭梨']

      }
    })
  </script>

1.图书管理案例：基本删除---->v-for 删除功能

  <div id="app">
    <h3>熊大书店</h3>
    <ul>
      <li v-for="(item,index) in bookList"，:key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <!-- 注册点击事件，通过id进行删除数组中的对应项 -->
        <button @click="del(item.id)">删除</button>
        
      </li>
    </ul>

    
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
       bookList:[
        {id:1,name:'《红楼梦》',author:'曹雪芹'},
        {id:2,name:'《西游记》',author:'吴承恩'},
        {id:3,name:'《水浒传》',author:'施耐庵'},
        {id:4,name:'《三国演义》',author:'罗贯中'}
       ]
      },
      methods:{
        del(id) {
          // 通过id进行删除数组中对应项 -filter(不会改变原数组，只会将符合条件的项收集到新数组里，需要将新数组赋值回原数组里)
          // filter:根据条件，保留满足条件的对应项，得到一个新数组
          this.bookList=this.bookList.filter(item =>item.id !== id)

        }
      }
    })
  </script>

2.v-for 中的key

作用：给列表项添加唯一标识，便于vue进行列表项的正确排序复用

语法：key属性 = ”唯一标识“

没有添加key仅仅是删除了数据，实际仍然存在

八：v-model

作用：给表单元素使用，双向数据绑定---->可以快速获取或者设置表单元素内容

数据变化---->视图自动更新
试图变化---->数据自动更新

语法：v-model = '变量'

  <div id="app">
    账户:<input type="text" v-model="username"><br>
    密码:<input type="password" v-model="password"><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.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>
  <header class="header">
    <h1>小黑记事本</h1>
    <input v-model="todoName" placeholder="请输入任务" class="new-todo">
    <button @click="add" class="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <div class="view">
          <span class="index">{{index + 1 }}</span> <label for="">{{}}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
    <div id="app">
    </div>
    <!-- 统计和清空->如果没有任务，底部隐藏掉->v-show -->
    <footer class="footer" v-show="list.length > 0">
      <!-- 统计 -->
      <span class="todo-count">合计:<strong>{{list.length}}</strong></span>
  
      <!-- 清空 -->
      <button class="clear-completed">
        清空任务
      </button>
    </footer>
  </section>


  <!-- 底部  -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    // 添加功能
    // 1.通过v-model绑定输入框 => 实时获取表单内容
    // 2.点击按钮，进行新增,往数组最前面加，unshift
    const app = new Vue({
      el: '#app',
      data: {
        todoName: '',
        list: [
          { id: 1, name: '跑步一公里' },
          { id: 2, name: '跳绳200下' },
          { id: 1, name: '游泳3公里' },
        ]
      },
      methods: {
        del(id) {
          this.list = this.list.filter(item => item.id !== id)
        },
        add() {
          if (this.todoName.trim() === ' ') {
            alert('请输入任务名称')
            return
          }
          this.list.unshift({
            id: +new Date(),
            name: this.todoName,
          })
          this.todoName = '' //输入框清空

        },
        clear (){
          this.list = [] //清空

        }
      }

    })
  </script>
</body>

</html>