Vue前端+快速入門【詳解】

1.Vue概述

2. 快速入門

3. Vue指令

4.表格信息案例? ??

5. 生命周期

1.Vue概述

????????1.MVVM思想

????????原始HTML+CSS+JavaScript開發存在的問題：操作麻煩，耦合性強

????????為了實現html標簽與數據的解耦，前端開發中提供了MVVM思想：即Model-View-ViewModel：

Model: 數據模型，指要展示到頁面上的數據。在web開發中通常從服務端獲取到數據，再把這些數據展示出來
View: 視圖，用于展示數據的各種html標簽
ViewModel: 視圖模型控制中心，負責把Model數據顯示到View里，也負責從View里收集數據到Model里。Vue框架就承擔了這個角色

????????2.Vue框架簡介

????????????????Vue.js（讀音 /vju?/, 類似于 view）是一套構建用戶界面的 漸進式框架，它實現了MVVM思想 ? ??????

????????????????Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

????????????????框架即是一個半成品軟件，是一套可重用的、通用的、軟件基礎代碼模型。基于框架進行開發，更加快捷、更加高效。

2. 快速入門

? ? ? ? 1.開發步驟：

? ? ? ? ? ? ? ? 1.編寫html頁面，引入vue框架的js類庫

? ? ? ? ? ? ? ? 2.在html頁面里，使用Vue 把"hello vue"到頁面上

????????

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入門</title></head>
<body><div id="app"><!-- 使用插值表達式，把數據區域里message的數據插入進來 -->{{message}}</div>
</body>
<script src="js/vue.js"></script>    
<script>//定義Vue對象new Vue({//vue接管id為app的標簽區域el: "#app", //數據區域，就是MVVM里的Modeldata:{message: "Hello Vue"},//方法區域，Vue里用到的所有方法都要寫到這里，否則調用不到methods:{}})
</script>
</html>

3. Vue指令

????????指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同功能作用。

????????

? ? ? ? 1.v-bind和v-model：?

? ??

v-bind使用示例：

????????

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-bind</title>
</head>
<body><div id="app"><!-- v-bind：用于把數據區域里的數據，綁定到 html標簽的屬性上語法：完整寫法：  v-bind:屬性名="數據名"簡單寫法：        :屬性名="數據名"單向綁定：數據區域 ===> 頁面視圖(標簽的屬性上)--><a v-bind:href="siteUrl">{{siteTitle}}</a> <br><a :href="siteUrl">{{siteTitle}}</a></div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {siteUrl: "http://www.baidu.com",siteTitle: "百度"},methods:{}});</script>
</body>
</html>

v-model使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model</title>
</head>
<body><div id="app"><!-- v-model：用于實現 數據區域 和 頁面上表單項的 雙向綁定。注意：僅適用于表單項，input, select, textarea語法： v-model="數據名稱"效果：數據區域 ==> 頁面表單項上： 數據區域里的數據變化，頁面表單項上會隨之變化頁面表單項上 ==> 數據區域： 在頁面上輸入了表單項的數據，數據區域也會隨之變化-->帳號：<input type="text" v-model="username"> <br>性別：<input type="radio" name="gender" value="male" v-model="sex">男<input type="radio" name="gender" value="female" v-model="sex">女  <br>數據區域里值：{{username}} , {{sex}}</div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {username: "tom",sex: "male"},methods:{}});</script>
</body>
</html>

????????2.? v-on

????????v-on: 用來給html標簽綁定事件。

????????????????完整寫法：v-on:事件名="函數名(實參列表)"

????????????????簡寫形式：@事件名="函數名(實參列表)"

????????注意事項：

????????????????v-on語法給標簽的事件綁定的函數，必須在Vue的方法區域中

????????????????v-on語法綁定事件時，事件名不寫on。例如：onclick=""在vue里寫成v-on:click=""

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="點我一下" v-on:click="handle()"><input type="button" value="點我一下" @click="handle()"></div>
</body>
<script>//定義Vue對象new Vue({el: "#app", //vue接管區域data:{},methods: {handle: function(){alert("你點我了一下...");}}})
</script>
</html>

????????3.v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-if與v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年齡<input type="text" v-model="age">經判定,為:<span v-if="age <= 35">年輕人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span><br><br>年齡<input type="text" v-model="age">經判定,為:<span v-show="age <= 35">年輕人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span></div>
</body>
<script>//定義Vue對象new Vue({el: "#app", //vue接管區域data:{age: 20},methods: {}})
</script>
</html>

? ? ?????????4.v-for

????????????????v-for: 從名字我們就能看出，這個指令是用來遍歷的。注意：需要循環哪個標簽，v-for 指令就寫在哪個標簽上。

? ? ? ? ? ? ? ? 完整語法：

????????????????<標簽 v-for="(變量名,索引變量) in 集合模型數據">
? ? ????????????????
? ?????????????????{{索引變量 + 1}} {{變量名}}
????????????????</標簽>

? ? ? ? ? ? ? ? 簡寫形式：

????????????????<標簽 v-for="變量名 in 集合模型數據">
? ? ????????????????{{變量名}}
????????????????</標簽>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定義Vue對象new Vue({el: "#app", //vue接管區域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>

? ?4.表格信息案例? ??

????????

步驟：

使用v-for的帶索引方式添加到表格的<tr>標簽上
使用{{}}插值表達式展示內容到單元格
使用索引+1來作為編號
使用v-if來判斷，改變性別和等級這2列的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>編號</th><th>姓名</th><th>年齡</th><th>性別</th><th>成績</th><th>等級</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">優秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

5. 生命周期

????????vue的生命周期：指的是vue對象從創建到銷毀的過程。vue的生命周期包含8個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法

mounted：掛載完成，Vue初始化成功，HTML頁面渲染成功。以后我們一般用于頁面初始化自動的ajax請求后臺數據

編寫mounted聲明周期的鉤子函數，與methods同級

<script>//定義Vue對象new Vue({el: "#app", //vue接管區域data:{},methods: {},mounted () {alert("vue掛載完成,發送請求到服務端")}})
</script>

? ? ?