vue - 指令（一）

smilehjl

已于 2024-02-05 18:17:29 修改

阅读量1k

点赞数 17

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

于 2024-02-05 18:16:46 首次发布

本文链接：https://blog.csdn.net/weixin_45533131/article/details/136044139

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

看文章可以得到什么？

1.可以快速的了解并会使用vue的指令

2.可以加深你对vue指令的理解，知道每个指令代表什么功能

什么是vue的指令？

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

vue这个框架自己规定的特殊的规范，类似于html中的自己定义p等标签

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

vue常见指令的使用

v-html

作用：设置元素的 innerHTML

语法：v-html = "表达式 "

v-show

1. 作用： 控制元素显示隐藏

2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏

3. 原理：切换 display:none 控制

4. 场景： 频繁切换显示隐藏的场景

v-if

1. 作用：控制元素显示隐藏（条件渲染）

2. 语法： v-if = "表达式" 表达式值 true 显示，false 隐藏

3. 原理：基于条件判断，是否创建或移除元素节点

4. 场景：要么显示，要么隐藏，不频繁切换的场景

v-else 和v-else-if

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

2. 语法： v-else v-else-if = "表达式

3. 注意： 需要紧挨着 v-if 一起使用

v-on

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

2. 语法：

① v-on:事件名 = "内联语句"

② v-on:事件名 = "methods中的函数名

3. 简写：@事件名

4. 注意：methods函数内的 this 指向 Vue 实例

v-on 调用传参

v-bind

1. 作用：动态的设置html的标签属性
2. 语法： v-bind:属性名="表达式"
3. 注意：

简写形式 :属性名="表达式"

小案例案例：波仔的学习之旅

需求：点击按钮，切换图片

v-for

1. 作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字

2. 遍历数组语法：

v-for = "(item, index) in 数组"

item 每一项， index 下标
省略 index: v-for = "item in 数组"

v-for 中的 key

语法：key属性 = "唯一标识"

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

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

如果这个属性不添加，那么在对数组进行操作的时候后重新渲染的数据会出现问题

例子：假设我们要删除下图中那个带颜色的那个li，如果不添加：key="" 这个属性，那么就会出现内容被删除了，但样式还在的情况

不加 :key属性的情况：

加了 :key的属性的情况

v-model

1. 作用: 给表单元素使用, 双向数据绑定 → 可以快速获取或设置表单元素内容

① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

案例-小黑记事本

① 列表渲染

② 删除功能

③ 添加功能

④ 底部统计和清空

<!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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="todo" />
    <button class="add" v-on:click="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in todoList" >
        <div class="view">
          <span class="index">{{index+1}}.</span> <label>{{item}}</label>
          <button class="destroy" @click="del(index)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="todoList.length>0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{todoList.length}} </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="delAll">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      todoList: [],
      todo: ''
    },
    methods:{
      add(){
        console.log(this.todo);
        this.todoList.push(this.todo)
        console.log(this.todoList);

        //加入本地存储
        localStorage.setItem('todoList',JSON.stringify(this.todoList))
        this.todo = ''
      },
      delAll(){
        console.log('清空');
        this.todoList = []
      },
      render(){
        //读取本地数据
        this.todoList = JSON.parse(getItem('todoList'))
      },
      del(index){
        // console.log(index);
        // 删除指定数组元素
        this.todoList.splice(index,1)
      }
    }
  })

</script>
</body>
</html>

功能总结：