vue - 指令(一)

看文章可以得到什么?

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

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

目录

什么是vue的指令?​​​​​​​

vue常见指令的使用

v-html

v-show

v-if

[v-else 和v-else-if](#v-else 和v-else-if)

v-on

v-bind

v-for

v-model

案例-小黑记事本


什么是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中的函数名

  1. 简写:@事件名

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

v-on 调用传参

v-bind

  1. 作用: 动态的设置html的标签属性

  2. 语法: v-bind:属性名="表达式"

  3. 注意:

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

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

需求:点击按钮,切换图片

v-for

  1. 作用: 基于数据循环, 多次渲染整个元素 → 数组、对象、数字
  1. 遍历数组语法:

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. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
  • ① 数据变化 → 视图自动更新
  • ② 视图变化 → 数据自动更新
  1. 语法: v-model = '变量'

案例-小黑记事本

① 列表渲染

② 删除功能

③ 添加功能

④ 底部统计 和 清空

html 复制代码
<!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>

功能总结:

① 列表渲染:

v-for key 的设置 {{ }} 插值表达式

② 删除功能

v-on 调用传参 filter 过滤 覆盖修改原数组

③ 添加功能

v-model 绑定 unshift 修改原数组添加

④ 底部统计 和 清空

数组.length累计长度

覆盖数组清空列表

v-show 控制隐

相关推荐
待磨的钝刨41 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式