什么是vue.js
- vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架锁孟。個(gè)人觀點(diǎn)，目前大型項(xiàng)目前后端分離已成為趨勢(shì)茁瘦，vue采用自底向上增量開發(fā)設(shè)計(jì)品抽，核心庫只關(guān)注視圖層，易于上手甜熔，還便于與第三方庫或既有項(xiàng)目整合圆恤。
學(xué)習(xí)之前
- 學(xué)習(xí)框架之前，需掌握html腔稀，css盆昙，javascript羽历，計(jì)算機(jī)網(wǎng)絡(luò)等知識(shí)。
起步
- 新手不推薦直接使用
vue-cli淡喜。推薦直接新建一個(gè)html文件秕磷，然后用<script>標(biāo)簽引入Vue。<script src="https://unpkg.com/vue"></script>
聲明式渲染
vue.js的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)dom的系統(tǒng)：
-
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>My first Vue app</title> <script src="https://unpkg.com/vue"></script> </head> <body> <h3>samlpe1 聲明式渲染</h3> <div id="app"> {{ message }} </div> <script> let app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>- 2017-10-05 23-18-54屏幕截圖.png
-
瀏覽器打開輸出
Hello Vue炼团！澎嚣，這便是我們生成的第一個(gè)Vue應(yīng)用！現(xiàn)在數(shù)據(jù)與DOM已經(jīng)綁定在一起了瘟芝，所有元素都是響應(yīng)式的币叹，按F12打開瀏覽器的控制臺(tái)，修改app._data.message模狭，會(huì)發(fā)現(xiàn)頁面會(huì)做相應(yīng)的改變颈抚。2017-10-05 23-18-54屏幕截圖.png
vue.js指令
- 指令帶有前綴
v-，以表示他們是Vue提供的特殊屬性嚼鹉，他們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為贩汉。 -
v-bind:屬性綁定指令。 -
v-if="bool":條件指令锚赤。 -
v-for="elem in Array":循環(huán)指令匹舞。 -
v-on:該指令可用來綁定一個(gè)事件監(jiān)聽器。 -
v-model:表單與應(yīng)用之間雙向綁定指令线脚。
組件化應(yīng)用構(gòu)建
類似angular的Component赐稽，vue也存在類似的組件系統(tǒng)，他允許我們使用小型浑侥、獨(dú)立的可復(fù)用的組件構(gòu)建大型應(yīng)用姊舵。
-
在Vue中注冊(cè)組件：
Vue.component('todo-item'{ template:'<div>html 模板</div>' })注冊(cè)之后，可直接使用
<todo-item></todo-item>標(biāo)簽使用該組件寓落。
demo
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h3>samlpe1 聲明式渲染</h3>
<div id="app">
{{ message }}
</div>
<h3>samlpe2 綁定DOM元素屬性</h3>
<div id="app-2">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息括丁！
</span>
</div>
<h3>samlpe3 條件</h3>
<div id="app-3">
<p v-if="seen">now you can look me</p >
</div>
<h3>samlpe4 循環(huán)</h3>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<h3>samlpe5 事件監(jiān)聽</h3>
<div id="app-5">
<p>{{message5}}</p >
<button v-on:click="reverseMessage">逆轉(zhuǎn)信息</button>
</div>
<h3>samlpe6 表單與應(yīng)用狀態(tài)雙向綁定</h3>
<div id="app-6">
<p>{{message6}}</p >
<input v-model="message6">
</div>
<h3>samlpe7 組件化應(yīng)用構(gòu)建</h3>
<div id="app-7">
<ol>
<!--
現(xiàn)在我們?yōu)槊總€(gè)todo-item提供todo對(duì)象
todo對(duì)象是變量，即內(nèi)容可以是動(dòng)態(tài)的伶选。
我們也需要為每個(gè)組件提供一個(gè)key史飞。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ol>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
let app2 = new Vue({
el:'#app-2',
data:{
message:'頁面加載于 ' + new Date().toLocaleDateString()
}
});
let app3 = new Vue({
el:'#app-3',
data:{
seen:true
}
});
let app4 = new Vue({
el:'#app-4',
data:{
todos:[
{text:'學(xué)習(xí)javascripts'},
{text:'學(xué)習(xí)vue'},
{text:'做個(gè)項(xiàng)目'}
]
}
});
let app5 = new Vue({
el:'#app-5',
data:{
message5:'hello vue.js'
},
methods:{
reverseMessage: function () {
this.message5 = this.message5.split('').reverse().join('');
}
}
});
let app6 = new Vue({
el:'#app-6',
data:{
message6:'Hello world'
}
});
Vue.component('todo-item' , {
props:['todo'],
template:'<li>{{todo.text}}'
})
let app7 = new Vue({
el:'#app-7',
data:{
groceryList:[
{id:0 , text:'蔬菜'},
{id:1 , text:'奶酪'},
{id:2 , text:'水果'},
]
}
})
</script>
</body>
</html>
參考資料
- 文檔！文檔仰税！文檔构资！左轉(zhuǎn)vue.js
