Vue 基础语法(二)

一、背景:

        我们对于基础语法,说白了就是实现元素赋值循环判断,以及事件响应即可!

二、v-bind

        我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!

        我们还可以使用 v-bind 来绑定元素特性。

<div id="app"><!--如果要将模型数据绑定在 html 属性中则使用 v-bind 指令,此时 title 中显示的是模型数据--><h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h1><!-- v-bind 指令的简写形式: 冒号(:) --><h1 :title="message">我是标题</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>new Vue({el: '#app',data: {message: '页面加载于 ' + new Date().toLocaleString()}})
</script>

        你看到的 v-bind 特性被称为指令。指令带有前缀 v- ,以表示它们是 Vue 提供的特殊特性。

        除了使用插值表达式 {{}} 进行数据渲染,也可以使用 v-bind 指令,它的简写的形式就是一个冒号(:

三、v-if 系列

        什么是条件判断语句,就不需要我说明了吧( ̄▽ ̄),以下两个属性

v-ifv-else-ifv-else

        测试:观察在控制台输入 vm.type = false 的变化 

<body><div id="app2"><span v-if="type">TRUE</span><span v-else>NO</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm2 = new Vue({el: "#app2",data: {type: true}})</script>
</body>

        测试:观察在控制台输入 vm.type = 'B'、'C'、'D'  的变化。 

<body><div id="app"><!--=== 三个等号在 JS 中表示绝对等于(就是数据与类型都要相等)--><h1 v-if="type === 'A'">A</h1><h1 v-else-if="type === 'B'">B</h1><h1 v-else-if="type === 'C'">C</h1><h1 v-else>who</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {type: 'A'}})</script>
</body>

四、v-for 

        语法格式如下:

<div id="vue"><li v-for="item in items">{{ item.message }}</li>
</div>

        需要注意的是:items 是数组,item 是数组元素迭代的别名。Thymeleaf 模板引擎的语法和这个十分的相似!

        在控制台输入 vm.items.push({code:'789',message: 'C'}) ,尝试追加一条数据,你会发现浏览器中显示的内容会增加一条内容。

<body><div id="app"><li v-for="item in items">{{item.message}}</li></div><div id="app2"><li v-for="(item,index) in items">我的序号是:{{index}},信息是:{{item.message}}</li></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script><script>var vm = new Vue({el: "#app",data: {items:[{code:'123',message:'A'},{code:'456',message:'B'},]}})var vm2 = new Vue({el: "#app2",data: {items:[{code:'123',message:'A'},{code:'456',message:'B'},]}})</script>
</body>

五、v-on

        v-on 标签的作用是监听事件,它包括 Vue 中的事件和前端页面本身的一些事件!我们这里 clickvue 的事件,还可以绑定到 Vue 中的 methods 中的方法事件。

<body><div id="app"><!--在这里我们使用了 v-on 绑定了 click 事件并指定了名为 sayHi 的方法--><button v-on:click="sayHi">点我</button><!-- v-on 指令的简写形式 @ --><button @click="sayHi">点我</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message: 'Hello World'},// 方法必须定义在 Vue 实例的 methods 对象中methods: {sayHi: function (event) {// `this` 在方法里指向当前 Vue 实例alert(this.message);}}});</script>
</body>

六、v-model

        v-model 是双向数据绑定标签,Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

        值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。

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

6.1 文本框

