Vue基本使用-02

   上节我们讲了什么是mvvm模型，以及我们vue的一些常用指令，今天给大家讲一下vue的基本使用，在将之前我们需要重点讲解我们的一个指令，v-model指令

   v-model

    v-model 可以在组件上使用以实现双向绑定,什么是双向绑定呢?意思就是当我们的数据发生变化的时候,我们的视图也会跟着变化;视图发生变化的时候,我们的数据也会发生变化

    你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

   话多说直接上代码!!!!!

     在这里我们定义了一个input最基本的输入框,唯一的不同是让他对 msg 这个数据进行了双向绑定,并且我们还展示了一下我们的 msg 这个属性的值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app">测试:<input type="text" v-model="msg"><br>{{msg}} </div><script>const app=Vue.createApp({data() {return {msg:"aaa"	}}})		app.mount("#app")</script></body>
</html>

       效果：当我们的视图发生了变化,数据也会跟着变化.

0f33ee92cfa549cca144a5c61e28162d.png 

   这里我们还可以对 <select/>:下拉框     <textarea/>:文本框等做一些常用的案例,我会给大家一一解释我们的意思是什么

我们直接从性别开始: 

        在这里我们使用的是input的radio属性,声明它是一个单选框,value 是选择的值,这里我们使用的是0或者1,也可以写作男或者女,他们都对sex属性进行了双向绑定,我们标签后面的男或者女是为了在视图中显示,没有任何实际作用,当我们的男被选中,我们的双向绑定就会将被选中的这个值 value 赋值给 sex属性,也就是 sex就是0

       爱好:

        在这里我们先需要定义一个数组,用来存储我们的爱好,因为我们的爱好不会只有一个的,跟刚才性别的逻辑是一样的,当我们的多选框的某一个被选中之后,会将value的值,存放到我们双向绑定的happy属性中

       班级:

        我们的下拉框的值只有一个,所以只需要定义一个空字符,将其绑定到下拉框的select上,为什么我们不需要写value属性呢?在我们有开闭标签时,是不需要写任何的value,我们就可以获取到开闭标签中间值的,什么是开闭标签呢？ <option></option>有开始有结束就是开闭标签 还有一种方式是<input/> 这个是需要写我们的value属性的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app">测试:<input type="text" v-model="msg"><br>{{msg}} <br/>性别:<input type="radio" name="sex" value="0" v-model="sex">男<input type="radio" name="sex" value="1" v-model="sex">女<br>展示性别: {{sex}}<br>爱好:<input type="checkbox" value="rapper" name="happy" v-model="happy">rapper<input type="checkbox" value="打篮球" name="happy" v-model="happy">打篮球<input type="checkbox" value="唱" name="happy" v-model="happy">唱<input type="checkbox" value="跳" name="happy" v-model="happy">跳<br>爱好:{{happy}}<br>班级：<select v-model="aaa"><!--为什么不用加value,因为我们的下拉框有默认值,就是没有value的是时候,我们的值就是标签中间的值--><option value="A365">A365</option><option value="A265">A265</option><option value="A165">A165</option></select>{{aaa}}<br>文本框:<textarea v-model="bbb"></textarea>{{bbb}}</div><script>const app=Vue.createApp({data() {return {msg:"aaa",sex:"0",happy:["rapper"],aaa:"A365",bbb:"aa"}}})		app.mount("#app")</script></body>
</html>

