Vue.js基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94433123

vue框架的介绍网上有很多。这里记录一下自己的学习过程。

首先引入js包

1.数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="test">{{content}}</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				content:"测试"
			}
		})
	</script>
</html>

2.class绑定

第一种方式：

其中class的样式是否显示与isActive的值有关，如果为true。则显示，false不显示。

<body>
		<div id="test">
			<div v-bind:class="{active: isActive}">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				isActive:true
			}
		})
	</script>

第二种方式：

绑定的数据对象不必内联定义在模板里

<body>
		<div id="test">
			<div v-bind:class="classObject">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				classObject: {
				    active: false,
				    'text-danger': false
				}
			}
		})
	</script>

第三种方式：

数组语法

<body>
		<div id="test">
			<div v-bind:class="[activeClass, errorClass]">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				activeClass: 'active',
  				errorClass: 'text-danger'
			}
		})
	</script>

第四种方式：

三目运算，只有当isActive=true时，才会渲染activeClass类

<body>
		<div id="test">
			<div v-bind:class="[isActive ? activeClass : '']">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				isActive: true,
			}
		})
	</script>

3.style的绑定

<body>
		<div id="test">
			<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				activeColor: 'red',
  				fontSize: 30
			}
		})
	</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰

<body>
		<div id="test">
			<div v-bind:style="styleObject">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				styleObject:{
					"color": 'red',
  					fontSize: '30px'
				}
				
			}
		})
	</script>

也可以添加多个值

<body>
		<div id="test">
			<div v-bind:style="[styleObject,test]">
				ceshi
			</div>
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				styleObject:{
  					fontSize: '30px'
				},
				test:{
					"color": 'red',
					
				}
				
			}
		})
	</script>