漸進(jìn)式框架 Vue.js 基礎(chǔ)入門及簡(jiǎn)單編程演示
---------------------- 概念基礎(chǔ) ----------------------
Vue (pronounced /vju?/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Vue（發(fā)音為/vju?/，與view一樣）是構(gòu)建用戶界面的漸進(jìn)式框架。
與其他單一框架不同的是，Vue從頭開始被設(shè)計(jì)為可以逐步采用。
核心庫(kù)只專注于視圖層，并且很容易與其他庫(kù)或現(xiàn)有項(xiàng)目集成。
另一方面，與現(xiàn)代工具和支持庫(kù)結(jié)合使用時(shí)，Vue也能夠完美地支持復(fù)雜的單頁(yè)應(yīng)用程序。
如果有?HTML，CSS和JavaScript 相關(guān)的基礎(chǔ)，會(huì)更加容易理解學(xué)習(xí)。
Vue.js是一種基于MVVM模式的框架。了解 MVC 的接受起來(lái)更快一些。
(1)MVC是Web 開發(fā)中常用的一種模式，將開發(fā)大致分為三層實(shí)體模型層，前端視圖層，邏輯控制層。
Model : 業(yè)務(wù)邏輯和實(shí)體模型(biz/bean)
View : 布局文件(XML)
Controller : 控制器(Activity)
(2) MVVM模式
Model : 實(shí)體模型(biz/bean)
View : 布局文件(XML)
ViewModel : DataBinding所在之處，對(duì)外暴露出公共屬性，View和Model的綁定器。數(shù)據(jù)的綁定是 MVVM 模式的特點(diǎn)。
易用： 有 HTML,CSS,JavaScript 快速入門；
靈活： 簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用；
高效： 16kb min+gzip 的運(yùn)行大小,超快虛擬 DOM ,最省心的優(yōu)化；
簡(jiǎn)潔： HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個(gè) Vue 實(shí)例；
快速： 精確有效的異步批量 DOM 更新；
組件化： 用解耦、可復(fù)用的組件來(lái)構(gòu)造界面；
數(shù)據(jù)驅(qū)動(dòng)： 自動(dòng)追蹤依賴的模板表達(dá)式和計(jì)算屬性；
輕量無(wú)依賴。
---------------------- HelloWorld ----------------------
此處暫時(shí)使用在線的 js 文件，通過(guò)引入下面這行代碼使用 js 文件，當(dāng)然也可以將vue.js文件download下來(lái)。
[html]view plaincopy
新建hello.html，在index.html 添加超鏈接跳轉(zhuǎn)到hello.html，做一個(gè)helloworld
(1) index.html代碼如下
[html]view plaincopy
Hello?Vue.js
(2) hello.html代碼如下
[html]view plaincopy
{{message}}
varapp=newVue({
el:'#app',
data:{
message:'Hello?Vue!'
}
});
圖2-5-1.index.html 視圖
圖2-5-2.hello.html 效果視圖
首先我們新建一個(gè)Vue 實(shí)例，初始化el 屬性及data 等數(shù)據(jù)。
通過(guò) el 屬性指定 Vue程序的接管范圍 通過(guò) data 向Vue 實(shí)例的應(yīng)用程序中初始化了一個(gè) message 成員；
這里Vue 程序通過(guò) el 屬性指定id為 #app 的div 開始解析執(zhí)行 Vue 能識(shí)別的語(yǔ)法 {{message}} ；
在Vue 中被稱為雙花括號(hào)插值表達(dá)式 在雙括號(hào)插值表達(dá)式中可以使用當(dāng)前元素所屬Vue程序接管范圍的data中的數(shù)據(jù)
----------------------簡(jiǎn)單編程案例 ----------------------
(1)運(yùn)行項(xiàng)目通過(guò)超鏈接進(jìn)入hello.html
圖3-1-1.hello.html 視圖
(2)靜態(tài)注冊(cè)一條記錄，同步更新數(shù)據(jù)顯示
圖3-1-2.數(shù)據(jù)注冊(cè)效果圖
(3)刪除一組數(shù)據(jù)，數(shù)據(jù)顯示同步更新
圖3-1-3.記錄刪除效果圖
(4)匹配查詢相關(guān)記錄
圖3-1-4.記錄匹配效果圖
(1)需求基本在效果演示體現(xiàn)出來(lái)了。直白點(diǎn)就是記錄的增刪改查。
(2)另外，為了練習(xí)基本的邏輯處理，此處加上了下面的邏輯控制。
[html]view plaincopy
男
女
(3)通過(guò){{}}雙花括號(hào)取值的練習(xí)及對(duì)年齡大于30的做一個(gè)文本色為紅色的處理
[html]view plaincopy
30???'color:?red'?:?'?'?">{{?person.age?}}
(4)此處通過(guò)@Click 綁定函數(shù)，觸發(fā)相應(yīng)的邏輯處理。
[java]view plaincopy
注?冊(cè)
Delete
(5)Vue實(shí)例中關(guān)于函數(shù)的定義及初始化
[html]view plaincopy
methods:?{
createPerson:?function()?{
this.people.push(this.newPerson);
//?添加完newPerson對(duì)象后，重置newPerson對(duì)象
this.newPerson=?{
name:?'',
age:?0,
sex:?'Male'
}
},
deletePerson:?function(index)?{
//?刪一個(gè)數(shù)組元素
this.people.splice(index,?1);
}
}
圖3-3-1.項(xiàng)目結(jié)構(gòu)圖
此處依然使用的是在線js ，引入https://unpkg.com/vue 即可。
(1) style/demo.css
[html]view plaincopy
#app{
margin:50px?auto;
width:?810px;
}
table{
border:2px?solid?#D73636;
margin-top:?5px;
}
th{
width:?200px;
height:?50px;
color:?white;
background-color:?#E43636;
}
td{
width:?25%;
height:?40px;
border:?thin;
color:?black;
background-color:?gainsboro;
}
label{
margin-left:?5%;
}
button{
border:?lightblue;
border-radius:5px;
margin-top:?5px;
margin-bottom:?5px;
margin-left:?10px;
width:?70px;
height:?30px;
color:??white;
background-color:#D73636;
}
(2) hello.html
[html]view plaincopy
Create?New?Account
賬戶:
年齡:
性別:
Male
Female
注?冊(cè)
Find?Account?By?Name
Name
Age
Gender
Delete
=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
{{?person.name?}}
30???'color:?red'?:?'?'?">{{?person.age?}}
男
女
Delete
//?初始化Vue
//el獲取綁定的標(biāo)簽，#app獲取id為app的dom，.app的話則獲取class為app的dom
//data中為模型
//methods為方法
varvm=newVue({
el:?'#app',
data:?{
search:?{
key:?""
},
newPerson:?{
name:?'',
age:?0,
sex:?'Male'
},
people:?[{
name:?'Jack',
age:?30,
sex:?'Male'
},?{
name:?'Bill',
age:?26,
sex:?'Male'
},?{
name:?'Tracy',
age:?22,
sex:?'Female'
},?{
name:?'Chris',
age:?36,
sex:?'Male'
}]
},
methods:?{
createPerson:?function()?{
this.people.push(this.newPerson);
//?添加完newPerson對(duì)象后，重置newPerson對(duì)象
this.newPerson=?{
name:?'',
age:?0,
sex:?'Male'
}
},
deletePerson:?function(index)?{
//?刪一個(gè)數(shù)組元素
this.people.splice(index,?1);
}
}
})
vue.js學(xué)習(xí)（1） vue.js 第一個(gè)實(shí)例
---------------------- The End ----------------------
