Vue的入门学习

发表于 | 分类于 |

这篇博客是对Vue的入门学习，记录Vue的基本知识点。

搭建本地开发环境

  • 安装live-server：

    npm install -g live-server

  • 运行命令

    $ live-server --browser=chrome --entry-file=index.html

入门知识学习

Vue的核心是通过模板语法响应式地将数据渲染到DOM上。

  • 文本插值 
1
2
3
4
5
6
7
8
9
10
11
<div id="app">
	{{message}}
</div>
var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
});
  • 指令: v-bind
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//span元素的title属性与Vue实例的message属性保持一致
<div id="app2">
	<span v-bind:title="message">
		Hover your mouse over me
	</span>
</div>
var app2 = new Vue({
	el: '#app2',
	data: {
		message: 'You loaded this page on ' + new Date().toLocaleString()
	}
});
  • 条件v-if和循环v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app3" >
	<p v-if="seen">Invisible</p>
</div>
var app3 = new Vue({
	el: '#app3',
	data: {
		seen: false
	}
});
<div id="app4">
	<ol>
		<li v-for="todo in todos">
			{{todo.task}}
		</li>
	</ol>
</div>
  • 处理用户输入：使用v-on添加事件处理器
1
2
3
4
5
<div id="app5">
	<p>{{message}}</p>
	<button v-on:click='reverseMessage'>Reverse Message</button>
</div>
  • 双向绑定：v-model
1
2
3
4
5
6
7
8
9
10
11
12
<div id="app6">
	<p>{{message}}</p>
	<input v-model="message">
</div>
var app6 = new Vue({
	el: '#app6',
	data: {
		message: 'Hello'
	}
});
  • 组件
1
2
3
4
5
6
7
8
9
10
11
组件本质上是带有预定义选项的Vue实例。
注册组件
	Vue.component('todo-item', {
 			template: '<li>This is a todo</li>'
	})
	
	Vue.component('todo-item', {
		props: ['todo'],
 			template: '<li>{{ todo.text }}</li>'
	})