当前位置： 首页 > news >正文

Vue的使用

news 2024/9/25 5:30:03

文章目录

  • Vue的使用
    • Vue指令
      • v-html
      • 指令v-show与v-if
      • 指令v-else和v-else-if
      • 指令v-on
      • 指令v-bind
      • 指令v-for
        • v-for中的key
      • 指令v-model
        • 应用于其他表单元素
      • 指令v-bind
        • 操作css
        • 操作style
      • 指令修饰符
    • 计算属性
      • computed计算属性与methods方法的区别
      • 计算属性完整写法
    • watch侦听器
    • Vue生命周期
      • 生命周期函数（钩子函数）
        • created应用
        • mounted应用

Vue的使用

Vue指令

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

指令：带有 v- 前缀的特殊标签属性。例：<div v-html="str"></div>

v-html

作用：解析标签。直接使用{{}}无法解析内容里的标签，使用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 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-if

v-show：

  1. 作用：控制原始显示隐藏。
  2. 语法：v-show="表达式" 表达式值true显示，false隐藏。
  3. 底层原理：通过切换css的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. 语法：

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

      <!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></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>

    2. 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="fn">切换</button><h1 v-show="flag">hello</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都指向当前实例this.flag = !this.flag}}})</script>
</body>
</html>

  3. 简写：@事件名="内联语句"

  4. 调用传参：

    <!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(9)">牛奶9元</button><button @click="fn(12)">咖啡12元</button><h1>你有{{money}}元</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: {money: 250},methods: {fn(price) {this.money -= price}}})</script>
</body>
</html>

指令v-bind

  1. 作用：动态的设置html的标签属性（src、url、title）
  2. 语法：v-bind:属性名="表达式"
  3. 简写：:属性名="表达式"
<!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"><img :src="list[index]" alt=""><button @click="index++" v-show="index<3">+</button><button @click="index--" v-show="index>0">-</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: {index: 0,list: ['../图片/bear.jpg','../图片/map.png','../图片/太极.svg','../图片/微信.svg']}})</script>
</body>
</html>

指令v-for

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

  2. 遍历数组语法：v-for="(item, index) in 数组"

    • item 每一项，index 下标

    • <!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"><ul><li v-for="(item, index) in list">{{item}} - {{index}}</li></ul></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: ['aaa','bbb','ccc']}})</script>
</body>
</html>
v-for中的key

语法：:key = "唯一标识"

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

v-for的默认行为会尝试原地修改元素（就地复用）

注：

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

指令v-model

  1. 作用：给表单使用，双向数据绑定 —— 可以快速获取或设置表单元素内容。
    1. 数据变化，视图自动更新
    2. 视图变化，数据自动更新
  2. 语法：v-model = '变量'
应用于其他表单元素

常见的表单元素都可以用v-model绑定关联，快速获取或设置表单元素的值，它会根据控件类型自动选取正确的方法来更新元素。

  • 输入框：input:text——value
  • 文本框：textarea——value
  • 复选框：input:checkbox——checked
  • 单选框：input:radio——checked
  • 下拉菜单：select——value
    • option需要设置value值，关联选项
    • select的value值取决于选中的option的value值

指令v-bind

为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。

操作css

语法：:class="对象/数组"

  1. 对象：键就是类名，值是布尔值。如果值为true，有这个类；如果值为false，则没有这个类。

    <div class="box" :class="{类名1: 布尔值, 类名2: 布尔值}"></div>

    适用场景：一个类名，来回切换

  2. 数组：数组中所有的类，都会添加到盒子上，本质就是一个class列表

    <div class="box" :class="[类名1, 类名2, 类名3]"></div>

    适用场景：批量添加或删除类

操作style

语法：:style="样式对象"

<div class="box" :style="{CSS属性名1: CSS属性, CSS属性名2: CSS属性值}"></div>

使用场景：某个具体属性的动态设置。

指令修饰符

