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

    文章目录

    前言

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

    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

  • 相关阅读:
    Linux 系统时间同步 ​使用 NTP 服务时间同步​
    研究c#异步操作async await状态机的总结
    C语言回调函数到底是怎么回事？
    Linux 命令学习 -磁盘分区和格式化
    接口自动化和UI自动化的区别
    14 似然比检验
    基于空间金字塔网络的光流估计
    RecyclerView刷新后定位问题
    小程序开发——认识小程序
    【c语言】推箱子
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125488767