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 …
阅读更多...
wordpress站群搭建2代码初始化

wordpress站群搭建2代码初始化

海鸥技术下午茶-wordpress站群搭建2项目代码初始化 1.后端环境 项目框架使用 go-zore https://go-zero.dev/docs/tasks 集成了各种工程实践的 web 和 rpc 框架。含极简的 API 定义和生成工具 goctl&#xff0c;可以根据定义的 api 文件一键生成 Go。可以很大程度上提高开发效…
阅读更多...
代码随想录算法训练营第三十六天|LeetCode56 合并区间、LeetCode738 单调递增的数字

代码随想录算法训练营第三十六天|LeetCode56 合并区间、LeetCode738 单调递增的数字

题1&#xff1a; 指路&#xff1a;56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 思路与代码&#xff1a; 相似于昨天的引爆气球(第三题)&#xff0c;这个题的题意更为清晰。我们只要取有交集元素的并集区间即可&#xff0c;其他区间照常返回。同样&#xff0c;我们…
阅读更多...
React Router 路由详解

React Router 路由详解

文章目录 1. 安装 react-router-dom2. 创建路由3. 创建链接和导航4. 渲染路由参数和查询字符串 在React中&#xff0c;我们通常使用 react-router-dom 这个库来处理路由。 1. 安装 react-router-dom 首先&#xff0c;你需要安装 react-router-dom &#xff0c;可以使用 npm 或…
阅读更多...
Centos离线安装Python3

Centos离线安装Python3

目录 1.准备工作 2.解压python压缩包 3.编译 4.安装、更改环境变量 5.建立pip连接 使用的是Centos7服务器&#xff0c;Py版本是py3.9.0 1.准备工作 首先确保服务器中存在相关的编译器&#xff0c;例如GCC&#xff1b;这里不做过多叙述&#xff0c;需要者前往&#xff1a…
阅读更多...
自动化压测工具开发(MFC)

自动化压测工具开发(MFC)

1. 背景 为了减轻测试人员在进行MFC程序压力测试时的重复手动操作&#xff0c;本文档描述了开发一个自动化压力测试工具的过程。该工具能够根据程序界面某块区域的预定状态变化&#xff0c;自动执行鼠标点击或键盘输入操作。 2. 技术概览 串口控制&#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…
阅读更多...
安装前端与Web前端：深度探索与实践

安装前端与Web前端：深度探索与实践

安装前端与Web前端&#xff1a;深度探索与实践 在数字化时代&#xff0c;前端技术作为用户界面的直接呈现者&#xff0c;其重要性不言而喻。然而&#xff0c;对于初学者而言&#xff0c;安装前端与Web前端的过程往往充满了困惑与挑战。本文将从四个方面、五个方面、六个方面和…
阅读更多...
[12] 使用 CUDA 进行图像处理

[12] 使用 CUDA 进行图像处理

使用 CUDA 进行图像处理 当下生活在高清摄像头的时代，这种摄像头能捕获高达1920*1920像素的高解析度画幅。想要实施的处理这么多的数据，往往需要几个TFlops地浮点处理性能，这些要求CPU也无法满足通过在代码中使用CUDA，可以利用GPU提供的强大地计算能力CUDA支持多维地Grid和…
阅读更多...
鸿蒙开发电话服务：【@ohos.contact (联系人)】

鸿蒙开发电话服务：【@ohos.contact (联系人)】

联系人 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import contact from ohos.contact;contact.addContact addContact(contact:Contact, callback:AsyncCallback): void 添加联…
阅读更多...
纯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;如果一个词语…
阅读更多...
最新文章

Copyright @ 2022~2023