Vue的数据绑定

news2024/9/23 13:29:12

一、Vue的数据绑定

1、单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新。不需要进行额外的DOM

操作就可以实现视图和模型的联动

​ a、数据只保存一份

​ b、data—->DOM

​ (1)插值表达式:{{ 表达式 }},将表达式的值在View中显示出来

​ (2)v-bind:将标签的属性绑定到指定的变量上。简写方式: :属性名=’变量名’

2、双向数据绑定:是Vue的核心特征之一。将Model绑定到View上,同时将View和Model进行绑定。即当Model的数据发生改变时

View会自动更新;当View的数据发生改变时Model的数据也会更新。

强调:在Vue中只有表单元素才能实现双向绑定(input、textarea、select),实现指令是v-model

​ (1)文本框(‘text’)的绑定:和普通的变量进行绑定

​ (2)复选框(checkbox)的绑定:绑定的变量必须是数组

​ (3)单选框(radio)的绑定:绑定普通的变量

​ (4)下拉列表(select)的绑定:当下拉列表为单选时,绑定的变量为普通变量;当下拉列表为多选时,绑定的变量自动转换为数组

3、值绑定的时机(数据同步的时机):v-model指令可以实现Model和View的数据同步

​ (1).lazy(懒加载):在input失去焦点或按下回车键时才进行更新

​ (2).number:将输入的数据转换成Number类型。在input中输入的虽然是数字,但实际是string,为了将字符串转换为数字,加

​ 上该修饰符实现自动转换

​ 

​ (3).trim:会自动过滤掉输入的首尾空格

二、Vue的事件绑定:通过v-on指令绑定,v-on:原生的事件名(@原生事件名)

1、方法处理器方式:v-on:原生事件名 = 函数名

2、内联语句处理器方式:本质是内联了javascript语句

3、在内联语句中访问原生的DOM事件:

4、事件绑定中的修饰符

​ (1).prevent :调用preventDefault()。阻止链接打开URL

​ (2).stop :调用stopPropagation()。阻止事件传播(阻止事件冒泡)

​ (3)键值修饰符:在监听键盘事件时,需要知道键的keyCode,记忆不方便,可以通过修饰符来记录键值

​ enter、tab、delete、esc、space、up、down、left、right

三、Class和Style的绑定

1、对象语法:给v-bind:class传递一个对象,来动态的改变class属性值

2、数组语法:可以把一个数组传给v-bind:class,以应用一个class列表

3、内联样式绑定:直接绑定style(v-bind:style)

​ (1)对象表示法:

​ (2)数组表示法:

四、Vue的过滤器:主要用于文本的格式化,或者数组数据的过滤与排序等

1、使用的位置:

​ (1)插值表达式中( 使用管道符‘|’ ):{{ message | filter }}

​ (2)在v-bind的绑定中( 使用管道符‘|’ ):

<div v-bind:title=" message| filter "></div>

2、定义的方式:

​ (1)全局过滤器:

​ Vue.filter(‘过滤器的唯一标识’,函数(value){

​ 过滤的代码

​ })

​ (2)局部过滤器:在Vue实例内部通过filter属性定义的过滤器

五、Vue脚手架的使用

1、Vue脚手架:vue-cli的使用

​ (1)安装:npm i -g @vue/cli-init

​ (2)创建Vue项目(Vue2.0项目):

​ A、创建文件夹:vue2-demo

​ B、进入文件夹:cd vue2-demo

​ C、创建项目:vue init webpack 项目名

 

2、创建项目的方式:

​ (1)使用vscode对项目进行编辑:

​ (2)使用Webstorm创建项目:修改默认的端口号

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

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

相关文章

在wsl下开发T113的主线linux(3)-写入spinand测试

接下来是烧写入硬件验证&#xff0c;我的板子焊接的是W25N01GV&#xff0c;这里使用xfel&#xff0c;因为支持写入spi-nand。GitHub - xboot/xfel: Tiny FEL tools for allwinner SOC, support RISC-V D1 chipTiny FEL tools for allwinner SOC, support RISC-V D1 chip - GitH…

QML学习笔记【04】:常用控件