v-on

  • 缩写：@

  • 预期：Function | Inline Statement | Object

  • 参数：event

  • 修饰符：

    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法：

       绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

        用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

        在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

      直接上代码!!!

      我们直接用的是简写形式,@click,如果不喜欢的话我们可以使用v-on:click,我们只是声明的点击事件,我们还可以声明其他的事件, 语法 v-on:动作=“方法名字(参数)”

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app"><button @click="test1()">普通按钮1</button><button @click.once="test2()">once按钮2</button><button @click.left="test3()">left按钮3</button><button @click.right="test4()">right按钮4</button></div><script>const app=Vue.createApp({methods: {test1(){alert("点击事件")},test2(){alert("once，只会触发一次")},test3(){alert("left 鼠标左键点击")},test4(){alert("rigth 鼠标右键点击")}}})		app.mount("#app")</script></body>
</html>

 简易轮播图

   这里我们使用到了 v-bind，以及鼠标点击事件

    思路: 通过点击事件,每点一次,照片路径的数组就切换,如果到最后一个照片,索引从0开始切换

    这里我们先定义一个数组,里面存放的是我们照片的路径,再定义一个初始为0的索引,让我们的img这个标签的src属性绑定,可以相当于识别出我们的imgs是谁,index是谁,然后就是我们的点击事件,每次点击,索引加一,意思就是 本来是 src="imgs[0]",点击一次按钮就是 src="imges[1]"

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script><style>img{width: 100px;heigth:100px}</style></head><body><div id="app"><img :src="imgs[index]"/><button @click="changeImge()">切换</button></div><script>const app=Vue.createApp({data() {return {imgs:["../static/img/1.jpg","../static/img/2.jpg","../static/img/3.jpg","../static/img/4.jpg","../static/img/5.jpg"],index:0}},methods: {changeImge() {if(this.index>=this.imgs.length-1){this.index=0}else{this.index++}}},})		app.mount("#app")</script></body>
</html>

 watch

    watch：用于监听数据的变化，当数据发送变化的时候,我们可以进行一些逻辑操作.

      这里我们的案例是: 当m 这个属性发生变化的时候，km也随着变化,我们输入2000m,km的输入框会变成2,输入3000m,km的输入框会变成3……

     我们的watch是一个属性,属性里面是我们监听的哪个属性 属性名（新值,旧值）{ 逻辑代码 }

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script><style>img{width: 100px;heigth:100px}</style></head><body><div id="app">m:<input type="text" v-model="m"><br>km:<input type="text" v-model="km"><br></div><script>const app=Vue.createApp({data() {return {m:"1000",km:"1"}},watch: {m(newValue, oldValue) {this.km=this.m/1000}},})		app.mount("#app")</script></body>
</html>

computed

       计算属性是vue的强大功能之一,假如我们的逻辑代码中只需要拿到一个值,都可以放在我们的计算属性之中,计算属性的结果会被缓存，也就是说,当第一次调用的时候,才会被计算,计算之后被放在缓存之中，为我们节省了许多的资源,只要内部的数据发生变化,还是会重新进行计算

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app">{{add()}}{{add()}}{{sex}}{{sex}}{{sex}}</div><script>const app=Vue.createApp({data(){return{idcard:"410424200101274021"}},methods: {add(){console.log("方法执行")return this.idcard.substr(16,1)%2==0?"女":"男";}},computed: {sex() {console.log("计算属性执行")return this.idcard.substr(16,1)%2==0?"女":"男";}},})		app.mount("#app")</script></body>
</html>

 我们是调用了两次方法,三次计算属性,我们可以发现计算属性只是被调用了一次,其他都是从缓存里拿的

152f6b692a80483ca9aec779f90ba2b4.png

 component组件

     

      组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件 ,在我的理解看来,组件就是一个标签,这个标签内有什么需要你自己定义,然后向拼积木一样,拼起来搭建一个自己的网站

    每个组件都会有自己的方法以及数据,并且他们是不会互相干涉的,当两个重复的组件使用时,数据是不会共享的

 全局组件     

      my-test就是我们组件的名字自定义的标签,官方建议我们使用 xx-xx的形式来写,或者是驼峰命名的方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app"><my-test></my-test><my-test></my-test><my-test></my-test></div><script>const app=Vue.createApp()		/*  定义组件  全局组件 */app.component("my-test",{data(){return {name:"test"}},template:`<div><div>我就是一个测试</div><button @click='test'>按钮</button></div>`,methods:{ test(){alert("这就是一个测试的按钮呀  "+this.name)}}})app.mount("#app")</script></body>
</html>

   局部组件

   在vue的实例对象中内部注册我们的组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app"><xue-cheng></xue-cheng></div><script>const app=Vue.createApp({components:{"xue-cheng":{template:"<h1>111</h1>"}}	})		app.mount("#app")</script></body>
</html>

 

 

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

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

相关文章

景芯SoC A72的时钟树分析

景芯SoC A72的时钟树分析

