Vue入门（二）——本地应用

matt

发布于 2022-10-25 16:08:13

6990

发布于 2022-10-25 16:08:13

文章被收录于专栏：CSDN迁移CSDN迁移

Vue入门（二）——本地应用

一、Vue指令

一、Vue指令

el：挂载点 data：数据 methods：方法

1.1 内容绑定，事件绑定

（1）v-text

设置标签的内容，只解析文本。需要部分替换，使用插值表达式{{}}的方式

<h2 v-text="message+'!'"><h2>

<h2>{{ message+"!" }}?</h2>

（2）v-html

设置元素的innerHTML，内容有HTML结构时会解析为标签。

<h2 v-html="message"></h2>

data: {
	message: "<a href='www.baidu.com'>百度</a>"
}

（3）v-on

为元素绑定事件，方法内部通过this关键字可以访问定义在data中的数据。简写为@。

// v-on:事件名="方法" 或者 @事件名="方法"
<div id="app">
	<input type="button" value="v-on Test" v-on:click="doIt">
</div>

var vm = new Vue({
	el: "#app",
	methods: {
		doIt: function(){
			// TODO
		}
	}
})

（4）案例一：计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	
	<body>
		<!-- 示例一: 计数器 -->
		<div id="demo">
			<button @click="sub">-</button>
			<span>{{ number }}</span>
			<button @click="add">+</button>
		</div>
		<script>
			var vm = new Vue({
				el: "#demo",
				data: {
					number: 0
				},
				methods: {
					add: function(){
						if (this.number < 10) {
							this.number++;
						} else {
							alert("no more!");
						}
					},
					sub: function(){
						if (this.number > 0) {
							this.number--;
						} else {
							alert("no less!");
						}
					}
				}
			});
		</script>
	</body>
</html>

1.2 显示切换，属性绑定

（1）v-show

根据表达值得真假，切换元素得显示和隐藏。本质是切换元素的display，指令后面的内容都会解析为布尔值。

<div v-show="isShow">Can you see me?<div>

data: {
	isShow: "true"
}

（2）v-if

根据表达值的真假，切换元素的显示和隐藏。本质是操纵DOM元素，控制是否在DOM树中。性能开销较大。

<div v-if="isShow">Can you see me?<div>

data: {
	isShow: "true"
}

（3）v-bind

设置元素的属性（如：src，title，class），简写为:属性名。

<div id="app">
	<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'">
	<img v-bind:class="{active:isActive}">
	<img v-bind:class="isActive?'active':''">
</div>

var vm = new Vue({
	el: "#app",
	data: {
		imgSrc: "...",
		imgTitle: "...",
		isActive: false
	},
	methodes: {
		toggleActive: function(){
			this.isActive = !this.isActive;
		}
	}
})

（4）案例二：图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	
	<body>		
		<!-- 示例二: 图片切换 -->
		<div id="pictureSwap">
			<button v-show="index>0" @click="prev">left</button>
			<img :src="imgArr[index]" />
			<button v-show="index<imgArr.length-1" @click="next">right</button>
		</div>
		
		<script>
			var vm = new Vue({
				el: "#pictureSwap",
				data: {
					imgArr: [
						"./img/img1.jpg",
						"./img/img2.jpg",
						"./img/img3.jpg",
						"./img/img4.jpg"
					],
					index: 0
				},
				methods: {
					prev: function(){
						this.index--;
					},
					next: function(){
						this.index++;
					}
				}
			})
		</script>
	</body>
</html>

1.3 列表循环，表单元素绑定

（1）v-for

根据数据生成列表结果，经常和数组一起使用，数组长度的更新是响应式同步更新到页面上的。

<ul>
	<li v-for="(item,index) in arr">
		元素为: {{ index+1 }} + {{ item }}
	</li>
</ul>
<h2 v-for="item in objs">
	{{ item.name }}
</h2>

data: {
	arr: ["1","2","3"],
	objs: [
		{name: "a"},
		{name: "b"}
	]
}

（2）v-on 补充

事件绑定的方法协同函数调用的形式，可以传递自定义参数；.事件修饰符可以对事件进行限制。

<div id="app">'
	<input type="button" @click="doIt(p1,p2)" />
	// keyup 为键盘事件
	<input type="text" @keyup.enter="sayHi" />
</div>

methods: {
	doIt: function(p1, p2){
		console.log(p1+p2);
	},
	sayHi: function(){
		alert("eat?");
	}
}

（3）v-model

获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联。

<div id="app">'
	<input type="text" v-model="message" />
	// 输入和显示的值message都会同步修改
	<h2>{{ message }}</h2>
</div>

data: {
	message: "..."
}

（4）案例三：记事本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	
	<body>		
		<!-- 示例三: 记事本 -->
		<section id="todoapp">
			<header class="header">
				<h1>NoteBook</h1>
				<input v-model="inputValue" @keyup.enter="add" placeholder="Please input your tasks..." />
			</header>

			<section class="main">
				<ul class="todo-list">
					<li class="todo" v-for="(item,index) in list">
						<div class="view">
							<span class="index">{{ index+1 }}.</span>
							<label>{{ item }}</label>
							<button class="destory" @click="remove(index)">X</button>
						</div>
					</li>
				</ul>
			</section>
			
			<footer class="footer">
				<span class="todo-count" v-show="list.length>0">
					<strong>{{ list.length }}</strong> items left
				</span>
				<button class="clear-completed" @click="clear" v-show="list.length>0">clear</button>
			</footer>
		</section>
		
		<script>
			var vm = new Vue({
				el: "#todoapp",
				data: {
					list: [],
					inputValue: ""
				},
				methods: {
					add: function(){
						this.list.push(this.inputValue)
					},
					remove: function(index){
						this.list.splice(index, 1);
					},
					clear: function(){
						this.list = [];
					}
				}
			})
		</script>
	</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除

bind