1.前端框架介紹
老牌
jquery -> 更簡(jiǎn)單的方式去操作 dom 對(duì)象（標(biāo)簽對(duì)象）
extjs -> 更適合做后臺(tái)管理系統(tǒng)
easyui -> 模仿了 extjs 免費(fèi)
新式
vue 國(guó)內(nèi)開(kāi)源的js框架
argularjs 國(guó)外js框架
他們都提倡前后臺(tái)分離恬叹，下面是對(duì)前后臺(tái)分離的解釋：
傳統(tǒng)的后臺(tái)開(kāi)發(fā)人員晚岭，需要做一下步驟：
controller -> jsp赠法， service对雪， dao -> 頁(yè)面展示部分，需要用jsp等技 術(shù)負(fù)責(zé)數(shù)據(jù)展示
前后臺(tái)分離之后当犯，后臺(tái)開(kāi)發(fā)人員垢村，需要做一下步驟：
service, dao -> 負(fù)責(zé)準(zhǔn)備模型數(shù)據(jù)即可
前臺(tái)開(kāi)發(fā)人員，負(fù)責(zé)頁(yè)面之間的跳轉(zhuǎn)嚎卫、從后臺(tái)獲取模型數(shù)據(jù)嘉栓，展示數(shù)據(jù)
2.VUE
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架，它只關(guān)注視圖層拓诸， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)侵佃，它的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
簡(jiǎn)單來(lái)說(shuō)其實(shí)就是：
vue是一套構(gòu)建用戶界面的框架奠支。在我看來(lái)馋辈，漸進(jìn)式代表的含義是：主張最少。每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)胚宦，從而會(huì)對(duì)使用者有一定的要求首有，這些要求就是主張燕垃，主張有強(qiáng)有弱枢劝，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開(kāi)發(fā)中的使用方式井联。簡(jiǎn)單說(shuō)就是對(duì)于vue中你不熟悉不太把握的模塊或者功能，你可以不用它您旁，或者你可以用你熟悉有把握的技術(shù)進(jìn)行代替 烙常。這樣子看來(lái)是不是感覺(jué)很友好，相對(duì)于其他框架硬要求很少了鹤盒，你可以逐漸性的使用框架蚕脏。
3.使用
- 引入vue.js，可以去網(wǎng)上下載侦锯，也可以把內(nèi)容復(fù)制到本地的js文件中
<!-- 引入 vue.js -->
<script src="vue.js"></script>
- 創(chuàng)建Vue對(duì)象
var vue = new Vue({
el: 視圖對(duì)應(yīng)的標(biāo)簽
data: 模型數(shù)據(jù)
methods:{
方法1：function(){},
方法2：funciton(){},
...
}
});
- 展示模型數(shù)據(jù)
兩標(biāo)簽之間的普通文字驼鞭，要從模型中獲取數(shù)據(jù)，語(yǔ)法使用 {{模型數(shù)據(jù)的名稱}}
標(biāo)簽的屬性需要從模型中獲取值：v-bind:屬性名 (v-bind 綁定指令)尺碰，也可以被簡(jiǎn)化為 :屬性名
例子如下挣棕，綁定圖片屬性，獲得圖片地址：
<!-- 視圖 -->
<div id="app">
<!-- 給文本賦值 用 {{模型變量名}}-->
<h1>姓名：{{name}}, 年齡: {{age}}, 圖片 {{photo}}</h1>
<!-- 給屬性賦值需要用 v-bind 指令 -->
<img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue({
el: '#app', /*vue 對(duì)象對(duì)應(yīng)的視圖是id為app的標(biāo)簽*/
data: { /*data 中包含的是模型數(shù)據(jù)*/
name:'zhangsan',
age: 18,
photo: '2_1.bmp'
}
});
</script>
vue的一些常用指令
- v-for 用來(lái)遍歷一個(gè)集合
v-for="(臨時(shí)變量名,下標(biāo)變量) in 集合名" 其中下標(biāo)變量從0開(kāi)始
- v-if
用來(lái)進(jìn)行條件判斷亲桥，當(dāng)條件成立洛心，才會(huì)渲染視圖，如果條件不成立题篷，不會(huì)生成html代碼
例子如下词身，因?yàn)閔asError后面是false，所以不會(huì)輸出用戶名不正確這一行字：
<div id="app">
<h3 v-if="hasError">用戶名不正確</h3>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hasError:false /*沒(méi)有錯(cuò)誤*/
}
});
</script>
- v-show
用來(lái)進(jìn)行條件判斷番枚，當(dāng)條件成立（true）法严，把此標(biāo)簽顯示出來(lái)，如果條件不成立（false）葫笼，會(huì)把此標(biāo)簽隱藏起來(lái)
如：v-show="hasError" 深啤， hasError:false，所以會(huì)把此標(biāo)簽隱藏起來(lái)
注：這和 v-if 雖然都是可以判斷之后讓某些東西不顯現(xiàn)渔欢，但是它們兩個(gè)還是有 不同之處墓塌，v-if 只要不滿足條件就不會(huì)生成 html 代碼，而 v-show 則是生成了 html 代碼奥额，只是隱藏了而已苫幢。
- 事件處理
傳統(tǒng)方式處理事件，事件名稱="函數(shù)()" 垫挨，如以下
<input type="button" onclick="函數(shù)()">
vue 來(lái)處理事件 格式：v-on:事件名稱 ="方法名"韩肝，也可以被簡(jiǎn)化為 @事件名稱 ="方法名"， 事件名稱前不需要再加on了九榔，加v-on哀峻，如以下
<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">
如果方法有參數(shù)的話就在方法名后面加上括號(hào)里面寫上參數(shù)涡相，如 <input type="button" v-on:click="方法名(12)">，沒(méi)有參數(shù)就直接寫方法名
- 雙向綁定 v-model
v-bind 模型數(shù)據(jù)發(fā)生了改變剩蟀，視圖也會(huì)重新渲染催蝗，模型會(huì)影響視圖，而反之不行
v-model, 不僅是數(shù)據(jù)改變影響視圖育特，而且視圖改變也會(huì)影響數(shù)據(jù)丙号，尤其配合表單使用
代碼演示
1、v-bind和語(yǔ)法使用 {{模型數(shù)據(jù)的名稱}}的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 視圖 -->
<div id="app">
<!-- 給文本賦值 用 {{模型變量名}}-->
<h1>姓名：{{name}}, 年齡: {{age}}, 圖片 {{photo}}</h1>
<!-- 給屬性賦值需要用 v-bind 指令 -->
<img v-bind:src="photo">
<img :src="photo">
</div>
{{name}}
<script>
// el -> element
var vue = new Vue({
el: '#app', /*vue 對(duì)象對(duì)應(yīng)的視圖是id為app的標(biāo)簽*/
data: { /*data 中包含的是模型數(shù)據(jù)*/
name:'zhangsan',
age: 18,
photo: '2_1.bmp'
}
});
</script>
</body>
</html>