innovus的ctslog中的Clock DAG信息可以报出来CTS主要运行步骤的关键信息&#xff0c;比如clustering&#xff0c;balancing做完后的clock tree的长度&#xff0c;clock tree上所用的buffer、inverter&#xff0c;icg cell数量&#xff0c;clock skew等信息。我们以景芯SoC A72 …
阅读更多...
Centos离线安装Python3

Centos离线安装Python3

目录 1.准备工作 2.解压python压缩包 3.编译 4.安装、更改环境变量 5.建立pip连接 使用的是Centos7服务器&#xff0c;Py版本是py3.9.0 1.准备工作 首先确保服务器中存在相关的编译器&#xff0c;例如GCC&#xff1b;这里不做过多叙述&#xff0c;需要者前往&#xff1a…
阅读更多...
空间搜索geohash概述；redis的geo命令

空间搜索geohash概述；redis的geo命令

概述 通常在一些2C业务场景中会根据用户的位置来搜索一些内容。通常提供位置搜索的都是直接通过redis/mongodb/es等中间件实现的。 但是这些中间件又是怎么实现位置搜索的呢&#xff1b; 查了一番资料&#xff0c;发现背后一个公共的算法Geohash。 搜索的时候可以根据距离对…
阅读更多...
Vitis HLS 学习笔记--移除内存分配malloc

Vitis HLS 学习笔记--移除内存分配malloc

目录 1. 简介 2. 示例解析 2.1 源码解释 2.2 malloc 分析 2.3 替代方案分析 3. 总结 1. 简介 Vitis HLS 也不支持动态创建或删除 C/C 对象&#xff08;用于综合&#xff09;。 本文探究如何在C/C代码中避免使用显式的malloc函数来分配内存。在硬件设计和FPGA开发中&…
阅读更多...
Xcode无法使用设备：Failed to prepare the device for development

Xcode无法使用设备：Failed to prepare the device for development

问题&#xff1a; Xcode无法使用设备开发&#xff0c;失败报错如下&#xff1a; Failed to prepare the device for development. This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode. You may also need…
阅读更多...
致 粉丝de信

致 粉丝de信

致 粉丝 -本文呢看不下去别看&#xff0c;但是学业是真的重要&#xff08;平常有信奥&#x1f62b;&#xff09;&#xff0c;电脑没收……更新可能得到暑假&#xff0c; 同学&#xff1a;小没苯agoe &#xff08;aaa&#xff0c;学霸&#xff01;&#xff01;&#xff01;&…
阅读更多...
GGML简单介绍

GGML简单介绍

GGML是一个用于机器学习的张量库&#xff0c;可以在商用硬件上实现大型模型和高性能。它被llama.cpp和whisper.cpp使用 C语言编写 16位浮点支撑 整数量化支持(如4位、5位、8位) 自动分化 内置优化算法(如ADAM, L-BFGS) 针对苹果芯片进行优化 在x86架构上利用AVX / AVX2的内在特…
阅读更多...
A股上市公司MSCI ESG评级面板数据（2017-2023）

A股上市公司MSCI ESG评级面板数据（2017-2023）

数据简介&#xff1a;MSCI ESG&#xff08;Environmental, Social, and Governance&#xff09;评级是由 MSCI Inc. 提供的一项服务&#xff0c;旨在评估公司在环境、社会和治理方面的表现。MSCI 是一家全球领先的投资研究和指数提供商&#xff0c;其 ESG 评级被广泛用于评估企…
阅读更多...
C++ Primer 第五版 第16章 模板与泛型编程

C++ Primer 第五版 第16章 模板与泛型编程

模板是C中泛型编程的基础。一个模板就是一个创建类或函数的蓝图或者说公式。当使用一个vector这样的泛型类型&#xff0c;或者find这样的泛型函数时&#xff0c;我们提供足够的信息&#xff0c;将蓝图转换为特定的类或函数。这种转换发生在编译时。 一、定义模板 1. 函数模板…
阅读更多...
windows11 建立批处理bat文件来删除指定目录下的所有隐藏的文件。

windows11 建立批处理bat文件来删除指定目录下的所有隐藏的文件。

