Vue基础知识总结 2：vue 动态绑定

article/2025/10/2 18:08:11

🏆作者简介：哪吒，CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪，专注Java硬核干货分享，立志做到Java赛道全网Top N。

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

目录

一、前言

二、百度百科

三、Vue安装

四、Vue入门语法

1、使用Vue实现hello world

2、vue列表展示

3、实现简单计数器

五、vue中的MVVM

六、理解vue生命周期

1、生命周期代码实例

2、生命周期

3、分析生命周期相关方法的执行时机

七、动态绑定属性

1、v-once

2、v-cloak

3、v-bind基础用法

4、v-bind绑定class属性

5、v-bind绑定class属性，简单写法：

6、v-bind绑定style样式

一、前言

大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。

因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。

二、百度百科

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 

 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

AngularJs是Vue早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。 

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时  ，Vue.js 也能驱动复杂的单页应用。

三、Vue安装

IDE使用WebStorm。

四、Vue入门语法

1、使用Vue实现hello world

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app">{{message}}</div><script src="../js/vue.js"></script>
<script>//编程范式：声明式编程//var没有变量的作用域，var是js设计早期的缺陷// let:变量；const：常量let app = new Vue({el: '#app',//用于挂载要管理的元素data: {//定义数据message: '你好啊，哪吒'}})// 命令式编程// 1.创建div元素，设置id属性//2.定义一个变量叫message//3.将message变量放到前面的div中显示
</script>
</body>
</html>

2、vue列表展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><ul><li v-for="item in girls">{{item}}</li></ul>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊，哪吒',girls: ['美杜莎','云韵','比比东','纳兰嫣然','雅妃']}})
</script>
</body>
</html>

3、实现简单计数器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<div id="app"><h2>当前计数：{{counter}}</h2><!--<button v-on:click="counter++">+</button><button v-on:click="counter--">-</button>--><button v-on:click="add">+</button><button v-on:click="sub">-</button>
</div><script src="../js/vue.js"></script>
<script>// proxy代理const app = new Vue({el: '#app',data: {counter: 0},methods: {add: function (){this.counter++console.log('add被执行')},sub: function (){this.counter--console.log('sub被执行')}}})// 1.拿button元素// 2.添加监听事件
</script>
</html>

五、vue中的MVVM

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

六、理解vue生命周期

1、生命周期代码实例

2、生命周期

3、分析生命周期相关方法的执行时机

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行console.log(this.message) //undefinedthis.show() //TypeError: this.show is not a function// beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法console.log(this.message) //床前明月光this.show() //执行show方法// created执行时，data 和 methods 都已经被初始化好了！// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法console.log(document.getElementById('h3').innerText) //{{ message }}// beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法console.log(document.getElementById('h3').innerText) //床前明月光// 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻console.log('界面显示的内容：' + document.getElementById('h3').innerText)console.log('data 中的 message 数据是：' + this.message)// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {console.log('界面显示的内容：' + document.getElementById('h3').innerText)console.log('data 中的 message 数据是：' + this.message)// updated执行时，内存中的数据已更新，并且页面已经被渲染
}

七、动态绑定属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app">{{message}}<h2>{{firstName}} * {{lastName}}</h2><h2>{{counter * 2}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好',firstName: '比比东',lastName: '美女',counter: 100}})
</script>
</body>
</html>

1、v-once

展示message的初始值，message值变化，界面也不会产生变化。

2、v-cloak

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[v-cloak]{display: none;}</style>
</head>
<body>
<div id="app" v-cloak>{{message}}
</div><script src="../js/vue.js"></script>
<script>//在vue解析之前，div中有一个属性v-cloak//在vue解析之后，div中没有一个属性v-cloaksetTimeout(function(){const app = new Vue({el: '#app',data: {message: '你好'}})},1000)</script>
</body>
</html>

3、v-bind基础用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!-- 错误的写法，这里不可以用mustache语法 --><!--{{imgUrl}}--><!-- v-bind --><img v-bind:src="imgUrl" alt=""><img :src="imgUrl" alt=""><a v-bind:href="aHref">百度一下</a>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好',imgUrl: 'D:\\CSDN\\static\\美杜莎1.jpg',aHref: 'http://www.baidu.com'}})
</script>
</body>
</html>

4、v-bind绑定class属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.active{color: red;}.line{text-decoration: underline;}</style>
</head>
<body>
<div id="app"><h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好',isActive: true,isLine: true},methods: {btnClick: function (){this.isActive = !this.isActive}}})
</script>
</body>
</html>

