基本概念

div与vue实例绑定

挂载点，模板，实例之间的关系

插入页面的其他写法

基本概念

目前有个功能，要使用到前端，本来是用Bootstrap的，但领导要求要用vue框架来做，本来还有的情绪，但在继续学习spring boot开发，使用前端的时候，发现大家都是使用vue，而且一般后端发送json数据，vue来解析，这的确是非常方便，比Bootstrap好了很多倍。今天特意花一天时间来初步学习下vue这个创建。

div与vue实例绑定

程序运行截图如下：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
 
<body>
	<div id="root">{{msg}}</div>
	
	<script>
		new Vue({
		
			el: "#root",
			data: {
				msg: "How old are you"
			}
		})
	</script>
</body>
 
</html>

这里是创建vue实例与html上的元素进行绑定

el：让vue的实例接管哪一个element，上面的代码是接管root；

data：为vue实例里面的数据。

挂载点，模板，实例之间的关系

如下代码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
 
<body>
	<div id="root"></div>
	
	<script>
		new Vue({
		
			el: "#root",
			template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
			data: {
				msg: "How old are you",
				number: 10086
			}
		})
	</script>
</body>
 
</html>

运行截图如下：

挂载点：就是html中的div的那个root就为挂载点；

实例：script中new Vue就是一个实例；

模板：挂载点内部的内容都称之为模板，如上面的template。

挂载点用于显示数据，实例用于存储数据和其他绑定，模板用于提供数据。

插入页面的其他写法

插值法：{{}}

代码就是上面的那些！

v-text显示


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
 
<body>
	<div id="root" v-text="msg"></div>
	
	<script>
		new Vue({
		
			el: "#root",
			//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
			data: {
				msg: "How old are you",
				number: 10086
			}
		})
	</script>
</body>
 
</html>

运行截图如下：

v-html显示

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head>
 
<body>
	<div id="root" v-html="content"></div>
	
	<script>
		new Vue({
		
			el: "#root",
			//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',
			data: {
				msg: "How old are you",
				content: "<h1>How are you<h1>"
				number: 10086
			}
		})
	</script>
</body>
 
</html>

运行截图如下：

这里v-html主要用与当有<h1>这种修饰的。

模板指令

如果有这样的一种功能，点击源码中的<h1>标签内容，然后变成How old are you

使用v-on来绑定点击事件：

点击后：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div v-on:click="handleClick"><h1>{{content}}</h1></div>
	</div>
	
	<script>
		new Vue({
		
			el: "#root",
			data: {
				content: "How are you"
			},
			methods: {
				handleClick: function(){
				
					this.content = "How old are you"
				}
			}
		})
	</script>
</body>
 
</html>

这里可以简写把v-on简写成@

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div @click="handleClick"><h1>{{content}}</h1></div>
	</div>
	
	<script>
		new Vue({
		
			el: "#root",
			data: {
				content: "How are you"
			},
			methods: {
				handleClick: function(){
				
					this.content = "How old are you"
				}
			}
		})
	</script>
</body>
 
</html>

Vue中的属性绑定和双向数据绑定

html中有个title，当鼠标移动上去会有tip显示：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div title="hehehehehehehda"><h1>呵呵</h1></div>
	</div>
	
	<script>
		new Vue({
		
			el: "#root"
		})
	</script>
</body>
 
</html>

v-bind指XXX属性和什么数据项绑定

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div v-bind:title="title"><h1>呵呵</h1></div>
	</div>
	
	<script>
		new Vue({
		
			el: "#root",
			data: {
				title: "呵呵呵额和"
			}
		})
	</script>
</body>
 
</html>

用一个input框，输入数据后修改h1标签的内容这样进行双向数据绑定。

其中v-bind:可以简写为 : 这个符号

使用v-model可以实现双向绑定

下面代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="content" />
		<div><h1>{{content}}</h1></div>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			title: "呵呵呵",
			content: "mmp"
		}
	})
	</script>
</body>
 
</html>

运行截图如下：

Vue中的计算属性和侦听器

先构造如下页面，输入姓名后，会在上面显示：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		姓：<input v-model="firstName" />
		名：<input v-model="lastName" />
		<div><h1>{{firstName}}{{lastName}}</h1></div>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			firstName: '',
			lastName: ''
		}
	})
	</script>
</body>
 
</html>

运行截图如下：

还可以通过这种方式：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		姓：<input v-model="firstName" />
		名：<input v-model="lastName" />
		<div><h1>{{fullName}}</h1></div>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			firstName: '',
			lastName: ''
		},
		computed: {
			
			fullName: function(){
				
				return this.firstName + this.lastName
			}
		}
	})
	</script>
</body>
 
</html>

下面说下侦听器，当修改了input后，Vue中的count属性会加1

使用watch关键字！

运行截图如下：

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		姓：<input v-model="firstName" />
		名：<input v-model="lastName" />
		<div><h1>{{fullName}}</h1></div>
		<div><h1>{{count}}</h1></div>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			firstName: '',
			lastName: '',
			count: 0
		},
		computed: {
			
			fullName: function(){
				
				return this.firstName + this.lastName
			}
		},
		watch:{
			fullName: function(){
				
				this.count ++
			}
		}
	})
	</script>