今天在导入项目的时候发现之前项目中的文件夹中有很多隐藏的临时文件&#xff0c;这个文件应该是版本控制产生的&#xff0c;导致导入后文件夹上有X&#xff0c;然后里面文件是一个没有错。 我们来建立一个bat来&#xff0c;进行批量删除隐藏文件就可以了&#xff1a; echo o…
阅读更多...
纯C实现的ymodem库，无额外依赖

纯C实现的ymodem库，无额外依赖

本文目录 1、引言2、理论2.1 YMODEM协议的主要特点2.2 YMODEM的工作原理 3、代码3.1 main.cpp3.2 ymodem.c 3.3 ymodem.h 4、验证4.1 ymodem发送4.2 ymodem接收 5、移植说明 文章对应视频教程&#xff1a; 暂无&#xff0c;可以关注我的B站账号等待更新。 点击图片或链接访问我…
阅读更多...
源码解析：从零解读SAM(Segment Anything Model)大模型！

源码解析：从零解读SAM(Segment Anything Model)大模型！

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…
阅读更多...
TF-IDF算法教程

TF-IDF算法教程

前言 TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;是一种常用的文本分析技术&#xff0c;广泛应用于信息检索和文本挖掘领域。它是一种统计方法&#xff0c;用于评估一个词语在一个文档中的重要程度。TF-IDF的核心思想是&#xff1a;如果一个词语…
阅读更多...
VS2019+QT5.15调用动态库dll带有命名空间

VS2019+QT5.15调用动态库dll带有命名空间

VS2019QT5.15调用动态库dll带有命名空间 vs创建动态库 参考&#xff1a; QT调用vs2019生成的c动态库-CSDN博客 demo的dll头文件&#xff1a; // 下列 ifdef 块是创建使从 DLL 导出更简单的 // 宏的标准方法。此 DLL 中的所有文件都是用命令行上定义的 DLL3_EXPORTS // 符号…
阅读更多...
四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画

四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画

官网demo地址&#xff1a; Flight Animation 这篇介绍了如何实现飞机航线动画。 首先加载一张底图&#xff0c;定义一个样式。 const tileLayer new TileLayer({source: new StadiaMaps({layer: "outdoors",}),});const map new Map({layers: [tileLayer],target…
阅读更多...
【实例分享】访问后端服务超时，银河麒麟服务器操作系统分析及处理建议

【实例分享】访问后端服务超时，银河麒麟服务器操作系统分析及处理建议

1.服务器环境以及配置 【机型】 处理器&#xff1a; Intel 32核 内存&#xff1a; 128G 整机类型/架构&#xff1a; x86_64虚拟机 【内核版本】 4.19.90-25.22.v2101.kylin.x86_64 【OS镜像版本】 kylin server V10 SP2 【第三方软件】 开阳k8s 2.问题现象描述 …
阅读更多...
API工具--Apifox和Postman对比（区别）

API工具--Apifox和Postman对比（区别）

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…
阅读更多...
【学习笔记】Linux

【学习笔记】Linux

Linux 1、 介绍 1.1、概述 1.2、特点 1.3、Linux的发行版2、 基础篇 —— 文件系统 2.1、文件系统 2.2、目录结构3、 基础篇 —— VI/VIM 编辑器 3.1、概述 3.2、编辑器模式及常用命令4、 基础篇 —— 网络配置 4.1、VMware NetWork …
阅读更多...
Linux so文件无法找到及某条命令找不到的解决办法

Linux so文件无法找到及某条命令找不到的解决办法

前言 在一些定制软件中可能会自带so文件。或者自带一些二进制命令。 这时会如果运行某个程序会发生 **.so 文件无法找到的错误。 以及 * 某条命令无法找到的错误。 比如像是下面这样 解决办法&#xff1a; so文件无法找到 通过往 LD_LIBRARY_PATH 变量中追加路径来告诉程序…
阅读更多...
cdh中的zookeeper怎么配置zoo.cfg

cdh中的zookeeper怎么配置zoo.cfg

你手动改了zoo.cfg目录是不会生效的&#xff0c;因为是cdh在管控&#xff0c;所以只能通过cdh修改。 首先打开cdh。 xxx:7180 点击zookeeper 选配置&#xff0c;然后选高级 在右边找&#xff0c;有一个就是zoo.cfg&#xff0c;可以点击右边的感叹号。然后在里面编辑的就会直…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023