<body><div id="app"><!-- v-bind:value只能进行单向的数据渲染 --><input type="text" v-bind:value="searchMap.keyWord"><!-- v-model 可以进行双向的数据绑定 --><input type="text" v-model="searchMap.keyWord"><p>您要查询的是:{{searchMap.keyWord}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>new Vue({el: '#app',data: {searchMap:{keyWord: 'xiehongfa'}}})</script>
</body>

6.2 单复选框

<body><div id="app">单复选框:<input type="checkbox" id="checkbox" v-model="checked">&nbsp;&nbsp;<label for="checkbox">{{ checked }}</label></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>new Vue({el: '#app',data: {checked: false}})</script>
</body>

6.3 多复选框

<body><div id="app4" ><input type="checkbox" value="打篮球" v-model="interest">打篮球<input type="checkbox" value="踢足球" v-model="interest">打篮球<input type="checkbox" value="唱" v-model="interest">唱<input type="checkbox" value="跳" v-model="interest">跳</br>你的兴趣爱好为:{{interest}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script><script>var vm4 = new Vue({el: "#app4",data: {interest:["唱"]}})</script>
</body>

6.4 单选按钮

<body><div id="app3"><input type="radio" value="男" v-model="name">男<input type="radio" value="女" v-model="name">女你的选择为:{{name}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script><script>var vm3 = new Vue({el: "#app3",data: {name:""}});</script>
</body>

6.5 下拉框

<body><div id="app5"><span>爱好</span><select v-model="interest"><option value="" disabled>请选择</option><option>打篮球</option><option>踢足球</option><option>乒乓球</option></select>你的兴趣爱好为:{{interest}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script>var vm5 = new Vue({el: "#app5",data: {interest:""}})</script>
</body>

        注意:如果 v-model 表达式的初始值未能匹配任何选项,< select> 元素将被渲染为 “未选中” 状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

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

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

相关文章

vue中在使用keep-alive时,会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法

一、 问题复现 跳转前&#xff1a; 跳转后&#xff1a; 二、分析 由于在vue中使用了keep-alive&#xff0c;页面在切换时&#xff0c;上一个页面的实例被缓存了&#xff0c;跳转后并没有销毁&#xff0c;所以才会残留 tooltip或dropdown&#xff0c;所以有以下解决思路&am…

[运维|系统] Centos设置本地编码

以下是在CentOS上更改系统编码的一般步骤&#xff1a; 使用locale命令查看当前的系统编码&#xff1a; locale如果需要更改系统编码&#xff0c;可以使用类似下面的命令来生成相应的locale设置&#xff08;以UTF-8为例&#xff09;&#xff1a; sudo localedef -i en_US -f …

这就是ChatGPT,走进我们的生活!

这就是ChatGPT&#xff0c;走进我们的生活&#xff01; 早在年初&#xff0c;合作导师将我叫过去&#xff0c;让我了解学习一下ChatGPT&#xff0c;看能不能对我们的生活有所帮助。一直使用着国内镜像&#xff0c;五月份我才注册了OpenAI的账户。如今&#xff0c;打开购物商城购…

docker小记-容器中启动映射端口号但访问不到

在docker容器中是每一个容器隔离分开的。 每个容器视为一个独立的环境&#xff0c;当在外部环境访问不到的时候就是说明端口号还是没映射到。 之前使用的映射说白了就是将docker中的独立的ip地址端口号映射到主机的ip地址和端口号。这一步没有成功。 docker inspect 容器名 …

【雕爷学编程】MicroPython动手做(10)——零基础学MaixPy之神经网络KPU2

KPU的基础架构 让我们回顾下经典神经网络的基础运算操作&#xff1a; 卷积&#xff08;Convolution&#xff09;:1x1卷积&#xff0c;3x3卷积&#xff0c;5x5及更高的卷积 批归一化&#xff08;Batch Normalization&#xff09; 激活&#xff08;Activate&#xff09; 池化&…

无人机调试笔记——常见参数

无人机的PID调试以及速度相关参数 1、Multicopter Position Control主要是用来设置无人机的各种速度和位置参数。调试顺序是先调试内环PID&#xff0c;也就是无人机的速度闭环控制&#xff0c;确认没有问题后再进行外环位置控制&#xff0c;也就是定点模式控制。 2、调试的时…

【分享帖】LCD的MCU接口和SPI接口详解

LCD&#xff08;Liquid Crystal Display&#xff09;液晶屏&#xff0c;作为电子产品的重要组成部分&#xff0c;是终端用户与电子产品交互的重要载体。现在市场上的LCD&#xff0c;按照尺寸、功能、接口、用途等分为很多种&#xff0c;本文主要介绍如下两种LCD物理接口&#x…

Ansible 的脚本 --- playbook 剧本

目录 playbook 剧本 playbooks 本身由以下各部分组成 定义、引用变量 指定远程主机sudo切换用户 when条件判断 迭代 Templates 模块 1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设置引用的变量 2.修改主机清单文件&#xff0c;使用主机变量定义一个变…

配置 gitlab https 访问

文章目录 1. 备份2. 生成SSL证书3. 配置文件4. 重启5. 访问 1. 备份 docker exec -ti gitlab-ce gitlab-rake gitlab:backup:create2. 生成SSL证书 yum install openssl openssl-devel -y mkdir /data/gitlab/config/ssl ; cd /data/gitlab/config/ssl### 生成证书 openssl…

思维导图在线生成,新手必备!

思维导图是一个很好的学习和工作的方式&#xff0c;可以解决我们工作中的很多困难的问题&#xff0c;但是现在随着思维导图学习方法的推广&#xff0c;市面上的导图软件层出不穷&#xff0c;电子化的思维导图软件极大的方便了我们的工作和生活&#xff0c;下面我们就一起来盘点…

Hudi Flink SQL源码调试学习(1)

前言 本着学习hudi-flink源码的目的&#xff0c;利用之前总结的文章Hudi Flink SQL代码示例及本地调试中的代码进行调试,记录调试学习过程中主要的步骤及对应源码片段。 版本 Flink 1.15.4Hudi 0.13.0 目标 在文章Hudi Flink SQL代码示例及本地调试中提到&#xff1a;我们…

CK-00靶机详解

CK-00靶机详解 靶场下载地址&#xff1a;https://download.vulnhub.com/ck/CK-00.zip 这个靶场扫描到ip打开后发现主页面css是有问题的&#xff0c;一般这种情况就是没有配置域名解析。 我们网站主页右击查看源代码&#xff0c;发现一个域名。 把域名添加到我们hosts文件中。…

设计模式四:单例模式(Singleton)

单例模式&#xff0c;是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。 通过单例模式可以保证系统中&#xff0c;应用该模式的类一个类只有一个实例。即一个类只有一个对象实例。 单例模式是设计模式中最简单的形式之一。这一模式的目的是使得类的一…

Mac 终端快捷键设置:如何给 Mac 中的 Terminal 设置 Ctrl+Alt+T 快捷键快速启动

Mac 电脑中正常是没有直接打开终端命令行的快捷键指令的&#xff0c;但可以通过 commandspace 打开聚焦搜索&#xff0c;然后输入 ter 或者 terminal 全拼打开。但习惯了 linux 的同学会觉得这个操作很别扭。于是我们希望能通过键盘按键直接打开。 操作流程如下&#xff1a; 1…

Docker 安全及日志管理

目录 前言&#xff1a; 一&#xff1a;Docker 容器与虚拟机的区别 1. 隔离与共享 2. 性能与损耗 二&#xff1a;Docker 存在的安全问题 1.Docker 自身漏洞 2.Docker 源码问题 三&#xff1a;Docker 架构缺陷与安全机制 1. 容器之间的局域网攻击 2. DDoS 攻击耗尽资…

《MapboxGL 基础知识点》- 地图监听事件

添加地图监听事件 使用方法 map.on map.on(type, layerIds, listener) 例如 map.on(mouseup, onMouseup);function onMouseup(e) {// mouseupconsole.log(e.type); } 取消地图监听事件 使用方法 map.off map.off(type, layerIds, listener) 例如&#xff1a; map.off(…

MyBatis小记_one

目录 什么是框架 1.框架的概述 2.框架要解决的问题 3. 软件开发的分层重要性 4.分层开发的常见框架 MyBatis 框架概述 JDBC 编程的回顾 JDBC 问题分析 MyBatis 框架快速入门 1.官网下载MyBatis框架jar包 2.搭建MyBatis 开发环境 3. 编写持久层接口的映射文件 IUserD…

HTML笔记(1)

介绍 浏览器中内置了HTML的解析引擎&#xff0c;通过解析标记语言来展现网页&#xff1b;HTML标签都是预定义好的&#xff1b;Java工程师&#xff1a;后台代码的编写&#xff0c;和数据库打交道&#xff0c;把数据给网页前端的工程师&#xff1b;网页前端工程师&#xff1a;写H…

C++信号量与共享内存实现进程间通信

关于信号量和共享内存的相关知识可参考下面链接&#xff1a; 进程间通信方式介绍_夜雨听萧瑟的博客-CSDN博客 C 创建共享内存_c共享内存_夜雨听萧瑟的博客-CSDN博客 信号量SytemV与Posix信号量的介绍与用法_夜雨听萧瑟的博客-CSDN博客 直接上代码&#xff0c;代码如下&#…

记一次Apache HTTP Client问题排查

现象 通过日志查看&#xff0c;存在两种异常情况。第一种&#xff1a;开始的时候HTTP请求会报超时异常。 762663363 [2023-07-21 06:04:25] [executor-64] ERROR - com.xxl.CucmTool - CucmTool|sendRisPortSoap error,url:https://xxxxxx/realtimeservice/services/RisPort o…