Vue 2

1. 基本语法

1.0 基本模版
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style></style><script src="../js/vue.js"></script>
</head>
<body><div id="root"></div><script>const vm = new Vue({el: '#root',data: {},methods: {},})</script>
</body>
</html>
1.1 插值
1.1.1 data 的使用
1.1.1.1 函数式
//对象式可能会造成多个对象用的data是同一个,当某个人改变了data里的数据,其他人也会跟着变,而函数式可以避免,这就是为什么组件
//的data都是使用函数式的形式
data: (){return {XX: XX,}
}
函数式的妙用(样式绑定)
<!-- style作为对象绑定 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>.basic {height: 100px;width: 100px;border: 1px solid black;}.class1 {background-color: skyblue;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="root"><div v-bind:class="style"></div></div><script>const vm = new Vue({el: '#root',data: {style: {basic: true,class1: false,}},methods: {},})</script>
</body>
</html>
<!-- style作为字符串绑定 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>.basic {height: 100px;width: 100px;border: 1px solid black;}.class1 {background-color: skyblue;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="root"><div v-bind:class="style1"></div><button @click="addBasic">加上basic样式</button><button @click="addClass1">加上.class1样式</button></div><script>const vm = new Vue({el: '#root',data: {style1: ''},methods: {addBasic() {this.style1 += ' basic'},addClass1() {this.style1 += ' class1'}},})</script>
</body>
</html>
<!-- style 作为数组绑定 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>.basic {height: 100px;width: 100px;border: 1px solid black;}.class1 {background-color: skyblue;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="root"><div :class="style1"></div><button @click="addStyle">添加所有样式</button></div><script>const vm = new Vue({el: '#root',data: {style1: []},methods: {addStyle() {this.style1.push('class1', 'basic')}},})</script>
</body>
</html>
1.1.1.2 对象式
data: {XX: XX,
}

1.1.1 插值符号 : {{属性}}

1.2 事件
1.2.1 事件说明
<!-- 方法会传event对象 -->
<div id="root"><button @click="showInfo()"></button>
</div><script>const vm = new Vue({el: '#root',data: {},methods: {showInfo() {console.log(event);},},})
</script>
1.2.2 事件修饰符

.stop:阻止事件的冒泡

.prevent:阻止事件的默认行为

.capture:使用事件的捕获模式(得加在父亲身上), 父亲先触发事件,儿子后触发

.self:只有当触发同一(!!)事件的元素是加了这个修饰的属性才触发(用在父亲身上)

.passive:立即执行时间的默认行为,不用等回调完函数

.once:只执行一次

<!-- 冒泡事件 -->
<div id="root"><!-- stop阻止事件的冒泡 --><div @click="showAlertDiv()"><!-- <button @click="showAlert()">按我</button> --><button @click.stop="showAlert()">按我</button></div><!-- prevent 阻止了a的跳转和颜色变化--><!-- <a @click="showAlert()" v-bind:href="url">超链接</a> --><a @click.prevent="showAlert()" v-bind:href="url">超链接</a><!-- capture使用事件的捕获模式(得加在父亲身上), 父亲先触发事件,儿子后触发 --><div @click.capture="showAlertDiv()"><button @click="showAlert()">按我</button></div><!-- self可以让只有当触发同一(!!)事件的元素是加了这个修饰的属性才触发(用在父亲身上) --><div @click.self="showAlert()"><button @click="showAlert()">按我</button></div><!-- passive立即执行事件的默认行为,不等回调完函数 --><br><a @click="testPassive()" href="https://www.baidu.com">点我测试passive</a>
</div>
<script>const vm = new Vue({el: '#root',data: {url: 'https://www.baidu.com'},methods: {showAlert() {alert("警告")},showAlertDiv() {console.log("儿子触发啦")alert("div警告")},testPassive() {for (let i = 0; i < 10000; i++) {console.log('@')}}     }})
</script>
1.2.3 按键事件
<div id="root"><!-- @keyup.[键] / @keydown.[键]--><!-- 常用按键别名(可以连写) enter, delete, esc, space, tab, up, down, left, right--><!-- 空格输出内容 --><input @keydown.space="method($event)" type="text"><!-- 也可以通过keyboard触发 --><input @keydown.space="method()" type="text">
</div>
<script>const vm = new Vue({el: '#root',data: {},methods: {method(e) {console.log(e.keyCode)}}})
</script>
1.2 常用指令
1.2.1 v-bind 和 v-model

二者一般用来绑定标签的属性

v-bind : 单向绑定

v-model : 双向绑定 (绑定表单的name

  1. 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
  2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
  3. 单个复选框, 绑定的是boolean类型
  4. 多个复选框, 绑定的是数组
  5. select单选对应字符串,多选对应也是数组
<!-- v-model在表单的使用 -->
<div id="root"><form @submit.prevent="submit">账号:<input type="text" name="username" v-model="username"><br>密码:<input type="password" name="pwd" v-model="pwd"><br>性别:<input type="radio" name="sex" v-model="sex" value=""><input type="radio" name="sex" v-model="sex" value=""><br>年龄:<input type="number" name="age" v-model.number="age"><br>爱好:<input type="checkbox" name="hobby" value="喝酒" v-model="hobby">喝酒<input type="checkbox" name="hobby" value="抽烟" v-model="hobby">抽烟<input type="checkbox" name="hobby" value="烫头" v-model="hobby">烫头<br>备注:<br><textarea rows="50" cols="50" v-model.lazy="content" name="textarea"></textarea><br><input type="submit"></form>
</div><script>const vm = new Vue({el: '#root',data: {username:'',pwd: '',content:'',age: '',sex:'',hobby: []},methods: {submit() {console.log('提交了')console.log(JSON.stringify(this._data))}}})</script>
1.2.2 v-text 和 v-html

v-text 和 v-html 绑定某个vue变量,输出信息到页面上

<div id="root"><!-- v-text无法识别标签 --><div v-text="text"></div>用户输入渲染text<input type="text" id="text" @keyup.enter="submitText"><!-- v-html能识别标签 --><div v-html="html"></div>用户输入渲染html<input type="text" id="html" @keyup.enter="submitHtml">
</div><script>const vm = new Vue({el: '#root',data: {text: '',html: '',},methods: {submitText() {console.log(document.getElementById("text").value)this.text = document.getElementById("text").value;},submitHtml() {console.log(document.getElementById("html").value)this.html = document.getElementById("html").value;}}})
</script>
1.2.3 v-on

绑定事件,可以用 “@[事件]” 简写

1.2.4 v-cloak
<style>/* v-cloak配合style可以解决网速慢给用户显示出为加载的插值语法等信息 */[v-cloak] {display: none;}
</style>
1.2.5 v-once

v-once 绑定某个标签,让该标签只能在Vue创建时渲染,后续则无法渲染

<div id="root"><!-- 只在初次渲染时动态渲染 --><div v-once>{{n}}</div><div>{{n}}</div><button @click="n++"></button>
</div>
1.2.6 v-pre

v-pre 不让 Vue 进行解析,有利于增加页面渲染速度

<div id="root"><!-- v-pre直接不让vue去解析 --><div v-pre>{{n}}</div><div>{{n}}</div>
</div>
1.2.7 自定义指令

注意点:

	1.  自定义的指令作为方法写在 directives 里2.   在标签使用自定义指令时,需要加 v-[自定义指令],但在定义时无需 
  1. 自定义指令有 函数式对象式 两种
1.2.7.1 函数式
<div id="root"><div>{{n}}</div>放大十倍 :<div id="tenTimes" v-big="10 * n"></div>
</div>
<script>const vm = new Vue({el: '#root',data: {n: 1,},directives: {big(element, binding) {console.log(element)console.log(binding)element.innerText = binding.value;}}})
</script>
1.2.7.2对象式
<div id="root"><!-- 引入:一开页面自动获取焦点 --><input type="text" v-big>
</div>
<script>const vm = new Vue({el: '#root',data: {},directives: {big: {// 成功绑定时bind() {console.log('bind')},// 元素插入页面时inserted(element, binding) {console.log('insert')element.focus();},// 模版重新解析时update() {console.log('update')element.focus();}}}})
</script>
1.3 属性
1.3.1 计算属性
<!-- 引入:两个输入框输入姓或名,下面输出姓名 -->
<div id="root">姓:<input type="text" v-model="firstName"><br>名:<input type="text" v-model="lastName"><br>姓名:<span>{{fullName}}</span>
</div><script>const vm = new Vue({el: '#root',data: {firstName: '',lastName: '',},//这种是简写形式(只有当只使用 get()方法时,才可以简写)computed: {fullName() {return this.firstName + this.lastName}}//完整版/*computed: {fullName {//get在初次读取fullName和fullName依赖的数据被改变时方可调用get() {return this.firstName + this.lastName}//set的调用只有在fullName被改变时才会调用,但是fullName依赖的数据发生变化引起的fullName的改变不会//调用set()set() {}}}*/})
</script>
1.3.2 监听属性
<div id="root"><div>今天天气很{{isHot ? "炎热" : "凉爽"}}</div><button @click="isHot = !isHot"></button>
</div><script>const vm = new Vue({el: '#root',data: {isHot: true,},//简写 (只有当只使用handler()时可以简写)watch: {isHot(newValue, oldValue) {console.log(oldValue)console.log(newValue)}}//这是完整版的/*watch : {isHot : {handler(newValue, oldValue) {console.log(oldValue);console.log(newValue);},}}}*/})
</script>
1.3.3 深度监视
<div id="root"><div>{{person.id}}-{{person.name}}</div><button @click="changeName">改对象属性</button><br><button @click="changeNum">改正常属性</button>
</div>
<script>const vm = new Vue({el: '#root',data: {person: {id : 1,name : '陈庆威'},num : 1},methods: {changeName() {this.person.name = Math.random()},changeNum() {this.num = Math.random()}},// 正常的watch是监视不到对象内容的变化的watch: {//可以通过'对象.属性'监视// 'person.name'() {//     alert("我被改变了")//     console.log("我被改变了1")// },// 开启深度监视person: {deep: true,handler() {alert("我被改变了")console.log("我被改变了2")}},num() {alert("我被改变了")console.log("我被改变了")}}})
</script>
1.4 条件渲染
1.4.1 v-if 和 v-show
  1. v-if 和 v-show 绑定的变量需要 布尔型
  2. v-if 和 v-show 对比:
    v-if 会直接操作节点(添加或删除)
    v-show会直接给标签加上display:none,在频繁操作中更有优势
<div id="root"><div v-if="isCool">{{weatherStr}}</div><div v-else-if="isHot">{{weatherStr}}</div><div v-if="isCommon">{{weatherStr}}</div><!-- <div v-show="isCool">{{weatherStr}}</div><div v-show="isHot">{{weatherStr}}</div><div v-show="isCommon">{{weatherStr}}</div> --><button @click="changeWeather()"></button>
</div>
<script>const vm = new Vue({el: '#root',data: {weather : ['凉爽', '炎热', '一般'],weatherStr: '',isCool : false,isHot : false,isCommon : false,},methods: {changeWeather() {let randomNum = Math.floor(Math.random() * 3);//0 1 2this.isCool = randomNum == 0;this.isHot = randomNum == 1;this.isCommon = randomNum == 2;this.weatherStr = this.weather[randomNum];}},computed : {},watch : {}})
</script>
  1. 若要使用 if -> else -if -> else 的结构,需要将这些标签连着写,否则会报错
<div v-if="isCool">{{weatherStr}}</div>
<div v-else-if="isHot">{{weatherStr}}</div>
<div v-else="isCommon">{{weatherStr}}</div>
  1. 操作多个元素
<template v-if="true"><div></div><div></div><div></div>
</template>
1.5 列表渲染
1.5.1 v-for
<div id="root"><!-- 数组 --><ul><li v-for="a in arr" :key="arr.index">{{a}}</li></ul><!-- 对象 --><ul><li v-for="a in object" :key="object.index">{{a}}</li></ul><!-- 字符串 --><ul><li v-for="a in str" :key="arr.index">{{a}}</li></ul><!-- 指定次数 --><ul><li v-for="a in 5">{{a}}</li></ul>
</div><script>const vm = new Vue({el: '#root',data: {arr: [1, 2, 3, 4],object: {id: 1,name: '陈庆威',age: 29,},str: '123',},})
</script>
1.5.2 key的原理
 <!-- 重点:虚拟Dom和真实Dom的理解、Diff算法、节点复用 -->
<div id="root"><ul><!-- 以index作为key输入框会有问题 --><!-- <li v-for="(a) in objectArr" :key="objectArr.index">{{a.id}}-{{a.name}}-{{a.age}}<input type="text"></li> --><!-- 以唯一键为key更有效率(节点复用), 不会出现问题 --><li v-for="(a) in objectArr" :key="a.id">{{a.id}}-{{a.name}}-{{a.age}}<input type="text"></li></ul><button @click="addElementHead">向头添加</button><button @click="addElementTail">向尾添加</button>
</div><script>const vm = new Vue({el: '#root',data: {objectArr: [{id: 1, name: '小王', age: 20},{id: 2, name: '小陈', age: 21},{id: 3, name: '小黄', age: 22},]},methods: {addElementHead() {this.objectArr.unshift({id: 4, name: '小狗', age: 23})},addElementTail() {this.objectArr.push({id: 4, name: '小狗', age: 23});}}})
</script>
1.5.3 列表过滤
<!-- 场景:用户输入姓名,下面显示模糊搜索的结果-->
<div id="root">姓名检索:<input type="text" v-model:value="keyword"><ul><li v-for="p in filterArr" :key="p.id">{{p.id}}-{{p.name}}</li></ul>
</div><script>const vm = new Vue({el: '#root',data: {persons: [{id:'001', name:'周建军'},{id:'002', name:'周欣欣'},{id:'003', name:'黄建建'},{id:'004', name:'黄欣欣'},],keyword: ''},computed: {filterArr: {get() {return this.persons.filter((p) => {return p.name.indexOf(this.keyword) > -1})}}}})
</script>

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

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

相关文章

Python Flask 使用SQLAlchemy实现ORM管理

Python基础学习: Pyhton 语法基础Python 变量Python控制流Python 函数与类Python Exception处理Python 文件操作Python 日期与时间Python Socket的使用

RestTemplate的异常重试机制

一、添加Spring Retry依赖 如果你使用Maven&#xff0c;可以在pom.xml中添加以下依赖&#xff1a; <dependency><groupId>org.springframework.retry</groupId><artifactId>spring-retry</artifactId><version>2.0.2</version> &l…

【Nginx系列】分发算法

文章目录 一、分发算法介绍二、nginx集群默认算法三、nginx业务服务器状态四、nginx集群默认算法测试实验环境实验拓扑4.1、轮询算法4.2、基于权重4.3、基于ip_hash分发4.4、基于url的hash &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界…

【启明智显方案分享】ESP32-S3与GPT AI融合的智能问答嵌入式设备应用解决方案

一、引言 随着物联网&#xff08;IoT&#xff09;和人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;嵌入式设备正逐渐变得智能化。本解决方案是启明智显通过结合ESP32-S3的低功耗、高性能特性和GPT&#xff08;Generative Pre-trained Transformer&#xff09;…

快手AI算法岗,50W年包羡慕到流泪

今天在脉脉上看到一个应届毕业生offer选择的帖子&#xff0c;简直羡慕到流泪。 刚毕业就拿到了两大公司的AI算法岗的offer&#xff0c;而且薪资待遇都非常不错&#xff0c;只能说&#xff1a;优秀的人到哪里都是榜样。 先看下这两个offer。 第一个是中信银行的AI算法。 年包…

改进YOLOv8 | 主干网络篇 | YOLOv8 更换主干网络之 StarNet | 《重写星辰⭐》

本改进已集成到 YOLOv8-Magic 框架。 论文地址:https://arxiv.org/abs/2403.19967 论文代码:https://github.com/ma-xu/Rewrite-the-Stars 最近的研究引起了人们对“星形运算”(按元素乘法)在网络设计中未被充分利用的潜力的关注。虽然直观的解释很多,但其应用的基本原理…

网络的下一次迭代:AVS 将为 Web2 带去 Web3 的信任机制

撰文&#xff1a;Sumanth Neppalli&#xff0c;Polygon Ventures 编译&#xff1a;Yangz&#xff0c;Techub News 本文来源香港Web3媒体&#xff1a;Techub News AVS &#xff08;主动验证服务&#xff09;将 Web2 的规模与 Web3 的信任机制相融合&#xff0c;开启了网络的下…

OpenCV 的模板匹配

OpenCV中的模板匹配 模板匹配&#xff08;Template Matching&#xff09;是计算机视觉中的一种技术&#xff0c;用于在大图像中找到与小图像&#xff08;模板&#xff09;相匹配的部分。OpenCV提供了多种模板匹配的方法&#xff0c;主要包括基于相关性和基于平方差的匹配方法。…

前端数据模拟Mock.js

新建mock-demo的项目&#xff0c;安装npm install mockjs 新建index.js //引入mockjs import Mock from mockjs //设置延迟时间 // Mock.setup({ // timeout:4000 // }) //使用mockjs模拟数据 Mock.mock(/product/search,{"ret":0,"data":{"mtim…

动手学深度学习33 单机多卡并行

单机多卡并行 更多的芯片 https://courses.d2l.ai/zh-v2/assets/pdfs/part-2_2.pdf 多GPU训练 https://courses.d2l.ai/zh-v2/assets/pdfs/part-2_3.pdf 当transformer模型很大&#xff0c;有100GB的时候只能用模型并行。 数据并行&#xff0c;拿的参数是完整的&#xff1f…

JavaWeb5 SpringBoot+HTTP协议

Spring Spring Boot 非常快速构建应用程序&#xff0c;简化开发 &#xff08;1&#xff09;创建Springboot工程&#xff0c;勾选web开发依赖 创建好的目录&#xff0c;并将没用多余的删掉了 &#xff08;2&#xff09;定义请求处理类&#xff0c;并添加方法 创建请求处理类…

机器学习分类及算法

1. 深度学习 1.1学习算法 1.2基本术语和概念 1.3机器学习分类常用算法 1.3.1线性回归 1.3.2逻辑回归 1.3.3决策树 1.3.4朴素贝叶斯 1.3.5支持向量机SVM 1.3.6K-最近临邻KNN 还有K-均值&#xff08;k-means&#xff09;、随机森林、降维、人工神经网络等 1.4超参数和验证集 1.4.…

OPenCV中绘制多条多边形曲线函数polylines的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 绘制多条多边形曲线 原型1 void cv::polylines ( InputOutputArray img, InputArrayOfArrays pts, bool isClosed, const Scalar & color…

晨持绪科技:抖音网店怎么做有前景

在数字时代的浪潮中&#xff0c;抖音平台以其独特的魅力和庞大的用户基础成为电商的新阵地。开设一家有前景的抖音网店&#xff0c;不仅需要对市场脉搏有敏锐的洞察力&#xff0c;还需融合创新思维与数据驱动的营销策略。 明确定位是成功的先声。深入分析目标消费群体的需求与偏…

SQL 窗口函数

1.窗口函数之排序函数 RANK, DENSE_RANK, ROW_NUMBER RANK函数 计算排序时,如果存在相同位次的记录,则会跳过之后的位次 有 3 条记录排在第 1 位时: 1 位、1 位、1 位、4 位…DENSE_RANK函数 同样是计算排序,即使存在相同位次的记录,也不会跳过之后的位次 有 3 条记录排在…

2024.6.12 作业 xyt

今日课堂练习&#xff1a;vector构造函数 #include <iostream> #include <vector> using namespace std;void printVector(vector<int> &v) {vector<int>::iterator iter;for(iterv.begin(); iter ! v.end(); iter){cout << *iter <<…

Unity射击游戏开发教程:(27)创建带有百分比的状态栏

创建带有弹药数和推进器百分比的状态栏 在本文中,我将介绍如何创建带有分数和百分比文本的常规状态栏。 由于 Ammo Bar 将成为 UI 的一部分,因此我们需要向 Canvas 添加一个空的 GameObject 并将其重命名为 AmmoBar。我们需要一个文本和两个图像对象,它们是 AmmoBar 的父级。…

大模型网信办备案全网最详细说明(附附件)

本文共分为以下几个章节 一、大模型算法备案的强制性 二、生成式人工智能(大语言模型)安全评估要点 三、大模型备案必备材料重点说明 四、大模型备案填报流程 五、大模型备案时间成本对比 六、备案建议 附录、过程性材料 一、大模型算法备案的强制性 1、强制要求备案 …

ubuntu certbot 生成https ssl证书

一、安装certbot应用 sudo apt update sudo apt install certbot python3-certbot-nginx二、生成证书 # 泛域名&#xff1a; certbot certonly -d *.你的主域名 --manual --preferred-challenges dns# 主域名&#xff1a; certbot certonly -d 你的主/子域名 --manual --pref…

Linux C语言:多级指针(void指针和const)

一、多级指针 把一个指向指针变量的指针变量&#xff0c;称为多级指针变量对于指向处理数据的指针变量称为一级指针变量指向一级指针变量的指针变量称为二级指针变量 1、二级指针变量的说明形式 <数据类型> ** <指针名> &#xff1b; 一张图理解二级指针 2、多…