在这篇文章，你将快速学习到：
如何安装 Vue.js
基础
Hello World
Vue 实例
模版语法 & 数据绑定
计算属性 & 监听器
事件处理
表单
如何安装 Vue.js
标准安装
npm install vueCLI
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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 >.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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 的高级使用
组件
自定义指令
过滤器
混入
路由
插件
〖坚强的一俢〗
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