Vue模板語法
1.1 模板語法概述
1.如何理解前端渲染？
把數據填充到HTML標籤中javascript
2.前端渲染方式
-
原生js拼接字符串 css
-
使用前端模板引擎 html
-
使用vue特有的模板語法前端
3.原生js拼接字符串
基本上就是將數據以字符串的方式拼接到HTML標 籤中，前端代碼風格大致上以下所示。vue
var d = data.weather;
var info = document.getElementById('info');
info.innerHTML = '';
for(var i=0;i<d.length;i++){
var date = d[i].date;
var day = d[i].info.day;
var night = d[i].info.night;
var tag = '';
tag += '<span>日期：'+date+'</sapn><ul>';
tag += '<li>白每天氣：'+day[1]+'</li>'
tag += '<li>白天溫度：'+day[2]+'</li>'
tag += '<li>白天風向：'+day[3]+'</li>'
tag += '<li>白天風速：'+day[4]+'</li>'
tag += '</ul>';
var div = document.createElement('div');
div.innerHTML = tag;
info.appendChild(div);
}
缺點：不一樣開發人員的代碼風格差異很大，隨着業 務的複雜，後期的維護變得逐漸困難起來。html5
4.使用前端模板引擎
下面代碼是基於模板引擎art-template的一段代 碼，與拼接字符串相比，代碼明顯規範了不少， 它擁有本身的一套模板語法規則。java
優勢：你們都遵循一樣的規則寫代碼，代碼可讀性 明顯提升了，方便後期的維護。後端
缺點：沒有專門提供事件機制。api
<script id="abc" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
5.模板語法概覽
-
差值表達式 數組
-
指令
-
事件綁定
-
屬性綁定
-
樣式綁定
-
分支循環結構
1.2 指令
1.什麼是指令？
-
本質就是自定義屬性
-
指令的格式：以v-開始（好比：v-cloak）
2. v-cloak指令用法
官網：https://cn.vuejs.org/v2/api/
-
插值表達式存在的問題：「閃動」
-
如何解決該問題：使用v-cloak指令
-
解決該問題的原理：先隱藏，替換好值以後再顯示最終的值
<style type="text/css">
/*
一、經過屬性選擇器 選擇到 帶有屬性 v-cloak的標籤 讓他隱藏
*/
[v-cloak]{
/* 元素隱藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 二、 讓帶有插值 語法的 添加 v-cloak 屬性
在 數據渲染完場以後，v-cloak 屬性會被自動去除，
v-cloak一旦移除也就是沒有這個屬性了 屬性選擇器就選擇不到該標籤
也就是對應的標籤會變爲可見
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 裏面存儲的是數據
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
3.數據綁定指令
-
v-text 填充純文本
① 相比插值表達式更加簡潔
-
v-html 填充HTML片斷
① 存在安全問題
② 本網站內部數據可使用，來自第三方的數據不能夠用
-
v-pre 填充原始信息
① 顯示原始信息，跳過編譯過程（分析編譯過程）
v-text
-
v-text指令用於將數據填充到標籤中，做用於插值表達式相似，可是沒有閃動問題
-
若是數據中有HTML標籤會將html標籤一併輸出
-
注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化；可是當插值發生變化並不會影響數據對象的值
<div id="app">
<!--
注意:在指令中不要寫插值語法 直接寫對應的變量名稱
在 v-text 中 賦值的時候不要在寫 插值語法
通常屬性中不加 {{}} 直接寫 對應 的數據名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在標籤的 內容中 才用插值語法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-html
-
用法和v-text 類似 可是他能夠將HTML片斷填充到標籤中
-
可能有安全問題, 通常只在可信任內容上使用
v-html，永不用在用戶提交的內容上 -
它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
<div id="app">
<p v-html="html"></p> <!-- 輸出：html標籤在渲染的時候被解析 -->
<p>{{message}}</p> <!-- 輸出：<span>經過雙括號綁定</span> -->
<p v-text="text"></p> <!-- 輸出：<span>html標籤在渲染的時候被源碼輸出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>經過雙括號綁定</span>",
html: "<span>html標籤在渲染的時候被解析</span>",
text: "<span>html標籤在渲染的時候被源碼輸出</span>",
}
});
</script>
v-pre
-
顯示原始信息跳過編譯過程
-
跳過這個元素和它的子元素的編譯過程。
-
一些靜態的內容不須要編譯加這個指令能夠加快渲染
<span v-pre>{{ this will not be compiled }}</span>
<!-- 顯示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即便data裏面定義了msg這裏仍然是顯示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
4.數據響應式
-
如何理解響應式
① html5中的響應式（屏幕尺寸的變化致使樣式的變化）
② 數據的響應式（數據的變化致使頁面內容的變化）
-
什麼是數據綁定
① 數據綁定：將數據填充到標籤中
-
v-once 只編譯一次
① 顯示內容以後再也不具備響應式功能
v-once
-
執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】
v-once的應用場景:若是顯示的信息後續不須要再修改，大家可使用v-once,這樣能夠提升性能。
<!-- 即便data裏面定義了msg 後期咱們修改了 仍然顯示的是第一次data裏面存儲的數據即 Hello Vue.js -->
<span v-once>{{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
1.3雙向數據綁定
-
當數據發生變化的時候，視圖也就發生變化
-
當視圖發生變化的時候，數據也會跟着同步變化
1.v-model
-
v-model是一個指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<div>{{msg}}</div>
<div>
當輸入框中內容改變的時候， 頁面上的msg 會自動更新
<input type="text" v-model='msg'>
</div>
</div>
2.mvvm
-
MVC 是後端的分層開發概念； MVVM是前端視圖層的概念，主要關注於 視圖層分離，也就是說：MVVM把前端的視圖層，分爲了 三部分 Model, View , VM ViewModel
-
m model
-
數據層 Vue 中 數據層 都放在 data 裏面
-
-
v view 視圖
-
Vue 中 view 即 咱們的HTML頁面
-
-
vm （view-model） 控制器 將數據和視圖層創建聯繫
-
vm 即 Vue 的實例 就是 vm
-
1.4 事件綁定
1.Vue如何處理事件？
v-on指令用法
<input type=‘button' v-on:click='num++'/>
v-on簡寫形式
<input type=‘button' @click='num++'/>
v-on
-
用來綁定事件的
- 形式如：v-on:click 縮寫爲 @click;
2.事件函數的調用方式
-
直接綁定函數名稱
<button v-on:click='say'>Hello</button>
-
調用函數
<button v-on:click='say()'>Say hi</button>
3.v-on事件函數中傳入參數
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 若是事件直接綁定函數名稱，那麼默認會傳遞事件對象做爲事件函數的第一個參數 -->
<button v-on:click='handle1'>點擊1</button>
<!-- 二、若是事件綁定函數調用，那麼事件對象必須做爲最後一個參數顯示傳遞，
而且事件對象的名稱必須是$event
-->
<button v-on:click='handle2(123, 456, $event)'>點擊2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
4.事件修飾符
-
.stop 阻止冒泡
<a v-on:click.stop="handle">跳轉</a> -
.prevent 阻止默認行爲
<a v-on:click.prevent="handle">跳轉</a>
-
在事件處理程序中調用
event.preventDefault()或event.stopPropagation()是很是常見的需求。 -
Vue 不推薦咱們操做DOM 爲了解決這個問題，Vue.js 爲
v-on提供了事件修飾符 -
修飾符是由點開頭的指令後綴來表示的
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符能夠串聯 即阻止冒泡也阻止默認事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
5.按鍵修飾符
-
.enter 回車鍵
<input v-on:keyup.enter='submit'> -
.esc 退出鍵
<input v-on:keyup.delete='handle'>
-
在作項目中有時會用到鍵盤事件，在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。Vue 容許爲
v-on在監聽鍵盤事件時添加按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當點擊enter 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當點擊enter或者space時 時調用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
經常使用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲「刪除」和「退格」按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
<script>
var vm = new Vue({
el:"#app",
methods: {
submit:function(){},
alertMe:function(){},
}
})
</script>
6.自定義按鍵修飾符別名
全局 config.keyCodes 對象
-
在Vue中能夠經過
config.keyCodes自定義按鍵修飾符別名
<div id="app">
預先定義了keycode 116（即F5）的別名爲f5，所以在文字輸入框中按下F5，會觸發prompt方法
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});
</script>
案例：簡單計算器
需求：實現簡單的加法計算，分別輸入數值a和數值b ，點擊計算按鈕，結果顯示在下面。
① 經過v-model指令實現數值a和數值b的綁定
② 給計算按鈕綁定事件，實現計算邏輯
③ 將計算結果綁定到對應位置
<div id="app">
<h1>簡單計算器</h1>
<div>
<span>數值A:</span>
<span>
<input type="text" v-model='a'>
</span>
</div>
<div>
<span>數值B:</span>
<span>
<input type="text" v-model='b'>
</span>
</div>
<div>
<button v-on:click='handle'>計算</button>
</div>
<div>
<span>計算結果:</span>
<span v-text='result'></span>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
this.result = parseInt(this.a) + parseInt(this.b);
}
}
})
</script>
1.5 屬性綁定
1. Vue如何動態處理屬性？
v-bind
-
v-bind 指令被用來響應地更新 HTML 屬性
-
v-bind:href 能夠縮寫爲 :href;
<div id="app">
<a v-bind:href="url">百度</a>
<button @click="handle">切換</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
url: "http://www.baidu.com"
},
methods: {
handle: function () {
this.url = "http://cnblogs.com/xc-dh"
},
}
})
</script>
2. v-model的低層實現原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
1.6 樣式綁定
1.class樣式處理
對象語法
-
咱們能夠給v-bind:class 一個對象，以動態地切換class。
-
注意：v-bind:class指令能夠與普通的class特性共存
//一、 v-bind 中支持綁定一個對象 若是綁定的是一個對象 則 鍵爲 對應的類名 值 爲對應data中的數據
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
width: 100px;
height: 100px;
border: 1px solid red;
}
.bgc {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active: isActive, bgc: isBgc}">樣式綁定</div>
<button v-on:click="handle">切換</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isBgc: true
},
methods: {
handle: function () {
// 控制isActive的值在true和false之間進行替換
this.isActive = !this.isActive;
this.isBgc = !this.isBgc;
}
}
})
</script>
</body>
數組語法
//二、 v-bind 中支持綁定一個數組 數組中classA和 classB 對應爲data中的數據
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
width: 100px;
height: 100px;
border: 1px solid red;
}
.bgc {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass,bgcClass]">樣式綁定</div>
<button v-on:click="handle">切換</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
bgcClass: 'bgc'
},
methods: {
handle: function () {
this.activeClass = '';
}
}
})
</script>
</body>
綁定對象和綁定數組 的區別
-
綁定對象的時候 對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
-
綁定數組的時候數組裏面存的是data 中的數據
2. style樣式處理
對象語法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
數組語法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<div id="app">
<div v-bind:style="{width: widthStyle, background: bgStyle, height: heightStyle}"></div>
<!-- 數組語法可放多個樣式對象 -->
<div v-bind:style="[objStyle,overStyles]"></div>
<button v-on:click="handle">切換</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
widthStyle: "100px",
bgStyle: 'red',
heightStyle: '200px',
// 對象簡寫
objStyle: {
border: '1px solid red',
width: '100px',
height: '100px'
},
overStyles: {
border: '1px solid blue',
height: '200px'
}
},
methods: {
handle: function () {
this.heightStyle = '100px',
this.objStyle.width = '200px'
}
}
})
</script>
1.7 分支循環結構
1. 分支結構
v-if 使用場景
-
1- 多個元素 經過條件判斷展現或者隱藏某個元素。或者多個元素
-
2- 進行兩個視圖之間的切換
<div id="app">
<!-- v-if 只渲染符合條件的部分 -->
<div v-if="score>=90">優秀</div>
<div v-else-if="score<90 && score>=80">良好</div>
<div v-else-if="score<80 && score>=70">中等</div>
<div v-else-if="score<70 && score>=60">合格</div>
<div v-else="score<60 ">較差</div>
<!-- 控制元素顯示隱藏 -->
<div v-show="flag">測試v-show</div>
<button v-on:click="handle">切換</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 68,
flag: true
},
methods: {
handle: function () {
this.flag = !this.flag;
}
}
})
</script>
2.v-show 和 v-if的區別
-
v-show本質就是標籤display設置爲none, 控制元素是否顯示（已經渲染到了頁面）
-
v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和建立，故v-show性能更好一點。
-
-
v-if是動態的向DOM樹內添加或者刪除DOM元素 控制元素是否渲染到頁面
-
v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件
-
3.循環結構
v-for遍歷數組
-
用於循環的數組裏面的值能夠是對象，也能夠是普通元素
<!-- 循環結構-遍歷數組
item 是咱們本身定義的一個名字 表明數組裏面的每一項
fruits對應的是 data中的數組名-->
<div id="app">
水果列表
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item,index) in fruits'>{{item + '----' + index}}</li>
<!-- 遍歷複雜數組 -->
<li v-for='item in myFruits'>
<span>{{item.ename}}</span>
<span>----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'banana', 'orange'],
myFruits: [{
cname: '蘋果',
ename: 'apple'
}, {
cname: '香蕉',
ename: 'banana'
}, {
cname: '橘子',
ename: 'orange'
}]
}
})
</script>
key的做用：幫助Vue區分不一樣的元素，從而提升性能
-
key來給每一個節點作一個惟一標識
-
key的做用主要是爲了高效的更新虛擬DOM
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
v-for遍歷對象
<div v-for='(value, key, index) in object'></div>
-
不推薦同時使用
v-if和v-for -
當
v-if與v-for一塊兒使用時，v-for具備比v-if更高的優先級。
<!-- 循環結構-遍歷對象
v 表明 對象的value
k 表明對象的 鍵
i 表明索引
--->
<div id="app">
<!-- 遍歷對象 -->
<!-- 當值等於19時才遍歷 結果爲 19---age---1-->
<div v-if="v==19" v-for='(v,k,i) in obj'>{{v + '---'+ k +'---' + i}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
// 原生js循環
var obj = {
uname: 'zhangsan',
age: '19',
sex: '女'
}
for (var k in obj) {
console.log(k, obj[k]);
};
//Vue循環
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: '19',
sex: '女'
}
}
});
</script>
相關文章
- 1. VUE 模板語法
- 2. Vue模板語法
- 3. vue模板語法
- 4. Vue 模板語法
- 5. Vue-模板語法
- 6. vue 模板語法
- 7. (Vue)vue模板語法
- 8. Vue 基礎模板語法
- 9. vue一.模板語法
- 10. Vue模板語法V-bind
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • Kotlin學習（一）基本語法
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. VUE 模板語法
- 2. Vue模板語法
- 3. vue模板語法
- 4. Vue 模板語法
- 5. Vue-模板語法
- 6. vue 模板語法
- 7. (Vue)vue模板語法
- 8. Vue 基礎模板語法
- 9. vue一.模板語法
- 10. Vue模板語法V-bind