vue基础（三）

常用指令

1. v-bind

固定绑定与动态绑定：

语法：
        标准语法：v-bind:属性="动态数据"
        简写语法：:属性="动态数拓"

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- v-bind动态属性数据绑定 --><!-- 固定 --><!-- <img src="http://www.mobiletrain.org/images_index/right-fixed-face.png" alt=""> --><!-- src属性中的数据它是通过data数据源中得到的 -- 动态 --><!-- 语法：标准语法：v-bind:属性="动态数据"简写语法：:属性="动态数拓"--><img v-bind:src="src" alt=""><img :src="src" alt=""></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {src: 'http://www.mobiletrain.org/images_index/right-fixed-face.png'}})</script></body></html>

2. v-for

概述：对一组数组或对象的选项列表进行渲染。

v-for指令需要使用 (item,index) in 数组或对象 形式的特殊语法，同时还需要指定key值,key的作用在vue进行新旧数据比对渲染页面里，如果有key值会提升比对性能，加快渲染，key使用唯一的值来赋值。

vue2中小括号可以写，也可以不写，在vue3中一定要写小括号

注意：

  1. vue2中如果一个标签中同时有v-if和v-for，则v-for的优先级高于v-if，所以在vue2中不推荐两者在一个标签中
  2. vue3中v-if优先级高于v-for
  3. v-for="(元素,索引) in/of 数组"
  4. v-for="(元素,键名,索引) in/of 对象"
  5. v-for，建议给循环项每个添加一个key来作标识，用于提升性能,key值，一定要唯一不重复的，不太建议使用循环的索引当作key值，一般在和后台请求数据时，要求后台提供一个唯一的id给我们
