知識點梳理
課堂講義
一、Vue 快速入門
1.一、Vue的介紹
-
Vue是一套構建用戶界面的漸進式前端框架。css
-
只關注視圖層，而且很是容易學習，還能夠很方便的與其它庫或已有項目整合。html
-
經過儘量簡單的API來實現響應數據的綁定和組合的視圖組件。前端
-
特色 易用：在有HTMLCSSJavaScript的基礎上，快速上手。 靈活：簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。 性能：20kbmin+gzip運行大小、超快虛擬DOM、最省心的優化。vue
1.二、Vue的快速入門
-
下載和引入vue.js文件。element-ui
-
編寫入門程序。 視圖：負責頁面渲染，主要由HTML+CSS構成。 腳本：負責業務數據模型（Model）以及數據的處理邏輯。前端框架
1.三、Vue快速入門詳解
-
Vue 核心對象：每個 Vue 程序都是從一個 Vue 核心對象開始的。ide
let vm = new Vue({
選項列表;
});
-
選項列表 el選項：用於接收穫取到頁面中的元素。(根據經常使用選擇器獲取)。 data選項：用於保存當前Vue對象中的數據。在視圖中聲明的變量須要在此處賦值。 methods選項：用於定義方法。方法能夠直接經過對象名調用，this表明當前Vue對象。工具
-
數據綁定 在視圖部分獲取腳本部分的數據。 {{變量名}}
1.四、Vue快速入門的升級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入門升級</title>
</head>
<body>
1.五、Vue小結
-
Vue是一套構建用戶界面的漸進式前端框架。
-
Vue的程序包含視圖和腳本兩個核心部分。
-
腳本部分
-
Vue核心對象。
-
選項列表
-
el：接收穫取的元素。
-
data：保存數據。
-
methods：定義方法。
-
視圖部分
二、Vue 經常使用指令
2.一、指令介紹
2.二、文本插值
-
v-html：把文本解析爲 HTML 代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插值</title>
</head>
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
msg:"<b>Hello Vue</b>"
}
});
</script>
</html>
2.三、綁定屬性 ***
-
v-bind：爲 HTML 標籤綁定屬性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>綁定屬性</title>
<style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"my"
}
});
</script>
</html>
2.四、條件渲染 ***
-
v-if：條件性的渲染某元素，斷定爲真時渲染,不然不渲染。
-
v-else：條件性的渲染。
-
v-else-if：條件性的渲染。
-
v-show：根據條件展現某元素，區別在於切換的是display屬性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>條件渲染</title>
</head>
<body>
<div id="div">
2.五、列表渲染 ***
-
v-for：列表渲染，遍歷容器的元素或者對象的屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
</head>
<body>
<div id="div">
<ul>
<li v-for="(name,index) in names">
{{name}}{{index}}
</li>
<li v-for="(value,key) in student">
{{value}}{{key}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
names:["張三","李四","王五"],
student:{
name:"張三",
age:23
}
}
});
</script>
</html>
2.六、事件綁定 ***
-
v-on：爲 HTML 標籤綁定事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件綁定</title>
</head>
<body>
<div id="div">
<div>{{name}}</div>
<button v-on:click="change()">改變div的內容</button>
<button v-on:dblclick="change()">改變div的內容</button>
<button @click="change()" >改變div的內容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"黑馬程序員"
},
methods:{
change(){
this.name = "傳智播客"
}
}
});
</script>
</html>
2.七、表單綁定 ***
-
表單綁定 v-model：在表單元素上建立雙向數據綁定。
-
雙向數據綁定 更新data數據，頁面中的數據也會更新。 更新頁面數據，data數據也會更新。
-
MVVM模型(ModelViewViewModel)：是MVC模式的改進版 在前端頁面中，JS對象表示Model，頁面表示View，二者作到了最大限度的分離。 將Model和View關聯起來的就是ViewModel，它是橋樑。 ViewModel負責把Model的數據同步到View顯示出來，還負責把View修改的數據同步回Model。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單綁定</title>
</head>
<body>
<div id="div">
2.八、小結
-
指令：是帶有v-前綴的特殊屬性，不一樣指令具備不一樣含義。
-
文本插值 v-html：把文本解析爲HTML代碼。
-
綁定屬性 v-bind：爲HTML標籤綁定屬性值。
-
條件渲染 v-if：條件性的渲染某元素，斷定爲真時渲染,不然不渲染。 v-else：條件性的渲染。 v-else-if：條件性的渲染。 v-show：根據條件展現某元素，區別在於切換的是display屬性的值。
-
列表渲染 v-for：列表渲染，遍歷容器的元素或者對象的屬性。
-
事件綁定 v-on：爲HTML標籤綁定事件。
-
表單綁定 v-model：在表單元素上建立雙向數據綁定。
三、Element 基本使用
3.一、Element介紹
-
Element：網站快速成型工具。是餓了麼公司前端開發團隊提供的一套基於Vue的網站組件庫。
-
使用Element前提必需要有Vue。
-
組件：組成網頁的部件，例如超連接、按鈕、圖片、表格等等~
-
Element官網：https://element.eleme.cn/#/zh-CN
-
本身完成的按鈕
-
Element 提供的按鈕
3.二、Element快速入門
-
開發步驟
-
下載 Element 核心庫。
-
引入 Element 樣式文件。
-
引入 Vue 核心 js 文件。
-
引入 Element 核心 js 文件。
-
編寫按鈕標籤。
-
經過 Vue 核心對象加載元素。
-
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入門</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按鈕</button>
<br>
<div id="div">
<el-row>
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險按鈕</el-button>
</el-row>
<br>
<el-row>
<el-button plain>樸素按鈕</el-button>
<el-button type="primary" plain>主要按鈕</el-button>
<el-button type="success" plain>成功按鈕</el-button>
<el-button type="info" plain>信息按鈕</el-button>
<el-button type="warning" plain>警告按鈕</el-button>
<el-button type="danger" plain>危險按鈕</el-button>
</el-row>
<br>
<el-row>
<el-button round>圓角按鈕</el-button>
<el-button type="primary" round>主要按鈕</el-button>
<el-button type="success" round>成功按鈕</