Vue入门

发表于 | 分类于 | 阅读次数:
字数统计: 1k | 阅读时长 ≈ 5

简介及使用方式~

中文社区

简单介绍

刚开始学习vue建议直接下载js包进行引入学习 开发版下载 vue.放在当前目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
</head>
<body>
	<div id="app">{{content}}</div>
	
	<div>{{content}}</div>

	<script>
		//以前js的写法
		//var dom = document.getElementById('app');
		//dom.innerHTML= 'Hello World';
		/*setTimeout(function() {
			var dom = document.getElementById('app');
			dom.innerHTML= 'bye world';
		})*/

		//vue的写法
		//创建一个实例
		var app = new Vue({
			el: '#app',		//实例所管理的区域（id为app的区域）
			data: {
				content: 'Hello World'	//区域中所管理的数据
			}
		});
		setTimeout(function() {
			app.$data.content = 'bye world'
		}, 2000);
	</script>
</body>
</html>

ToDoList

简单练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text"  v-model="inputValue"/>				//模型双向绑定
		<button v-on:click="handleBtnClick">提交</button>		   //事件的触发
		<ul>
			<li v-for= "item in list">{{item}}</li>				//循环
		</ul>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function () {
					this.list.push(this.inputValue);
					this.inputValue ='';
				}
			}
		});
	</script>  
</body>
</html>

组件化

父组件向子组件传值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text"  v-model="inputValue"/>
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<!--v-bind 向组件传递数 父->子组件 -->
			<todo-item v-bind:content="item" v-for= "item in list"></todo-item>
		</ul>
	</div>

	<script>
		//全局组件
		/*Vue.component("TodoItem",{
			props:['content'],					//接收父组件的传值
			template: "<li>{{content}}</li>"	//模板
		})*/

		//局部组件
		var TodoItem = {
			props:['content'],					//接收父组件的传值
			template: "<li>{{content}}</li>"	//模板
		}

		var app = new Vue({
			el: '#app',
			components: {						//局部组件注册
				TodoItem: TodoItem
			},
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function () {
					this.list.push(this.inputValue);
					this.inputValue ='';
				}
			}
		});
	</script>  
</body>
</html>
子组件向父组件传值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text"  v-model="inputValue"/>
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<!--v-bind 向组件传递数 父->子组件 -->
			<todo-item  v-bind:content="item"
						v-bind:index="index" 
						v-for= "(item,index) in list" 
						@delete="handleItemDelete">		<!--接收子组件的触发事件-->
			</todo-item>
		</ul>
	</div>

	<script>
		//全局组件
		/*Vue.component("TodoItem",{
			props:['content'],					//接收父组件的传值
			template: "<li>{{content}}</li>"	//模板
		})*/

		//局部组件
		var TodoItem = {
			props:['content','index'],					//接收父组件的传值
			template: "<li @click='handleBtnClickItemClick'>{{content}}</li>",	//模板
			methods:{
				handleBtnClickItemClick: function(){
					this.$emit("delete",this.index);	//子组件通过事件触发传给父组件
				}
			}
		}

		var app = new Vue({
			el: '#app',
			components: {						//局部组件注册
				TodoItem: TodoItem
			},
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function () {
					this.list.push(this.inputValue);
					this.inputValue ='';
				},
				handleItemDelete: function(index){
					this.list.splice(index,1)
				}
			}
		});
	</script>  
</body>
</html>