Vue-1

Vue 简介

Vue 是一个用于"构建用户界面(基于数据渲染出用户看到的画面)" 的渐进式框架

基本使用

<!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 class="box"><h1>{{ msg }}</h1><p>{{ num }}</p></div><!-- 引入的是开发版本的包 - 它包含完整的注释和警告 --><script src="./js/vue.js"></script><script>// 创建实例const boxObj = new Vue({el: '.box',data: {msg: 'Hello World',num: 520}})// data中的内容绑定到了 boxObj 中，我们可以使用 boxObj.msg 和 boxObj.num 获得数据console.log(boxObj.msg)console.log(boxObj.num)</script>
</body></html>

Vue 指令

v-html

作用：设置元素的 innerHTML

<body><div class="box"><div v-html="msg"></div></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {msg: '<a href="https://www.baidu.com">百度</a>'}})</script>
</body>

v-show

作用：控制元素显示隐藏

使用场景：频繁切换显示隐藏的场景

v-if

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

使用场景：不频繁切换显示隐藏的场景

<body><!-- 两者的区别:v-show 底层原理：切换 css 的 display:none 来控制显示隐藏v-if 底层原理：根据"判断条件"控制"元素节点"是否"创建"或"移除"--><div class="box"><div v-show="flag">我是v-show控制的盒子</div><div v-if="flag">我是v-if控制的盒子</div></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {flag: false   // false 让元素隐藏，true 让元素显示}})</script>
</body>

v-else

v-else-if

<body><div class="box"><p v-if="gender === 1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score >= 90">成绩为 A</p><p v-else-if="score >= 75">成绩为 B</p><p v-else-if="score >= 60">成绩为 C</p><p v-else>成绩为D</p></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {gender: 1,score: 80}})</script>
</body>

v-on

作用：注册事件（即：添加监听 + 逻辑处理）

<body><div class="box"><button v-on:click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button> <!--  v-on:click 可以简写为 @click  --></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {count: 100}})</script>
</body>

<body><div class="box"><button @click="showChange">显示或隐藏</button><h1 v-show="isShow">Hello World</h1></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {isShow: true},// 这里提供函数，处理复杂的业务逻辑methods: {showChange() { this.isShow = !this.isShow }   // 这里的this指的是boxObj// ...}})</script>
</body>

<body><div class="box"><h1>账户余额: {{ money }}元</h1><button @click="buy(8)">冰淇淋8元</button><button @click="buy(15)">奶茶15元</button></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {money: 100},methods: {buy(price) {this.money -= price}}})</script>
</body>

v-bind

作用：动态的设置标签属性

<body><div class="box"><img v-bind:src="imgURL" v-bind:alt="msg"><!-- 如果觉得上面的写法太复杂，可以简写成下面的形式 --><img :src="imgURL" :alt="msg"></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {imgURL: './images/img0.png',msg: 'Jack'}})</script>
</body>

<body><div class="box"><!-- 要求实现：除了top之外，为这个div继续添加类名 className1、className3 --><!-- 方法一 --><div class="top" :class="{ className1: true, className2: false, className3: true }"></div><!-- 方法二 --><div class="top" :class="['className1, className3']"></div></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {}})</script>
</body>

<body><div class="box"><span>当前盒子宽度: {{ wd }}</span><br><span>当前盒子高度: {{ ht }}</span><br><button @click="wd++">横向拉长</button><button @click="ht++">纵向拉长</button><hr><div class="inner" :style="{ 'width': wd + 'px', 'height': ht + 'px', 'background-color': bgc }"></div></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {wd: 100,ht: 50,bgc: 'pink'}})</script>
</body>

v-for

  • 基本使用
<body><div class="box"><h3>城市列表</h1><ul><li v-for="(item, index) in list">{{ item }} || {{ index }}</li><!-- 上面的index如果不需要的话，可以写成下面的形式 --><li v-for="item in list">{{ item }}</li></ul></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {list: ['北京', '上海', '广州', '深圳']}})</script>
</body>
  • key 作用：给元素添加唯一的标识，便于 Vue 进行列表项的正确排序复用
  • 注意：key 的值只能是"字符串"或数字类型，且必须具有唯一性
<body><div class="box"><h3>我的收藏</h1><ul><li v-for="item in list" v-bind:key="item.id"><span>{{ item.name }}</span><span>{{ item.time }}</span><button @click="move(item.id)">取消收藏</button></li></ul></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {list: [{ id: 1, name: '水杯', time: '中午' },{ id: 2, name: '茶壶', time: '傍晚' },{ id: 3, name: '电脑', time: '清晨' },{ id: 4, name: '毛巾', time: '下午' }]},methods: {move(id) {this.list = this.list.filter(item => item.id !== id)}}})</script>
</body>