<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- <li v-for="(item,index) in user">{{index}} -- {{item}}</li> --><!-- <li v-for="item,index in user">{{index}} -- {{item}}</li> --><li v-for="item,index in user" :key="item.id">{{item.name}}</li><!-- 循环对象 --><!-- <div v-for="item,key,index in user" :key="key">{{index}} -- {{key}} -- {{item}}</div> --></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {// user: ['张三', '李四', '王五']user: [{ id: 2, name: '李四' }, { id: 1, name: '张三' }]// user: { id: 1, name: '张三' } }})</script></body></html>

3. v-on

3.1 v-on事件

语法：
        标准语法：v-on:事件名="实现的方法[此方法定义在vue配置中的methods中]"
        简写语法： @事件名="方法"，使用很频繁

注意：

  1. 绑定的方法，它可以写小括号，也可以不写小括号
  2. 绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持
  3. methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向
<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- v-on:事件名="实现的方法[此方法定义在vue配置中的methods中]"v-on使用很频繁 @事件名="方法"绑定的方法，它可以写小括号，也可以不写小括号--><h3>{{num}}</h3><!-- <button v-on:click="clickFn">点击事件</button> --><button @click="clickFn">点击事件</button></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {// 绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持// clickFn: function () {//   console.log('我是一个点击事件');// }num: 100},// 注：methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向methods: {// clickFn: function () {//   console.log('我是一个点击事件');// }// 简写clickFn() {// var _this = thissetTimeout(() => {this.num++console.log('我是一个点击事件');}, 1000);}// 箭头函数 没有作用域，找父级// clickFn: () => {//   console.log(this);//   this.num++//   console.log('我是一个点击事件');// }}})</script></body></html>

3.2 v-on事件对象

概述：

  1. 绑定的方法，它可以写小括号，也可以不写小括号
  2. 如果你绑定方法时，没有写小括号，则vue在解析时，会自动给你映射一个event给绑定方法
  3. 如果你绑定方法时，有写小括号，则需要手动把event对象传过去$event,$event可以传多个， 但是建议只传一个，一般写在第1位或最后1位
<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><h3>{{num}}</h3><!-- 如果你绑定方法时，没有写小括号，则vue在解析时，会自动给你映射一个event给绑定方法 --><!-- <button @click="clickFn">点击事件</button> --><!-- 如果你绑定方法时，有写小括号，则需要手动把event对象传过去$event,$event可以传多个，但是建议只传一个，一般写在第1位或最后1位--><button uname="李四" data-uname="张三" @click="clickFn($event)">点击事件</button><input type="text" @keyup="onEnter"></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {num: 100},methods: {// event可以用它来完成dom数据的获取clickFn(evt) {this.num++// 自定义的需要使用getAttribute方法，简写（evt.target.name）必须使用标签内置属性console.log(evt.target.getAttribute('uname'));console.log(evt.target.dataset.uname)},onEnter(evt) {// 回车键是13if (evt.keyCode === 13) {console.log(evt.target.value);}}}})</script></body></html>

4. todolist

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><input placeholder="请输入内容" type="text" @keyup="onEnter"><hr><ul><!-- 条件渲染 --><li v-if="todos.length===0">无任务</li><li v-else v-for="item,index in todos" :key="item.id"><span>{{item.title}}</span><!-- <span @click="del(item.id)">删除</span> --><span @click="del(index)">删除</span></li></ul></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {todos: []},methods: {onEnter(evt) {if (evt.keyCode === 13) {this.todos.push({// Date.now() 返回自1970年1月1日00:00:00 UTC以来经过的毫秒数id: Date.now(),title: evt.target.value.trim()})evt.target.value = ''}},// del(id) {//   // 删除//   this.todos = this.todos.filter(item => item.id != id)// }del(index) {// splice 可以用来替换/删除/添加数组内某一个值或几个值，该方法会改变初始数组。// 删除 它可以使用 vue中提供的变异方法splice来完成，用此方法它会触发视图更新this.todos.splice(index, 1)}}})</script></body></html>

5. 事件修饰符

多个修饰符，通过点来连接操作 用来处理事件的特定行为。

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- 事件修饰符 --><!-- <input placeholder="请输入内容" type="text" @keyup.enter="onEnter" > --><!-- 多个修饰符，通过点来连接操作 用来处理事件的特定行为 --><!-- @keyup.alt.112：alt键+F1键 --><input placeholder="请输入内容" type="text" @keyup.alt.112="onEnter" ><hr><ul><!-- 条件渲染 --><li v-if="todos.length===0">无任务</li><li v-else v-for="item,index in todos" :key="item.id"><!-- once事件只绑定一次 --><a @click.prevent.once="showDetail" href="http://www.baidu.com">{{item.title}}</a><!-- <span @click="del(item.id)">删除</span> --><span @click="del(index)">删除</span></li></ul></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {todos: []},methods: {showDetail() {console.log(1111);},onEnter(evt) {this.todos.push({id: Date.now(),title: evt.target.value.trim()})evt.target.value = ''},// del(id) {//   // 删除//   this.todos = this.todos.filter(item => item.id != id)// }del(index) {// 删除 它可以使用 vue中提供的变异方法splice来完成，用此方法它会触发视图更新this.todos.splice(index, 1)}}})</script></body></html>

6. 动态样式

6.1 class

注意：

  1. class和style都属于DOM属性，所以在vue中都用:class和:style表示

  2. 对象: {key它就是样式名称:布尔值【true生效，false不生效】} -- 一般用于开关显示的样式,不太适合添加新的属性样式

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script><style>.active {color: red;}.font30 {font-size: 30px;}</style>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- class样式的动态添加，对象和数组方式class和style都属于DOM属性，所以在vue中都用:class和:style表示对象: {key它就是样式名称:布尔值【true生效，false不生效】} -- 一般用于开关显示的样式,不太适合添加新的属性样式--><!-- <div :class="titleClass">我是一个标题</div><button @click="addClass">添加样式</button> --><!-- 数组:[元素样式名称]一般对于追加新样式，使用数组--><div :class="titleStyle">我是一个标题</div><button @click="addStyle">添加样式</button></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {titleClass: { active: false },titleStyle: []},methods: {addClass() {// 点击切换// this.titleClass.active = !this.titleClass.active// this.titleClass.active = true//这里执行的时候会刷新数据，会顺带执行了下一句// this.titleClass.font30 = true//注意，把上一句注释，只执行这一句的时候，样式不会生效，因为这里是是新加的属性，并没有被劫持// console.log(this.$data);// Vue方法// 动态给对象添加成员属性（Vue中的方法）// this.$set(this.titleClass, 'font30', true)// let obj =  Object.assign(参数1地址和返回值地址是同一个地址)},addStyle() {// 给数组添加元素，元素就是样式名称，这样它会就追加样式// push unshift shift pop splice sort reverse 调用时都会让视图更新this.titleStyle.push('active')this.titleStyle.push('font30')}}})</script></body></html>

6.2 style

style样式的动态添加，分为对象和数组方式。

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- style样式的动态添加，对象和数组方式--><!-- 对象--><div :style="{color:'blue',fontSize:'30px'}">我是一个标题</div><!-- 数组--><div :style="[{color:'blue'},{fontSize:'30px'}]">我是一个标题</div><!-- <button @click="addStyle">添加样式</button> --></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {},methods: {}})</script></body></html>

7. input表单

概述：

在没有使用v-model指令时，来通过data数据控制表单项中的值，还是麻烦的，绑定属性和事件来完成 -- 受控组件 v-model它是一个语法糖，value和事件的综合体

<!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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><div><input type="text" v-model="username"></div></div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {username: ''},methods: {setUsername(evt) {this.username = evt.target.value.trim()}}})</script></body></html>

8. 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"><title>vue学习使用</title><!-- 第1步： 引入vue库文件 --><script src="./js/vue.js"></script>
</head><body><!-- 第2步：挂载点 --><div id="app"><!-- v-model修饰符 --><!-- 延时更新数据源中的数据 光标移开才会改变数据 --><!-- <input v-model.lazy="title"> --><!-- 去空格 trim --><!-- <input v-model.trim="title"> --><!-- 转为数值 number --><input type="number" v-model.number="n1">+<input type="number" v-model.number="n2">= {{n1+n2}}</div><!-- 第3步：实例化vue --><script>const vm = new Vue({el: '#app',data: {title: '',n1: 1,n2: 2}})</script></body></html>

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

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

相关文章

IDEA中Resolving Maven dependencies卡着不动解决方案

IDEA中Resolving Maven dependencies卡着不动解决方案

一、修改settings.xml Maven配置阿里云仓库主要通过修改Maven的settings.xml文件来实现‌。以下是具体步骤： ‌1、找到settings.xml文件‌： 通常位于Maven安装目录下的conf文件夹中，或者在用户目录下的.m2文件夹中（如果用户自定义了settings.xml的位置）。 2、‌编辑se…
阅读更多...
fastchat 部署大模型

fastchat 部署大模型

大模型实战--Llama3.1大模型部署及启动Web UI、OpenAI API实操 - 简书一、背景 随着人工智能技术的飞速发展&#xff0c;大模型&#xff08;Large Language Models, LLMs&#xff09;已成为自然语言处理领域的核心工具。这些模型以其强大的语言理解和生成能力&#xff0c;...ht…
阅读更多...
【R语言】卡方检验

【R语言】卡方检验

一、定义 卡方检验是用来检验样本观测次数与理论或总体次数之间差异性的推断性统计方法&#xff0c;其原理是比较观测值与理论值之间的差异。两者之间的差异越小&#xff0c;检验的结果越不容易达到显著水平&#xff1b;反之&#xff0c;检验结果越可能达到显著水平。 二、用…
阅读更多...
【deepSeek R1】Ollama 更改模型安装位置 以及应用安装位置

【deepSeek R1】Ollama 更改模型安装位置 以及应用安装位置

【deepSeek R1】Ollama 更改模型安装位置 以及应用安装位置 本地版部署deepSeek R1 可以参考文章 3分钟教你搭建属于自己的本地大模型 DeepSeek R1 Ollama 是一个开源工具&#xff0c;旨在帮助用户轻松在本地计算机上运行、部署和管理大型语言模型&#xff08;LLMs&#xff09;…
阅读更多...
从结构体成员指针反推结构体地址：rt_container_of 宏解析

从结构体成员指针反推结构体地址：rt_container_of 宏解析

文章目录 rt_container_of 宏概述步骤1&#xff1a;计算成员偏移量步骤2&#xff1a;将成员指针转换为字节指针步骤3&#xff1a;计算结构体的地址步骤4&#xff1a;返回结构体指针 代码示例宏的内部实现解析 rt_container_of 宏概述 rt_container_of 宏是一个非常实用的宏定义…
阅读更多...
dijkstra算法类型题解

dijkstra算法类型题解

dijkstra算法&#xff08;有权图&#xff0c;无权图&#xff09;&#xff1a; 带权路径长度——当图是带权图时&#xff0c;一条路径上所有边的权值之和&#xff0c;称为该路径的带权路径长度 初始化三个数组&#xff0c;final标记各顶点是否已找到最短路径&#xff0c;dist最…
阅读更多...
6.Centos7上部署flask+SQLAlchemy+python+达梦数据库

6.Centos7上部署flask+SQLAlchemy+python+达梦数据库

情况说明 前面已经介绍了window上使用pycharm工具开发项目时，window版的python连接达梦数据库需要的第三方包。 这篇文章讲述，centos7上的python版本连接达梦数据库需要的第三方包。 之前是在windows上安装达梦数据库的客户端，将驱动包安装到windows版本的python中。（开…
阅读更多...
国产化创新 守护开放边界网络安全

国产化创新 守护开放边界网络安全

当今数字化浪潮的席卷下&#xff0c;企业、医院、政府部门等各类机构的信息化建设正以前所未有的速度推进。 在这个数字化转型的关键时期&#xff0c;尤其是在涉及国家核心利益和敏感数据的领域&#xff0c;我们不仅要追求技术的先进性&#xff0c;更要确保安全性和自主可控性…
阅读更多...
复原IP地址(力扣93)

复原IP地址(力扣93)

有了上一道题分割字符串的基础&#xff0c;这道题理解起来就会容易很多。相同的思想我就不再赘述&#xff0c;在这里我就说明一下此题额外需要注意的点。首先是终止条件如何确定&#xff0c;上一题我们递归到超过字符串长度时&#xff0c;则说明字符串已经分割完毕&#xff0c;…
阅读更多...
libtorch的c++，加载*.pth

libtorch的c++，加载*.pth

一、转换模型为TorchScript 前提&#xff1a;python只保存了参数&#xff0c;没存结构 要在C中使用libtorch&#xff08;PyTorch的C接口&#xff09;&#xff0c;读取和加载通过torch.save保存的模型&#xff08; torch.save(pdn.state_dict()这种方式&#xff0c;只保存了…
阅读更多...
postgresql 游标（cursor）的使用

postgresql 游标（cursor）的使用

概述 PostgreSQL游标可以封装查询并对其中每一行记录进行单独处理。当我们想对大量结果集进行分批处理时可以使用游标&#xff0c;因为一次性处理可能造成内存溢出。 另外我们可以定义函数返回游标类型变量&#xff0c;这是函数返回大数据集的有效方式&#xff0c;函数调用者…
阅读更多...
Linux 快速对比两个文件的差异值

Linux 快速对比两个文件的差异值

Linux 快速对比两个文件的差异值&#xff08;无需排序、直接输出&#xff09; 在日常开发或数据处理中&#xff0c;若需快速对比两个文本文件中的差异值&#xff08;仅保留第一个文件中的独有内容&#xff09;&#xff0c;Linux 系统提供了两种高效方法。以下是具体操作及适用…
阅读更多...
【Pytorch实战教程】PyTorch中的Dataset用法详解

【Pytorch实战教程】PyTorch中的Dataset用法详解

PyTorch中的Dataset用法详解 在深度学习中，数据是模型训练的基石。PyTorch作为一个强大的深度学习框架，提供了丰富的工具来处理和加载数据。其中，Dataset类是PyTorch中用于处理数据的重要工具之一。本文将详细介绍Dataset的用法，帮助你更好地理解和使用它。 1. 什么是Dat…
阅读更多...
python:面向对象之魔法方法

python:面向对象之魔法方法

概念&#xff1a;主要是提供一些特殊的功能。 1.__init__方法&#xff1a; 一.不带参数&#xff1a; python中类似__xx__() __init__():初始化对象class Car():def __init__(self):self.color blueself.type suvdef info(self):print(f车的颜色是&#xff1a;{self.color})p…
阅读更多...
python两段多线程的例子

python两段多线程的例子

记录瞬间 其一 # coding:UTF-8 import os import threading from time import ctimedef loop(loops, list): # list存放着每个线程需要处理的文本文件名print(线程 %d 处理的文件列表 %s \n % (loops 1, list))list_len len(list)for i in range(list_len):f open(list[i…
阅读更多...
基于蒙特卡洛思想生成电动汽车充电负荷曲线

基于蒙特卡洛思想生成电动汽车充电负荷曲线

本程序基于蒙特卡洛思想生成电动汽车充电负荷曲线&#xff0c;利用第十一届电工杯所提供的数据&#xff08;充电开始时间&#xff0c;充电电量&#xff0c;充电功率&#xff09;得到一万台电动汽车充电负荷曲线。蒙特卡洛只是解决问题的一种思想&#xff0c;本程序可为其他利用…
阅读更多...
语言月赛 202308【小粉兔做麻辣兔头】题解（AC）

语言月赛 202308【小粉兔做麻辣兔头】题解（AC）

》》》点我查看「视频」详解》》》 [语言月赛 202308] 小粉兔做麻辣兔头 题目描述 粉兔喜欢吃麻辣兔头&#xff0c;麻辣兔头的辣度分为若干级&#xff0c;用数字表示&#xff0c;数字越大&#xff0c;兔头越辣。为了庆祝粉兔专题赛 #1 的顺利举行&#xff0c;粉兔要做一些麻…
阅读更多...
C++20导出模块及使用

C++20导出模块及使用

1.模块声明 .ixx文件为导入模块文件 math_operations.ixx export module math_operations;//模块导出 //导出命名空间 export namespace math_ {//导出命名空间中函数int add(int a, int b);int sub(int a, int b);int mul(int a, int b);int div(int a, int b); } .cppm文件…
阅读更多...
使用redis实现 令牌桶算法 漏桶算法

使用redis实现 令牌桶算法 漏桶算法

流量控制算法&#xff0c;用于限制请求的速率。 可以应对缓存雪崩 令牌桶算法 核心思想是&#xff1a; 有一个固定容量的桶&#xff0c;里面存放着令牌&#xff08;token&#xff09;。每过一定时间&#xff08;如 1 秒&#xff09;&#xff0c;桶中会自动增加一定数量的令牌…
阅读更多...
活动预告 | 解锁 Excel 新境界 —— AI 技术赋能下的数据分析超级引擎！

活动预告 | 解锁 Excel 新境界 —— AI 技术赋能下的数据分析超级引擎！

课程介绍 在 AI 技术的浪潮中&#xff0c;Microsoft Excel 已经焕然一新&#xff0c;它不再仅仅是海量复杂数据的处理中心&#xff0c;更是未来趋势的预测大师。智能 Copilot 副驾驶的加入&#xff0c;让 Excel 如虎添翼&#xff0c;成为每一位数据探索者梦寐以求的超级引擎。在…
阅读更多...
最新文章

Copyright @ 2022~2023