1 Repeater与model Window {width: 640; height: 480visible: truetitle: qsTr("Hello World")Column{id: colspacing: 30Repeater{model: 3 //model控制了所有的数据&#xff0c;这里定义了Button的数量Button{width: 100; height: 50text: "btn" index…

整数划分——完全背包的变形

整数划分——完全背包的变形一、题目二、思路分析1、状态转移方程&#xff08;1&#xff09;状态表示&#xff08;2&#xff09;方程书写2、循环与初始化&#xff08;1&#xff09;循环&#xff08;2&#xff09;初始化三、代码一、题目 二、思路分析 这道题这么看的话还是比较…

Docsify使用之Markdown语法

Docsify使用过程中的排版&#xff0c;他是基于Markdown语法的。我们来看一下使用的常用语法&#xff1a; 字体加粗&#xff1a; 在需要加粗的文字前后各加两个** 具体格式如下 **加粗内容** 在需要加粗的文字前后各加一个* 具体格式如下 *倾斜内容* 在需要加粗并且倾斜的…

缅怀2022,展望2023

个人主页&#xff1a;董哥聊技术我是董哥&#xff0c;嵌入式领域新星创作者创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01;文章目录1、缘起2、收获3、憧憬不知不觉&#xff0c;2022已然到了最后一天&#xff0c;同时也是我技术创作一周年…

2.脚手架和逆向工程-使用renren开源

1.脚手架工程 脚手架工程提供了业务模块通用的类&#xff0c;比如返回结果封装、异常封装、分页工具类等 比较好用脚手架工程如renren-fast 备份地址 gitgithub.com:nome1024/renren-fast.git 2.逆向工程——使用renren-generator生成代码 逆向工程的作用是根据数据库快速生…

2022年仪器仪表行业研究报

第一章 行业概况 仪器仪表是用以检出、测量、观察、计算各种物理量、物质成分、物性参数等的器具或设备。真空检漏仪、压力表、测长仪、显微镜、乘法器等均属于仪器仪表。仪器仪表是人们对客观世界的各种信息进行测量、采集、分析与控制的手段和设备&#xff0c;是人类了解世界…

MySQL之表的修改和约束条件的添加

修改表中的数据&#xff1a;update[DML] 语法格式&#xff1a; update 表名 set 字段名1值1&#xff0c;字段名2值2&#xff0c;字段名3值3......where 条件;注意&#xff1a;没有条件限制会导致所有数据全部更新 举例&#xff1a; - 将id号为10的学生的姓名改变为"jas…

【自学Python】解释型程序与编译型程序

解释型程序与编译型程序 解释型程序与编译型程序教程 高级语言所编制的程序不能直接被计算机识别&#xff0c;必须经过转换才能被执行&#xff0c;按转换方式可将它们分为两类&#xff1a;解释型程序与编译型程序。 解释型程序 执行方式类似于我们日常生活中的 “同声翻译”…

Vue--》实现todo-list组件的封装与使用

目录 项目结构 创建todolist组件 创建todoinput组件 创建todobutton组件 项目结构 今天用 vite 脚手架搭建一个 vue3 的小案例&#xff0c;vite的搭建过程参考&#xff1a;vite的搭建 。其项目结构组件构成如下&#xff1a;注意&#xff1a;因为使用的是 vite 框架&#x…

51单片机GMS短信自动存取快递柜

实践制作DIY- GC0103-直流电机PID速度控制 一、功能说明&#xff1a; 基于51单片机设计-GMS短信自动存取快递柜 功能介绍&#xff1a; STC89C52RC最小系统板0.96寸OLED显示器DY-SV17F串口语音播报模块4*4矩阵键盘GSM短信模块4路舵机&#xff08;模拟4个柜子&#xff09; ***…

再学C语言21:循环控制语句——do while循环

一、其他赋值运算符 除了最基本的赋值运算符&#xff0c;C还有多个赋值运算符 a b等于a a ba - b等于a a - ba * b等于a a * ba / b等于a a / ba % b等于a a % b 这些赋值运算符的优先级与赋值运算符同样低 运算符优先级&#xff1a;赋值运算符 < 关系运算符 <…

《C++程序设计原理与实践》笔记 第9章 类相关的技术细节

在本章中&#xff0c;我们继续关注主要的程序设计工具——C语言。本章主要介绍与用户自定义类型&#xff08;即类和枚举&#xff09;相关的语言技术细节。这些语言特性大部分是以逐步改进一个Date类型的方式来介绍的。采用这种方式&#xff0c;我们还可以顺便介绍一些有用的类设…

数据结构与算法_五大算法之分治算法

这篇笔记记录分治算法的思想和两道leetcode题。 分治算法思想&#xff1a; 规模为n的原问题的解无法直接求出&#xff0c;进行问题规模缩减&#xff0c;划分子问题&#xff0c;子问题相互独立而且和原问题解的性质是相同的&#xff0c;只是问题规模缩小了。递归地缩小问题规模…

用Python记录一场2023的烟花

弹指间&#xff0c;2023已经到来&#xff0c;新的一年&#xff0c;祝大家新年快乐&#xff0c;阖家幸福呀~~~ 好吧&#xff0c;进入正题&#xff0c;2023的到来&#xff0c;肯定少不了烟花吧&#xff08;外面不让放炮&#xff0c;那咱们就用python放炮【DOGE】&#xff09; 首…

JSON Web Tokens(JWT)简单使用

文章目录什么是JWT&#xff1f;JWD对字符串进行Base64加密JWT加密字符串解释JWT使用场景jwt 特点JWT token在线解密什么是JWT&#xff1f; JWT&#xff08;json web token&#xff09;&#xff0c;它并不是一个具体的技术实现&#xff0c;而更像是一种标准。 JWT规定了数据传输…

Flink系列Table API和SQL之:动态表、持续查询、将流转换成动态表、更新查询、追加查询、将动态表转换为流、更新插入流(Upsert)

Flink系列Table API和SQL之&#xff1a;动态表、持续查询、将流转换成动态表、更新查询、追加查询、将动态表转换为流、更新插入流一、表和流的转换二、动态表三、持续查询四、将流转换成动态表五、更新查询六、追加查询七、将动态表转换为流八、更新插入流(Upsert)一、表和流的…

综合能源系统电压稳定研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【锟斤拷�⊠是怎样炼成的】——两分钟帮你彻底弄懂计算机的编码原理

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; &#x1f33b;&#x1f33b;&#x1f33b;Hello&#xff0c;大家好&#xff0c;我是天寒雨落&#xff0c;一名有趣的博主&#xff0c;小白一枚&#xff0c;多多关照&#x1f61c;&#x1f61c…

解决vue-cli项目打包出现空白页和路径错误的问题

今天为大家分享一篇解决vue-cli(&#xff08;vue-cli2.x版本&#xff09;项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。 vue-cli项目打包&#xff1a; 1. 命令行输入&#xff1a;npm run build 打包出来后项目中就会多了一个文件夹dist&am…