</body>
 
</html>

v-if，v-show，v-for指令

如果有下面这个需求，点击按钮text就影藏，再点击就显示！

如下源码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div v-if="show"><h1>Hello world</h1></div>
		<button @click="handleClick">toggle</button>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			show: true
		},
		methods: {
			handleClick: function(){
				this.show =! this.show;
			}
		}
	})
	</script>
</body>
 
</html>

运行截图如下：

点击后：

同样，使用这种方式也是可以的，至少看起来是一样的


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<div v-show="show"><h1>Hello world</h1></div>
		<button @click="handleClick">toggle</button>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			show: true
		},
		methods: {
			handleClick: function(){
				this.show =! this.show;
			}
		}
	})
	</script>
</body>
 
</html>

使用v-show，实际上并没有从dom树上删除，而是加了一个display: none的属性值。

从性能上面来说，v-show的确要高些，因为他不用被销毁。

下面来看看v-for，做一个循环展示：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<ul>
			<li v-for="item of list">{{item}}</li>
		</ul>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			list: [1, 2, 3]
		}
	})
	</script>
</body>
 
</html>

运行截图如下：

这里有个小技巧，输入:key可以提升每一个item的渲染性能，并且添加index会得到下标：

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<ul>
			<li v-for="(item, index) of list" :key="item">{{item}}  {{index}}</li>
		</ul>
	</div>
 
	<script>
	new Vue({
	
		el: "#root",
		data: {
			list: ['球球', '腿腿', '米线']
		}
	})
	</script>
</body>
 
</html>

运行截图如下：

TodoList功能开发

要做一个功能，一个输入框一个提交，点击提交，数据就会在列表中；

运行截图如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<li v-for="(item, index) of list" :key="index">
			{{item}}
			</li>
		</ul>
	</div>
	<script>
	new Vue({
	
		el: "#root",
		data: {
			inputValue: "Hello",
			list: []
		},
		methods:{
			handleSubmit: function(){
				this.list.push(this.inputValue)
				this.inputValue = ""
			}
		}
	})
	</script>
</body>
 
</html>

TodoList中组建的拆分

组建：页面上的某一个部分。

通过组建，但项目比较大的时候，一般企业都应该采用的方式；

把上面的TodoList改成组建的形式：

使用Vue.component进行组建的注册，这个组建是一个全局的组建。

使用 var TodoItem = {

template: '<li>item</li>'

}

这种是局部组建，需要在vue中做一个声明

components:{

}

如下的全局组建：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<todo-item></todo-item>
		</ul>
	</div>
	<script>
		Vue.component('todo-item', {
			template: '<li>呵呵</li>'
		})
	
		new Vue({
			el: "#root",
			data: {
				inputValue: '',
				list: []
			},
			methods:{
				handleSubmit: function(){
					this.list.push(this.inputValue)
					this.inputValue = ""
				}
			}
		})
	</script>
</body>
 
</html>

运行截图如下：

局部组建：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<todo-item></todo-item>
		</ul>
	</div>
	<script>
		//Vue.component('todo-item', {
		//	template: '<li>呵呵</li>'
		//})
	
		var TodoItem = { template: '<li>item</li>' }
	
		new Vue({
			el: "#root",
			components: {
				'todo-item': TodoItem
			},
			data: {
				inputValue: '',
				list: []
			},
			methods:{
				handleSubmit: function(){
					this.list.push(this.inputValue)
					this.inputValue = ""
				}
			}
		})
	</script>
</body>
 
</html>

接收从外部传来的content属性：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
		</ul>
	</div>
	<script>
		Vue.component('todo-item', {
			props: ['content'],
			template: '<li>{{content}}</li>'
		})
	
	
		new Vue({
			el: "#root",
			data: {
				inputValue: '',
				list: []
			},
			methods:{
				handleSubmit: function(){
					this.list.push(this.inputValue)
					this.inputValue = ""
				}
			}
		})
	</script>
</body>
 
</html>

注意，在Vue中每一个组建都是Vue的实例。

TodoList的删除

使用handleSubmit实现删除的功能：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
 
<body>
 
	<div id="root">
		<input v-model="inputValue"/>
		<button @click="handleSubmit">提交</button>
		<ul>
			<todo-item v-for="(item, index) of list" :key="index" :content="item"
			:index="index" @delete="handleDelete"></todo-item>
		</ul>
	</div>
	<script>
		Vue.component('todo-item', {
			props: ['content', 'index'],
			template: '<li @click="handleClick">{{content}}</li>',
			methods:{
				handleClick: function(){
					
					//触发后发送事件
					this.$emit('delete', this.index)
				}
			}
		})
	
	
		new Vue({
			el: "#root",
			data: {
				inputValue: '',
				list: []
			},
			methods:{
				handleSubmit: function(){
					this.list.push(this.inputValue)
					this.inputValue = ""
				},
				handleDelete: function(index){
					this.list.splice(index, 1)
				}
			}
		})
	</script>
</body>
 
</html>