v-model

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

<body><!-- v-model 可以让数据和视图，形成双向数据绑定（1）数据变化，视图自动更新（2）视图变化，数据自动更新--><div class="box">账户：<input type="text" v-model="username"> <br>密码：<input type="password" v-model="password"> <br><button @click="reset">重置</button></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {username: '',password: ''},methods: {reset() {this.username = ''this.password = ''}}})</script>
</body>

<body><div class="box"><form action="http://127.0.0.1/">姓名: <input type="text" name="username" v-model="usernameYX"><br><br>是否成年: <input type="checkbox" name="isAdult" v-model="isAdultYX"><br><br>性别:<input type="radio" name="gender" value="1" v-model="genderYX">男<input type="radio" name="gender" value="0" v-model="genderYX">女<br><br>所在城市:<select name="city" v-model="cityYX"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option></select><br><br>自我描述:<textarea name="selfDescribe" v-model="descYX"></textarea><button type="submit">点击提交</button></form></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {usernameYX: '',isAdultYX: true,genderYX: '1',cityYX: '深圳',descYX: "请在这里输入..."}})</script>
</body>

指令修饰符

@keyup.enter键盘回车监听
v-model.trim去除首尾空格
v-model.number转为数字类型
@事件名.stop阻止冒泡
@事件名.prevent阻止默认行为
<body><div class="box"><input @keyup.enter="warn" v-model="username" type="text"></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {username: ''},methods: {warn() {this.username = '输入错误，请重试'}}})</script>
</body>

计算属性(简写)

概念：

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

注意：

计算属性，是有缓存功能的，一旦计算出来结果，就会立即缓存，如果依赖项没有变化，则当我们再次调用时，是会直接读取缓存的结果，而不是像methods 那样调用一次执行一次代码

对比：

computed 计算属性 VS methods 方法：1. computed 偏向计算，偏向对数据的处理，通过它的缓存的特性，可以将非常复杂的计算的结果缓存下来，只要依赖项没有发生变化，它的结果就一定没有变化，直接从缓存中读取上一次保留的结果即可2. methods 偏向处理业务逻辑

语法：(演示如下)

<body><div class="box"><h3>购物车清单</h3><table style="border: 1px solid #000;"><tr><th>名字</th><th>数量</th></tr><tr v-for="item in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}</td></tr></table><p>物品总数:{{ totalCount }}个</p></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {list: [{ id: 1, name: '卫衣', num: 3 },{ id: 2, name: '帽子', num: 7 },{ id: 3, name: '墨镜', num: 2 }]},computed: {totalCount() {// 使用 reduce 求和const total = this.list.reduce((sum, item) => sum + item.num, 0)// 一定要记得返回结果return total}}})</script>
</body>

计算属性(完整写法)

  • 计算属性默认的简写，只能读取访问，不能"修改"
  • 如果要"修改"，需要写计算属性的完整写法
