vue快速入门1

_Joker_
386 阅读6分钟

01 文本插值

首先我们来学习采用简洁的模板语法{{}}来将数据动态渲染到页面，是实时更新的。 首先要创建一个Vue对象，el属性是作用域，data属性是数据源，代码如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!从入门到放弃'
			}
		})
	</script>
</html>

运行结果如下

vue文本插值.gif

除了文本插值，我们还可以像这样来绑定元素特性：

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

运行结果

02 钩子函数

created 钩子可以用来在一个实例被创建之后执行代码，示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			钩子函数
		</div>
	</body>
	<script>
		var app = new Vue({
			created:function(){
				console.log("实例被创建之后就会执行created 钩子函数里的代码")
			}
		})
	</script>
</html>

运行结果

v-once

只渲染元素和组件一次。不需要表达式。示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<span>Message: {{ msg }}</span>
			<hr>
			<span v-once>这个将不会改变: {{ msg }}</span>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				msg: 123,
			}
		})
	</script>
</html>

运行结果

v-html

更新元素的 innerHTML。示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ rawHtml }}</p>
			<p><span v-html="rawHtml"></span></p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				rawHtml: '<p style="color: red">red</p>'
			}
		})
	</script>
</html>

运行结果

v-bind

绑定属性和id

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			#red-color {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input v-bind:value="value"></input>
			<p :id='color'>缩写绑定id</p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				value: '绑定value',
				color: 'red-color'
			}
		})
	</script>
</html>

运行结果

绑定布尔属性

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-bind:disabled="isButtonDisabled">Button是否可点击</button>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				isButtonDisabled:true
			}
		})
	</script>
</html>

运行结果

绑定表达式

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<div v-bind:count='t1+t2'></div>
			<div v-bind:sum='t3+t4'></div>
			<p>{{t1+1}}</p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				t1:1,
				t2:2,
				t3:'3',
				t4:'4'
			}
		})
	</script>
</html>

运行结果

绑定三元表达式

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{ t1+1==3 ? 'YES' : 'NO' }}</div>
			<div v-bind:yn="t1+1==3 ? 'YES' : 'NO'"></div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				t1:1
			}
		})
	</script>
</html>

运行结果

绑定函数

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:title="getTitle()"></div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				getTitle:function(){
					return '绑定函数';
				}
			}
		})
	</script>
</html>

运行结果

绑定数组

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<div v-bind:title="arr"></div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				 arr:[1,2,3]
			}
		})
	</script>
</html>

运行结果

绑定class

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{red:isRed,fontSize:isBig}">绑定一个对象，以动态地切换 class </div>
			
			<div class="back" v-bind:class="{red:isRed,fontSize:isBig}">可以与普通的 class 属性共存</div>
			
			<div v-bind:class="classObject">绑定的数据对象不必内联定义在模板里，可封闭成一个对象</div>

			<div v-bind:class="obj">绑定一个返回对象的计算属性</div>
			
			<div v-bind:class="[activeClass, errorClass]">绑定class数组，以应用一个 class 列表 </div>
			
			<div v-bind:class="[isActive ? activeClass : '', errorClass]">用三元表达式根据条件切换列表中的class</div>
			
			<div v-bind:class="[{ active: isActive }, errorClass]">在数组语法中使用对象语法</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				isRed: true,
				isBig: true,
				classObject: {
					red: true,
					fontSize: false
				},
				isActive: true,
				error: null,
				activeClass: 'active',
				errorClass: 'text-danger'
			},
			computed: {
				obj: function() {
					return {
						active: this.isActive && !this.error,
						'text-danger': this.error && this.error.type === 'fatal'
					}
				}
			}
		})
	</script>
	<style>
		.red {
			color: red;
		}

		.fontSize {
			font-size: 20px;
		}

		.back {
			font-style: italic;
		}

		.active {
			color: #0000FF;
		}

		.text-danger {
			font-size: 20px;
		}
	</style>
</html>

运行结果

绑定内联样式

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</div>
			<!-- 直接绑定到一个样式对象通常更好，这会让模板更清晰 -->
			<div v-bind:style="styleObject">直接绑定到一个样式对象</div>
			<!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上 -->
			<div v-bind:style="[baseStyles, overridingStyles]">数组语法使用多个样式对象</div>

		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				activeColor: 'red',
				fontSize: 20,
				styleObject: {
					color: 'red',
					fontSize: '13px'
				},
				baseStyles: {
					color: 'blue',
				},
				overridingStyles: {
					fontSize: '20px'
				}
			}
		})
	</script>
	<style>
	</style>
</html>

运行结果

动态参数绑定

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a v-bind:[attributename]="url">动态参数绑定属性</a>
			<a v-on:[eventname]="doSomething"> 动态事件 </a>

		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				url: 'http://www.panbingwen.cn/',
				attributename: "href",
				eventname: "mouseenter",
				doSomething: function() {
					alert("使用动态参数为一个动态的事件名绑定处理函数");
				}
			}
		})
	</script>
</html>

运行结果

动图中的操作是点击超链接，鼠标进入事件变成鼠标离开事件

码云代码

github代码

个人网站：www.panbingwen.cn

avatar
文章
阅读
粉丝