Vue 模板語法學習
記錄 Vue 的複習使用，以加深理解爲主，並非零基礎入門
一、Vue 指令學習
文檔在手，隨時查閱：官方文檔——指令學習
- Vue 中的指令本質上是自定義屬性
- Vue 中指令的格式：以 v-xxx （比如 v-if，v-for 什麼的）
插值表達式的使用 及 vue 的初體驗：
<!-- vue 的基本使用步驟
1. 提供標籤用於填充數據
2. 引入 vue.js 庫文件
3. 可以使用 vue 語法做功能了
4. 把 vue 提供的數據填充到標籤裏面
-->
<div id="app" v-cloak>
{{msg}}
</div>
<script type="text/javascript">
// 創建一個vue 實例
var app = new Vue({
el:"#app",
data: {
msg:"Hello World"
}
})
</script>
會在頁面上正常顯示 Hello World
二、vue 解決閃動問題 v-cloak
我們在使用插值表達式的時候，遊覽器第一次渲染的時候可能會出現一下 表達式的字符串，然後就被替換 data 中的數據內容，這種情況解決就如官方文檔的方式皆可以解決了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js 第一天</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 1. 解決花括號閃動的問題 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- 模板語法學習使用
2. v-cloak 指令解決閃動問題
實現原理，先通過樣式隱藏，然後在內存進行值的替換，替換好後在顯示最終的結果
-->
<div id="app" v-cloak>
{{msg}}
</div>
<script type="text/javascript">
// 創建一個vue 實例
var app = new Vue({
el:"#app",
data: {
msg:"Hello World"
}
})
</script>
</body>
</html>
三、數據綁定的指令
3.1 v-text （我就是 innerText）
- 填充純文本內容，相當於 js 中的 innerText
- 相比插值表達式更簡單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 模板指令學習</title>
</head>
<script src="../vue.js" type="text/javascript"></script>
<body>
<!-- 數據綁定的指令 -->
<div id="root">
{{msg}}
<div v-text="msg"></div> <!-- 相當於 innerText 和插值表達式的功能是一樣的-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
msg:'Hello Vue',
}
});
</script>
</body>
</html>
3.2 v-html （會 innerHTML 嗎）
- 填充 HTML 片段，相當於 js 中的 innerHTML
- 但是存在安全性問題，只能使用本站的數據作爲數據源，第三方數據可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 模板指令學習</title>
</head>
<script src="../vue.js" type="text/javascript"></script>
<body>
<!-- 數據綁定的指令 -->
<div id="root">
<div v-html="html"></div><!-- 相當於 innerHTML 存在 安全問題，只能使用本站數據插入，第三方數據不可以 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
html:"<font color='red'>Hello Vue</font>"
}
});
</script>
</body>
</html>
可以看到 html 的部分會被轉義
3.3 v-pre 跳過預編譯
- 填充原始信息
- 顯示原始信息
- 跳過編譯過程
<div v-pre>{{msg}}</div> <!-- 顯示原始信息，跳過 vue 編譯 -->
<script src="../vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
msg:'Hello Vue',
html:"<font color='red'>Hello Vue</font>"
}
});
</script>
顯示原始字符串
3.4 v-once (一次編譯，不在變換）
v-once 只編譯一次：顯示內容之後不在具有響應式功能
(當你顯示的信息後續不會在修改了，你就可以用 v-once，提高性能)
<div id="root">
<div>{{msg}}</div>
<p v-once>{{info}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
msg:"haha",
info:"你好"
}
})
</script>
3.5 v-model 雙向數據綁定
使用 v-model 進行雙向綁定，那麼數據的變化是相互的，使用時只需給它綁定一個值即可，而且數據的雙向綁定常常用於表單。這裏就要引出 vue 搭建項目的一個設計思想了，即 MVVM。
- M（model）
- V（view）
- VM（View-Model）
雙向數據綁定是基於分而治之的思想來做的
- 視圖 ——> 模型 事件監聽
- 模型 ——> 視圖 數據綁定
<div id="root">
<div>msg:{{msg}}</div>
<input type="text" v-model="msg" value="" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
msg:"haha"
}
})
</script>
數據是相互變化的
四、事件綁定 v-on使用
4.1 簡單事件處理
使用 v-on 我們可以綁定很多的事件，比如：click, blur 等等，都是我們學 js 時常見的事件。我們下面就定義了一個簡單的 click 事件，每當點擊一下，數字就進行加一處理
<div id="root">
<div>num: {{num}}</div>
<!-- 事件處理 -->
<input type="button" v-on:click="num++" value="點擊1"/>
</div>
<script src="../vue.js" type="text/javascript"></script>
<body>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
num:0
}
});
</script>
4.2 使用函數處理事件
和 js 基本一樣，我們指定一個函數專門處理某個特定事件，然而這個事件也要專門定義在 vue 中的 methods 中，效果同上
<div id="root">
<div>num: {{num}}</div>
<!-- 通過事件函數調用，下面兩種方式均可以 -->
<input type="button" @click="handle()" value="點擊2"/>
<input type="button" @click="handle" value="點擊3" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
num:0
},
// 事件調用,定義方法處理 click 事件
methods: {
// 方法必須定義在這裏
handle: function() {
// 這裏的 this 是 vue 中的實例對象
this.num++;
}
}
});
</script>
4.3 事件函數傳參
事件函數傳參
- 如果事件直接綁定函數名稱，默認傳遞事件對象（$event）作爲第一個參數
- 如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，並且事件對象的名稱是必須是 $event
<div id="root">
<div>num: {{num}}</div>
<h3>事件函數傳參</h3>
<button @click="say('hi',$event)">SayHi</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
num:0
},
// 事件調用,定義方法處理 click 事件
methods: {
say: function(p, event) {
console.log(p); //打印傳遞過來的值
console.log("標籤名稱："+event.target.tagName);
console.log("標籤內的內容："+event.target.innerHTML);
}
}
});
</script>
4.4 事件修飾符
簡要了解一下 事件冒泡 與 阻止冒泡就懂了
<h3> 事件修飾符</h3>
<a v-on:click.stop="handle">跳轉</a> <!-- 阻止事件冒泡 -->
<a v-on:click.prevent="handle">跳轉</a> <!-- 阻止事件 -->
五、屬性綁定 v-bind 指令
5.1 v-bind 使用
v-bind 的作用
動態處理屬性的值,下面的實例中，我們給 href 綁定了一個 url 值，這樣他就可以跳轉到指定的路徑了。
<div id="app">
<a v-bind:href="url">跳轉</a>
<button v-on:click="handle">切換</button>
<!-- 簡寫方式 -->
<a :href="url">跳轉1</a>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
url:"http://www.baidu.com"
},methods:{
handle: function() {
this.url = "http://www.qq.com"
}
}
})
</script>
5.2 v-bind 就是 v-model ?
我們深入 v-model 的源碼可以發現， v-model 之所以能夠實現雙向綁定是因爲它的底層使用 屬性綁定實現的。
v-model 底層原理: 使用輸入域中最新的數據覆蓋原來的數據
<input v-bind:value ="msg" v-on:input="msg=$event.target.value"/>
5.3 v-bind 綁定樣式
樣式綁定由兩種形式
- 使用對象的形式
- 使用數組的形式
<style>
.active {
width: 100px;
height: 100px;
border: 1px solid blue;
}
.error {
background-color: red;
}
</style>
<body>
<div id="app">
<!-- class 樣式的處理
1. 使用對象形式
-->
<div v-bind:class="{active: isActive, error: isError}">
測試樣式
</div>
<button v-on:click="handle">切換</button>
<!-- 2. 使用數組的方式 -->
<div v-bind:class="[acticeClass, errorClass]">
測試樣式二
</div>
<button v-on:click="handleClass">切換</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
//使用對象綁定的屬性
isActive:true,
isError:true,
//使用數組綁定的屬性
acticeClass:'active',
errorClass:'error'
},methods: {
handle:function() {
// 控制 isActive 在 true 和 false 之間進行切換，取反操作即可解決
this.isActive = !this.isActive;
this.isError = !this.isError
},
handleClass:function() {
this.acticeClass = !this.acticeClass;
this.errorClass = !this.errorClass
}
}
})
</script>
六、分支與循環 v-if v-for
6.1 分支結構
6.1.1 使用 v-if
- v-if
- v-else
- v-else-if
只會渲染一個 div
v-if 控制元素是否渲染到頁面
在判斷結構中加入表達式即可完成數據的篩選
<div id="app">
<div v-if="score >= 90">
優秀
</div>
<div v-else-if="socre >=80 && score<=89">
良好
</div>
<div v-else-if="score >=60 && score<=79">
一般
</div>
<div v-else>
太差了
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
score:10,
}
})
</script>
結果肯定是打印最差的
6.1.2 使用 v-show
. v-show
控制元素是否顯（已經渲染到頁面上了）
會在 dom 中顯示出來，display 的值被設置爲了 none
使用場景：
頻繁顯示隱藏一個元素使用 v-show（因爲頻繁的操作 DOM 會造成極大的消耗
<div id="app">
<div v-show="flag">測試 flag</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
flag:false
}
})
</script>
我們可以看到 dom 時存在的。
6.2 循環結構 v-for
使用 v-for 可以輕鬆遍歷元素，下面看一看 v-for 的簡單使用，我們可以遍歷值的同時，把下表也能遍歷出來
<div id="app">
<div>數字列表</div>
<ul>
<li v-for="(item,index) of row">{{item}} -- {{index}}</li>
</ul>
<!-- 遍歷對象, 設置 key 提高遍歷性能 -->
<ul>
<li :key="item.id" v-for="item in books">
<span>{{item.id}}</span>
<span>{{item.title}}</span>
</li>
</ul>
<!-- 另一種遍歷對象的方式 -->
<div v-for="(value ,key, index) in people">
{{value + '---' + key + '---' + index}}
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
people:{
name:'張三',
age:18,
gender:'male'
},
row: [1, 2, 3, 4, 5, 6, 7, 8, 9],
books: [{
"id": 1,
"title": "老人與海"
}, {
"id": 2,
"title": "悲慘世界"
},
{
"id":3,
"title":"小王子"
}
]
}
})
</script>
七、小案例
7.1 簡易計算器
實現邏輯如下：
- 使用 v-model 指令實現數值 a 和數值 b 的綁定
- 給計算按鈕綁定事件，實現計算邏輯
- 將計算結果響應到對應位置
<div id="app">
<div>
<span>數值A:</span>
<input type="text" v-model="a" />
</div>
<div>
<span>數值B:</span>
<input type="text" v-model="b" />
</div>
<button v-on:click="handleA">計算</button>
<div>加法計算結果:<span v-text="resultA"></span></div>
<button v-on:click="handleB">計算</button>
<div>減法計算結果:<span v-text="resultB"></span></div>
<button v-on:click="handleC">計算</button>
<div>乘法計算結果:<span v-text="resultC"></span></div>
<button v-on:click="handleD">計算</button>
<div>除法計算結果:<span v-text="resultD"></span></div>
</div>
<script type="text/javascript">
// 創建一個vue 實例
var app = new Vue({
el: "#app",
data: {
a: "",
b: "",
resultA: "",
resultB: "",
resultC: "",
resultD: ""
},
methods: {
handleA: function() {
this.resultA = parseInt(this.a) + parseInt(this.b);
},
handleB: function() {
this.resultB = parseInt(this.a) - parseInt(this.b);
},
handleC: function() {
this.resultC = parseInt(this.a) * parseInt(this.b);
},
handleD: function() {
this.resultD = parseFloat(this.a) / parseFloat(this.b);
}
}
})
</script>
7.2 Tab 選項卡實現
核心是，找到對應的下標板塊，顯示指定的模塊
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style-type: none;
text-align: center;
border: 1px solid blue;
cursor: pointer;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
}
.tab div.active {
display: block;
background-color: #00F7DE;
}
</style>
<body>
<div id="app">
<div class="tab">
<ul>
<li v-on:click="change(index)" :class='currentIndex == index ? "active":"" ' :key="item.id" v-for="(item,index) in list">{{item.title}}</li>
</ul>
<div :class='currentIndex == index ? "active":"" ' :key="item.id" v-for="(item, index) of list">
<span>{{item.des}}</span>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
currentIndex:0, // 當前選項卡的索引
list: [{
id:1,
title: "A",
des: "我是盒子一"
}, {
id:2,
title: "B",
des: "我是盒子二"
}, {
id:3,
title: "C",
des: "我是盒子三"
}]
},
methods: {
// 這裏實現選項卡的切換操作，本質就是操作類名，通過 currentIndex, 通過素銀控制類名的變化
change:function(index) {
this.currentIndex = index
}
}
})
</script>