5、v-bind绑定class属性，简单写法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.active{color: red;}.line{text-decoration: underline;}</style>
</head>
<body>
<div id="app"><h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好',isActive: true,isLine: true},methods: {btnClick: function (){this.isActive = !this.isActive},getClasses: function (){return {active:this.isActive,line:this.isLine}}}})
</script>
</body>
</html>

效果也是一样的。

6、v-bind绑定style样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2><h2 :style="getStyles()">{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'CSDN哪吒',finalSize: 50,finalColor: 'red'},methods: {getStyles: function (){return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}}}})
</script>
</body>
</html>

上一篇：Vue基础知识总结 1：Vue入门

下一篇：Vue知识体系总结 3：Vue常用标签

🏆作者简介：哪吒，CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪，专注Java硬核干货分享，立志做到Java赛道全网Top N。

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。


http://chatgpt.dhexx.cn/article/7RjsxFuy.shtml

相关文章

SQL语句：将查询结果合并一起，语句优化

SQL语句：将查询结果合并一起，语句优化

需求驱动 为了使得表格更好看些&#xff0c;我需要把查询结果合在一起&#xff0c;这样看起来就是一体的了。主要是性能测试有需求&#xff1a; 1、查询当前库设备 2、查询新增设备 3、计算每秒鉴权数 这个对我来说比较简单&#xff0c;分开查询就可以了。但我对自己不能要求这…
阅读更多...
sql查询将多个结果合并成一个字符串（GROUP_CONCAT和CONCAT）

sql查询将多个结果合并成一个字符串（GROUP_CONCAT和CONCAT）

完整语法如下 group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator 分隔符]) SELECT * FROM testgroup 表结构与数据如上 现在的需求就是每个id为一行 在前台每行显示该id所有分数 group_concat 上场&#xff01;&#xff01;&#xff01; SELECT…
阅读更多...
Mysql合并两个sql结果

Mysql合并两个sql结果

第一条sql及结果 SELECT value4 AS ‘压缩机功率’, create_date AS ‘时间’ FROM gree_data WHERE data_belong ‘External_05’ AND create_date > ‘2019-10-23 17:03:59’ ORDER BY create_date 结果展示&#xff1a; 第二条sql及结果 SELECT value2 AS ‘工作模…
阅读更多...
sql——合并两个sql的结果

sql——合并两个sql的结果

表结构 iot_street_road表&#xff1a; iot_street_staff_road表&#xff1a; iot_street_tree表: 想得到结果&#xff1a; road_namestaff_counttree_count街道名工人数量苗木数量 实现方法&#xff1a; 把表一和表二、表一和表三分别按road_id聚合&#xff0c;得到的结果合…
阅读更多...
SQL查询结果拼接

SQL查询结果拼接

Sql查询结果进行拼接 对查询结果进行拼接&#xff0c;可使用group_concat()&#xff0c;concat()&#xff0c;concat_ws()函数。简单介绍下如何应用。 Mysql中的group_concat() 功能&#xff1a;可以group by产生的同一分组的值连接起来,返回一个字符串。 参数格式&#xff…
阅读更多...
sql查询结果合并

sql查询结果合并

使用group_concat合并多行查询结果为一行select gs.id id,gs.gs_no gs_no,gs.apply_date apply_date,gs.create_by create_by,group_concat(gd.name) name,gs.apply_description apply_description,gd.unit_name unit_name,gs.apply_status apply_status,gs.apply_by apply_by …
阅读更多...
oracle 将多个查询结果合并

oracle 将多个查询结果合并

首先要区分一个概况&#xff0c;多个查询结果分两种&#xff0c;一种是一条sql查询多个结果&#xff0c;还有一种是多条sql语句查询出多个结果。 先看第一个&#xff0c;一条语句查询出多个结果&#xff0c;将多个结果合并成一条记录&#xff1a; 在oracle中有一个wm_concat()函…
阅读更多...
mysql 合并两个查询结果

mysql 合并两个查询结果

合并两个查询结果 查询结果1&#xff1a; select date(complete_time) as time,sum(amt) as amount_out from withdraw where state3 group by date(complete_time) 查询结果2 select date(update_time) as time,sum(transfer_amount) as amount_in from user_charge where st…
阅读更多...
SQL合并查询数据，以逗号分隔

SQL合并查询数据，以逗号分隔

功能描述&#xff1a; 将查询到的数据合并为一条数据&#xff0c;以逗号分隔 案例&#xff1a; 功能描述&#xff1a; 现有三张表&#xff1a; Student&#xff08;学生表&#xff09; Course&#xff08;课程表&#xff09; Student-Course&#xff08;学生课程关联表&am…
阅读更多...
MySQL合并查询结果

MySQL合并查询结果

