在这篇文章，你将快速学习到：
- 如何安装 Vue.js
- 基础
- Hello World
- Vue 实例
- 模版语法 & 数据绑定
- 计算属性 & 监听器
- 事件处理
- 表单
如何安装 Vue.js
- 标准安装
npm install vue- CLI
npm install --global vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev
基础
Hello World
- 导入 vue.js
- 创建 index.html
- 创建 Vue 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Hello Vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
Vue 实例
- 构造函数
- 属性和方法
- 实例生命周期
- created
- beforeMounted
- mounted
- updated
- destroyed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Vue Instance</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
Vue Instance
<ul>
<li>constructor</li>
<li>properties & methods</li>
<li>instance lifecycle hooks</li>
</ul>
</div>
<script>
var data = { a: 1 };
var vm = new Vue({
el: '#app',
data: data,
created: function(){
console.log('created');
},
mounted: function(){
console.log('mounted');
},
updated: function(){
console.log('updated');
},
destroyed: function(){
console.log('destroyed');
}
});
console.log(vm.a === data.a);
console.log(vm.$data === data);
vm.$watch('a', function(newVal, oldVal){
});
</script>
</body>
</html>
模版语法 & 数据绑定
- 文本: <span>{{ msg }}</span>
- 原始 HTML: <span v-html="rawHtml"></span>
- 属性: <span v-bind:title="title"></span> shorthand <span :id="title"></span>
- 表达式: {{ number + 1 }} only contain one single expression
- 过滤器: {{ message | capitalize }}
- 指令: <span v-if="seen">Now you see me</span>
- 指令修饰符: <a v-on:click.stop="doThis">stop modifiers</a>
- Class 绑定: <span v-bind:class="{active:isActive}">class</span>
- Style 绑定:
- 条件渲染: v-if, v-else, v-show
- 列表渲染: v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Template Syntax</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
Text: {{ text }}<br />
Raw Html: <span v-html="rawHtml"></span><br />
Attributes: <span v-bind:title="attributeTitle">{{ attributeTitle }}</span><br />
Expressions: <span>{{ exp + 1}}</span><br />
Filters: <span>{{ 'toUpperFilter' | toUpperFilter}}</span><br />
Directives: <span v-if="seen">v-if directive</span><br />
Modifiers: <a v-on:click.stop="doThis">stop modifiers</a><br />
Conditional: <span v-if="seen">v-if directive</span><br />
List: <span v-for="n in 10">{{ n }}</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: 'bind text',
rawHtml: '<span>bind html</span>',
attributeTitle: 'bind title',
exp: 2,
seen: true
},
filters: {
toUpperFilter: function(val) {
return val.toUpperCase();
}
}
});
</script>
</body>
</html>
计算属性 & 监听器
TODO
事件处理
- 事件监听
- 事件处理方法
- 事件修饰符
- .stop
- .prevent
- .capture
- .self
- 关键修饰符
- <input v-on:keyup.enter="submit">
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- Vue.config.keyCodes.f1 = 112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Event</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
listening: <button @click="counter++">Add {{ counter }}</button><br />
method event handlers: <button @click="greet('Hello', $event)">Greet</button><br />
event modifiers: <a href="http://m.baichanghui.com" @click.prevent="greet('Hello', $event)">.prevent</a><br />
key modifiers: <input @keyup.enter="greet('Hello', $event)" type="text" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
greet: function(msg, e) {
alert(msg);
console.log(e);
}
}
});
</script>
</body>
</html>
表单
- text
- checkbox
- radio
- select
- value 绑定
- 修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Forms</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
Text:
<input v-model="message" />
<span>Message is {{ message }}</span><br />
Checkbox:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label><br />
Radio:
<input type="radio" id="radio" value="One" v-model="picked">
<input type="radio" id="radio" value="Two" v-model="picked">
<span>Picked: {{ picked }}</span><br />
Select:
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select><span>Selectd: {{ selected }}</span><br />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
checked: false,
picked: 'One',
selected: 'A'
}
});
</script>
</body>
</html>
接下来我们会介绍 Vue 的高级使用
- 组件
- 自定义指令
- 过滤器
- 混入
- 路由
- 插件
〖坚强的一俢〗
