VUE 2.0——vue入门和v-bind使用

文章目录

前言
vue入门
v-bind使用
- 绑定title
- 绑定class

前言

前后分离是现在开发的主流趋势，对前端正好有些兴趣，写个专栏做零碎的技能知识总结。

vue入门

一切以官方文档为准，博客专栏主要采取Vue 2.0进行测试，后期技能熟练后，会写Vue 3.0的内容。

https://cn.vuejs.org/v2/guide/index.html

初次使用测试Vue，采取最基本的Html风格。

在html页面中，引入对应的vue.js库。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1

实例化一个Vue实例，并设定数据值信息。

var app1 = new Vue({
	el:'#app', // 这里是指定元素dom节点，可以是id、class 或者 类似div标签等，注意不能是body、html标签！
	data:{
		message:'Hello Word，专注写bug!'
	}
})
1
2
3
4
5
6

针对el的设值，做一个说明：

可以设置 id、class、类似div li等元素。

不能设置body、html。

个人认为这里的el，就类似document.getElementById之类的语法简写。

设定数据值和初始化Vue实例后，创建指定的标签，并进行数据的展示

<div id="app">
	{{message}} 
</div>
1
2
3

保存后，访问下列地址信息，即可查询到效果：

http://127.0.0.1:8848/vue-study/html/1.html

项目结果如下所示：
在这里插入图片描述

v-bind使用

v-bind主要用于动态绑定属性。

可以动态地设置某个属性(如：class、title、style等)的属性信息。

绑定title

<div id="app">
	{{message}} 
	<br/>
	<span v-bind:title="message">
	  鼠标悬停几秒钟查看此处动态绑定的提示信息！
	</span>
</div>
1
2
3
4
5
6
7

在这里插入图片描述
这里的v-bind写法为：

v-bind:title="message"

当然也能简写为下列方式：

:title="message"

绑定class

动态变更class的设定值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.backColor{
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div id="app" v-bind:class="{'backColor':isColor}">
			v-bind 设定背景颜色
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript">
		var app1 = new Vue({
			el:"#app",
			data:{
				isColor:false
			}
		});
		
		// 延迟变更设置项
		setTimeout(function(){
			app1.isColor = true;
		},5000)
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

这里的v-bind:class=可以简写为:class=。

参考资料：

https://wenku.baidu.com/view/f80db16d30687e21af45b307e87101f69e31fb3d.html

相关阅读:
ssm养老院信息管理系统毕业设计源码181550
携职教育：最新人力资源管理师报考条件政策解析
多尺度深度学习——day52 基于领导者的多尺度注意力深度人物再识别架构
Retrofit原理一篇文章就够了
lua循环
Nvidia的DeepStream通过配置文件中sink插件，快速进行视频数据的保存
什么蓝牙耳机实惠又好用？高性价比蓝牙耳机推荐
类加载器与双亲委派机制
Matlab | 找出数组/向量中的重复项的索引
第十五届蓝桥杯省赛第二场C/C++B组D题【前缀总分】题解（AC）

原文地址：https://blog.csdn.net/qq_38322527/article/details/125488767