<body><div class="box">姓: <input type="text" v-model="firstName">+名: <input type="text" v-model="lastName">=<span>{{ fullName }}</span><br><br>改名为: <input type="text" v-model="nameIs"><button @click="changeName">确认改名</button></div><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {firstName: '',lastName: '',nameIs: ''},methods: {changeName() {this.fullName = this.nameIs}},computed: {// 下面是简写形式（这样写只能读，不能改）// fullName() {//   return this.firstName + this.lastName// }// 完整的写法 -> 获取 + 设置fullName: {// 当fullName计算属性被"获取求值"时，执行get(如果有缓存，优先读取缓存)get() { return this.firstName + this.lastName },// 当fullName计算属性被"修改赋值"时，执行set(修改的值，转递给set方法的形参)set(value) {this.firstName = value.slice(0, 1)  // 截取字符串的第一个字符this.lastName = value.slice(1)      // 截取字符串剩下的字符}}}})</script>
</body>

监视器(简写)

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

<body><div class="box">请输入简体中文: <input type="text" v-model="words"><br>对应的外星语言: <input type="text" v-model="translation"></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {words: '',translation: '',obj: {picture: ''}},watch: {// 监视obj.picture，该方法会在数据变化时执行，形参里的oldValue可以省略// 'obj.picture'(newValue, oldValue) {//   console.log('变化了', newValue)// }// 监视words，该方法会在数据变化时执行words(newValue, oldValue) {// 防抖: 为了解决访问过快对服务器造成太大压力的问题，我们可以设置一些延迟，本例中延时400msclearTimeout(this.timer)this.timer = setTimeout(async () => {   // 直接给boxObj这个实例挂载timer属性const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate/',params: {words: newValue}})this.translation = res.data.data}, 400)}}})</script>
</body>

监视器(完整写法)

<body><div class="box">翻译成:<select name="language" v-model="obj.lang"><option value="001">简体中文</option><option value="002">英文</option><option value="003">意大利语</option></select><br>要翻译的语言: <input type="text" v-model="obj.words"><br>翻译内容结果: <input type="text" v-model="translation"></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="./js/vue.js"></script><script>const boxObj = new Vue({el: '.box',data: {// 要监视的对象obj: {lang: '002',words: '',},// 翻译结果translation: ''},watch: {obj: {deep: true,       // 深度监视// immediate: true,  // 初始化立即执行一次handler方法handler(newValueObj) {// 实现防抖功能，人为制造延迟(400ms)，减轻服务器压力clearTimeout(this.timer)  // 让boxObj挂载timer属性this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate/',params: newValueObj})console.log(res)this.translation = res.data.data}, 400)}}}})</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/680076.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot 2.7.6 集成Activiti 7.1.0.M6 所需的配置文件

SpringBoot 2.7.6 集成Activiti 7.1.0.M6 所需的配置文件

<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 https://…
阅读更多...
课时25：内容格式化_常用符号解读_信息传递

课时25：内容格式化_常用符号解读_信息传递

3.1.1 信息传递 学习目标 这一节&#xff0c;我们从 重定向、管道符、小结 三个方面来学习。 重定向 重定向符号 在shell脚本中有两类常见的重定向符号&#xff1a; 覆盖式重定向&#xff1a;> 表示将符号左侧的内容&#xff0c;以覆盖的方式输入到右侧文件中< 表示…
阅读更多...
c# avalonia 实现正方体翻转效果

c# avalonia 实现正方体翻转效果

在Avalonia中要实现一个正方体的翻转效果&#xff0c;需要利用动画和变换的功能&#xff0c;但由于Avalonia主要是2D UI框架&#xff0c;对3D支持有限。你可以通过2D的方式来近似模拟3D翻转的效果&#xff0c;或者配合像Avalonia3D这样的扩展库来实现。 示例代码大纲如下&#…
阅读更多...
C#系列-C#访问WebAPI（11）

C#系列-C#访问WebAPI（11）

在C#中访问Web API通常涉及使用HttpClient类来发送HTTP请求到Web服务器并接收响应。以下是一个简单的示例&#xff0c;展示了如何使用HttpClient来调用一个Web API并获取JSON响应。 首先&#xff0c;确保你的项目中包含了System.Net.Http命名空间。如果你使用的是.NET Core或.…
阅读更多...
CentOS7下如何安装Nginx

CentOS7下如何安装Nginx

一、Ngxin是什么 Nginx是一个开源的 Web 服务器&#xff0c;具有反向代理、负载均衡、缓存等功能。它可以作为 HTTP 服务器&#xff0c;将服务器上的静态文件&#xff08;如 HTML、图片&#xff09;通过 HTTP 协议展现给客户端&#xff0c;也可以实现动静分离&#xff0c;把动态…
阅读更多...
【后端高频面试题--Nginx篇】

【后端高频面试题--Nginx篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;后端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 后端高频面试题--Nginx篇 什么是Nginx&#xff1f;为什么要用Nginx&#xff1f;为什么Nginx性能…
阅读更多...
如何查看电脑连接的wifi的密码

如何查看电脑连接的wifi的密码

问题 很多时候我们电脑连上wifi之后就把密码忘记了&#xff0c;这个时候如果同事问自己密码是多少&#xff0c;如果作为程序员说不知道是不是感觉有点不好意思&#xff0c;哈哈…… 解决 我使用的是windows电脑&#xff0c;就以windows为例说明下自己是如何查看的。 打开wi…
阅读更多...
SNMP（简单网络管理协议）介绍

SNMP（简单网络管理协议）介绍

简介 作为系统管理员的重要工作之一是收集关于服务器和基础设施的准确信息。有许多工具和选项可用于收集和处理这种类型的信息。其中许多工具都是建立在一种称为SNMP的技术之上。 SNMP代表简单网络管理协议。这是服务器可以共享有关其当前状态的信息的一种方式&#xff0c;也…
阅读更多...
c# Avalonia 伪类 Pseudo Classes 改变样式

c# Avalonia 伪类 Pseudo Classes 改变样式

在Avalonia UI框架中&#xff0c;伪类是一种选择器&#xff0c;它们用于在XAML样式中更改控件的视觉状态&#xff0c;而不更改其逻辑状态。伪类经常用于描述控件的特定状态&#xff0c;如激活、禁用、焦点等&#xff0c;并且可以根据这些状态应用不同的样式规则。 使用伪类时&a…
阅读更多...
学习数据结构和算法的第7天

学习数据结构和算法的第7天

线性表 **线性表(linear list&#xff09;&#xff1a;**是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直…
阅读更多...
FAST角点检测算法

FAST角点检测算法

FAST&#xff08;Features from Accelerated Segment Test&#xff09;角点检测算法是一种快速且高效的角点检测方法。它通过检测每个像素周围的连续像素集合&#xff0c;确定是否为角点。以下是 FAST 角点检测算法的基本流程&#xff1a; FAST 角点检测算法的基本过程主要包括…
阅读更多...
2024年华为OD机试真题-测试用例执行计划-Python-OD统一考试（C卷）

2024年华为OD机试真题-测试用例执行计划-Python-OD统一考试（C卷）

题目描述： 某个产品当前迭代周期内有N个特性（ F1,F2,.......FN）需要进行覆盖测试，每个特性都被评估了对应的优先级，特性使用其ID作为下标进行标识。 设计了M个测试用例（T1,T2......,TM ），每个用例对应了一个覆盖特性的集合，测试用例使用其ID作为下标进行标识，测试用例…
阅读更多...
Dubbo集成Zookeeper embbed模式

Dubbo集成Zookeeper embbed模式

为了简化应用支持服务方便的分合&#xff0c;使用Zookeeper embbed模式。集成Zookeeper比较容易&#xff0c;使用starter或自己写代码都可以。但是由于集成了Dubbo&#xff0c;每次启动时都会发现zookeeper没有启动就开始报错退出&#xff0c;但是确是已经集成了。 于是只能翻…
阅读更多...
精读《Web Components 的困境》

精读《Web Components 的困境》

本期精读的文章是&#xff1a;The broken promise of Web Components 以及对这篇文章的回应: Regarding the broken promise of Web Components 1 引言 我为什么要选这篇文章呢&#xff1f; 就在前几天的 Google I/O 2017 上, Polymer 正式发布了 Polymer 2.0 版本. 来看…
阅读更多...
HTTP基本概念-HTTP 是什么?

HTTP基本概念-HTTP 是什么?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 是什么? HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer Protocol。 能否详细解释「超文本传输协议」? HTTP 的名字「超文本协议传输」&#xff0c;它可以拆成三个部分: 超文本传输…
阅读更多...
pycharm控制STM32F103ZET6拍照并上位机接收显示（OV7670、照相机、STM32、TFTLCD）

pycharm控制STM32F103ZET6拍照并上位机接收显示（OV7670、照相机、STM32、TFTLCD）

基于STM32的照相机 准备工作最终效果一、下位机1、主函数2、OV7670初始化 二、上位机1、控制拍照2、接收图片数据 三、资源获取 准备工作 一、硬件及片上资源: 1,串口1(波特率:921600,PA9/PA10通过usb转ttl连接电脑&#xff0c;或者其他方法)上传图片数据至上位机 2,串口2(波特…
阅读更多...
Java语法学习反射

Java语法学习反射

Java语法学习反射 大纲 基本介绍class的介绍 具体案例 1. 基本介绍 流程图&#xff08;程序在计算机的阶段&#xff09; 反射的主要的类 这个提高效率不大 2. class的介绍 对于第三点&#xff1a;首先类只会加载一次&#xff0c;得到的class的对象&#xff0c;也只有一…
阅读更多...
JDK 动态代理

JDK 动态代理

Java 9 为何要将 String 的底层实现由 char[] 改成了 byte[] Java 9将String底层实现从char[]改成byte[]的原因主要有以下几点&#xff1a; 节省内存空间&#xff1a;在Java 9之前&#xff0c;String的底层实现使用char[]来存储字符数据。每个char占用2个字节&#xff08;16位…
阅读更多...
【算法训练营】等式，道路升级（c++,python实现）

【算法训练营】等式，道路升级（c++,python实现）

等式 问题描述 有n个变量和m个“相等”或“不相等”的约束条件&#xff0c;请你判定是否存在一种赋值方案满足所有m个约束条件。 输入格式 第一行一个整数T&#xff0c;表示数据组数。 接下来会有T组数据&#xff0c;对于每组数据&#xff1a; 第一行是两个整数n,m&#xff0c;…
阅读更多...
Linux第52步_移植ST公司的linux内核第4步_关闭内核模块验证和log信息时间戳_编译_并通过tftp下载测试

Linux第52步_移植ST公司的linux内核第4步_关闭内核模块验证和log信息时间戳_编译_并通过tftp下载测试

1、采用程序配置关闭“内核模块验证” 默认配置文件“stm32mp1_atk_defconfig”路径为“arch/arm/configs”; 使用VSCode打开默认配置文件“stm32mp1_atk_defconfg”&#xff0c;然后将下面的4条语句屏蔽掉&#xff0c;如下&#xff1a; CONFIG_MODULE_SIGy CONFIG_MODULE_…
阅读更多...
最新文章

Copyright @ 2022~2023