通过 ”.“ 指明一些命令后缀，不同后缀封装了不同的处理操作 —— 简化代码。

  1. 按键修饰符

    @keyup.enter——键盘回车监听

    // 底层逻辑
fn(e) {if (e.key === 'Enter') {// 触发事件}
}

  2. v-model修饰符

    v-model.trim——去首尾空格

    v-model.number——转数字

  3. 事件修饰符

    @事件名.stop——阻止冒泡

    // 底层逻辑
fn(e){e.stopPropagation()
}

    @事件名.prevent——阻止默认行为

计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

  1. 声明再computer配置项中，一个计算属性对应一个函数。
  2. 使用起来和普通属性一样{{ 计算属性名 }}

computed计算属性与methods方法的区别

computed计算属性：

  1. 作用：封装了一段对于数据的处理，求得一个结果。
  2. 语法：
    1. 写在computed配置项中
    2. 作为属性，直接使用——this.计算属性 {{计算属性}}
  3. 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算并再次缓存。

methods方法：

  1. 作用：给实例提供一个方法，调用以处理业务逻辑。
  2. 语法：
    1. 写在methods配置项中
    2. 作为方法，需要调用——this.方法名() {{f方法名()}} @事件名="方法名"

计算属性完整写法

计算属性默认的简写，只能读取访问，不能”修改“。

如果要”修改“，需要写计算属性的完整写法。

语法：

computed: {计算属性名: {get(){// 计算逻辑return 结果},set(修改的值){// 修改逻辑}
}

watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：

  • 简单写法：简单类型数据，直接监视

    data: {words: '苹果',obj: {words: '苹果',},
},
watch: {数据属性名(newValue, oleValue) {// 一些业务逻辑或异步操作},'对象.属性名'(newValue, oleValue) {// 一些业务逻辑或异步操作},
}

  • 完整写法：添加额外配置

    • deep: true对复杂类型深度监视
    • immediate: true初始化立刻执行一次handler方法
    data: {obj: {words: '苹果',lang: 'italy'}
},
watch: {数据属性名: {deep: true, // 深度监视handler (newValue) {// 逻辑代码}}
}

Vue生命周期

Vue的生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：1. 创建 2. 挂载 3. 更新 4. 销毁

初始化渲染请求最早在创建阶段结束后发送。

dom操作最早在挂载阶段结束后开始。

生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】—— 让开发者可以在特定阶段运行自己的代码。

在这里插入图片描述

created应用

created：响应式数据准备好，可以开始发送初始化渲染请求。

data: {list: []
},
created () {console.log('发送初始化渲染请求')
}
mounted应用

mounted：模板渲染完成，可以开始操作DOM。

data: {words: ''
},
mounted(){console.log('可以开始操作DOM')
}

页面刷新表单自动聚焦案例：

<!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"><input type="text" v-model="words" id=""></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {words: ''},mounted() {document.querySelector('input').focus()}})</script>
</body></html>

http://www.mrgr.cn/news/29035.html

相关文章：

  • [go] 命令模式
  • 第159天：安全开发-Python-协议库爆破FTPSSHRedisSMTPMYSQL等
  • ArrayList的扩容机制
  • Redis 篇-初步了解 Redis 持久化、Redis 主从集群、Redis 哨兵集群、Redis 分片集群
  • java注解
  • c++概念
  • Linux进程等待 | 程序替换
  • mysql学习教程，从入门到精通，SQL 更新数据（UPDATE 语句）（17）
  • 右值生命周期的延长
  • linux gcc 静态库的简单介绍
  • 代码随想录打卡Day35
  • 计数服务怎么设计？
  • 【读书】原则
  • 牛客周赛 Round 60（A,B,C,D,E,F）
  • 等保测评：企业如何建立安全的开发环境
  • MyBatis 源码解析：Mapper 文件加载与解析
  • C++知识点示例代码助记
  • leetcode 42 接雨水
  • 深入解析：如何通过网络命名空间跟踪单个进程的网络活动（C/C++代码实现）
  • Java项目——苍穹外卖（一）