目录

 

 

基本概念

div与vue实例绑定

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

插入页面的其他写法

模板指令

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

Vue中的计算属性和侦听器

v-if,v-show,v-for指令

TodoList功能开发

TodoList中组建的拆分

TodoList的删除


 

基本概念

目前有个功能,要使用到前端,本来是用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>

这种套路和Qt有点像,今天的基本认识就到这里了,这个笔记真的丰富啊

Logo

前往低代码交流专区

更多推荐