利用 UNION 关键字&#xff0c;可以给出多条 SELECT 语句&#xff0c;并将它们的结果组合成单个结果集。合并 时&#xff0c;两个表对应的列数和数据类型必须相同。各个 SELECT 语句之间使用 UNION 或 UNION ALL 关键字分隔。UNION 不使用关键字 ALL&#xff0c;执行的时候删除…
阅读更多...
SQL如何使两个select语句查询结果合并一个

SQL如何使两个select语句查询结果合并一个

SQL如何使两个select语句查询结果合并一个&#xff1f; ——在网上看到别人遇到的情况&#xff0c;觉得有点意思&#xff0c;先收集下来~ 解决办法&#xff1a; select isnull(a.unit,b.fine_units) unit,isnull(a.number,0) number,isnull(b.fine_number,0) fine_numberfrom…
阅读更多...
sqlsever2019:union合并多个查询结果

sqlsever2019:union合并多个查询结果

文章目录 一、前言二、区别union和连接三、union实例四、union all合并表五、union中的oder by子句六、union自动数据类型转换七、使用union合并不同类型的数据八、union合并不同列数的两个表九、union多表合并 一、前言 表的合并操作将两个表的行合并到一个表中&#xff0c;不…
阅读更多...
SQL 列不同的表查询结果合并

SQL 列不同的表查询结果合并

两个不同的表进行查询&#xff0c;需要把结果合并&#xff0c; 比如table1的列为 id, user_id, type_id,pro_id&#xff1b; table2的列为 id,user_id,collect_id&#xff1b;分别如下图所示 table1&#xff1a; table2&#xff1a; 将两个表的查询结果合并到一起的查询语…
阅读更多...
SQL多个查询结果拼接

SQL多个查询结果拼接

今天有一个需求&#xff0c;我有三张表&#xff0c;一张学生表&#xff0c;一张教师表&#xff0c;一样辅导员。 它们都有编号&#xff0c;都有密码&#xff0c;但是字段名不一样&#xff0c;我想一次查询出三张表里面这些编号和密码放在一个查询结果集里面&#xff01; 我们可…
阅读更多...
各数据库SQL查询结果多行数据合并成一行

各数据库SQL查询结果多行数据合并成一行

SQL查询结果多行数据合并成一行 一、Oracle函数多行数据合并成一行二、Mysql函数多行数据合并成一行三、sqlserver函数多行数据合并成一行四、postgresql函数多行数据合并成一行 业务需要需要在oracle函数里把多行数据合并成一行&#xff0c;顺道发挥下常用的几种方法。 一、O…
阅读更多...
【sql语句基础】——查(select)（合并查询）

【sql语句基础】——查(select)（合并查询）

目录 合并查询单独查询合并查询——UNION ALLUNION ALL定义UNION ALL代码示例UNION ALL查询结果 合并查询——UNION ALLUNION 定义UNION 代码示例UNION 查询结果 合并查询 当我们需要将多个select查询结果合并在一起的时候&#xff0c;可以使用集合操作符号&#xff1a;union …
阅读更多...
微信小程序-循环语句的使用

微信小程序-循环语句的使用

循环语句的使用 小程序中的循环语句 for&#xff0c;就是在.js中定义循环的数组&#xff0c;把要循环的数据写到数组里面&#xff0c;然后再到*.wxml中进行逐一展示就行了。这里结合一下icon标签的属性来演示 循环语句的基本使用。 重点需要明白的是&#xff1a;小程序中的 fo…
阅读更多...
微信小程序-页面FOR循环和嵌套循环

微信小程序-页面FOR循环和嵌套循环

单个循环 <view wx:for"{{pinpaiTishi}}" wx:key"{{xxx}}"><view wx:if"{{item.name!null}}" wx:key"{{xxxx}}">//判断name是否为null<view class"tr"><view class"td-left"></view&…
阅读更多...
微信小程序如何双重循环

微信小程序如何双重循环

微信小程序解决双重循环 准备知识 wx:for : 使用数组中各项的数据重复渲染该组件 当前项的下标变量名默认为 index&#xff0c;当前项的变量名默认为 item 可使用 wx:for-item 指定当前元素的变量名&#xff0c;使用 wx:for-index 指定当前下标的变量名 wx:key : 指定列表中项…
阅读更多...
微信小程序—for循环包括自定义for循环中的item和index（图文）

微信小程序—for循环包括自定义for循环中的item和index（图文）

微信小程序—for循环包括自定义for循环中的item和index <view wx:for"{{list}}" wx:key"{{index}}"><text>我是第一个循环的内容---{{item}}</text> </view><!-- 自定义for循环的item和index --> <view wx:for-item&quo…
阅读更多...
推荐文章

Copyright @ 2022~2023