Vue模板語法

3.1 模板語法概述

3.1.1如何理解前端渲染？

把數據填充到HTML標籤中

 

 

3.1.2前端渲染方式

• 原生js拼接字符串

• 使用前端模板引擎

• 使用vue特有的模板語法

3.1.3原生js拼接字符串

基本上就是將數據以字符串的方式拼接到HTML標 籤中，前端代碼風格大致上如圖所示。

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);
}
​

缺點：不一樣開發人員的代碼風格差異很大，隨着業 務的複雜，後期的維護變得逐漸困難起來。

3.1.4使用前端模板引擎

右側代碼是基於模板引擎art-template的一段代 碼，與拼接字符串相比，代碼明顯規範了不少， 它擁有本身的一套模板語法規則。

<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>

優勢：你們都遵循一樣的規則寫代碼，代碼可讀性 明顯提升了，方便後期的維護。

缺點：沒有專門提供事件機制。

3.1.5 模板語法概覽

• 差值表達式

• 指令

• 事件綁定

• 屬性綁定

• 樣式綁定

• 分支循環結構

3.2 指令

3.2.1什麼是指令？

• 什麼是自定義屬性

• 指令的本質就是自定義屬性

• 指令的格式：以v-開始（好比：v-cloak）

3.2.2 v-cloak指令用法

• 插值表達式存在的問題：「閃動」

• 如何解決該問題：使用v-cloak指令

• 解決該問題的原理：先隱藏，替換好值以後再顯示最終的值

3.2.3數據綁定指令

• v-text 填充純文本

  ① 相比插值表達式更加簡潔

• v-html 填充HTML片斷

  ① 存在安全問題

  ② 本網站內部數據可使用，來自第三方的數據不能夠用

• v-pre 填充原始信息

  ① 顯示原始信息，跳過編譯過程（分析編譯過程）

3.2.4數據響應式

• 如何理解響應式

  ① html5中的響應式（屏幕尺寸的變化致使樣式的變化）

  ② 數據的響應式（數據的變化致使頁面內容的變化）

• 什麼是數據綁定

  ① 數據綁定：將數據填充到標籤中

• v-once 只編譯一次

  ① 顯示內容以後再也不具備響應式功能

3.3 雙向數據綁定指令

3.3.1 什麼是雙向數據綁定？

 

 

3.3.2雙向數據綁定分析

• v-model指令用法

3.3.3 MVVM設計思想

M、V、VM 分別表明什麼？

m model

數據層 Vue 中 數據層 都放在 data 裏面

v view 視圖

Vue 中 view 即 咱們的HTML頁面

vm （view-model） 控制器 將數據和視圖層創建聯繫

vm 即 Vue 的實例 就是 vm

3.4 事件綁定

3.4.1Vue如何處理事件？

• v-on指令用法

  <input type=‘button' v-on:click='num++'/>

   

• v-on簡寫形式

<input type=‘button' @click='num++'/>
​

3.4.2事件函數的調用方式

• 直接綁定函數名稱

  <button v-on:click='say'>Hello</button>

   

• 調用函數

<button v-on:click='say()'>Say hi</button>
​
​

3.4.3事件函數參數傳遞

• 普通參數和事件對象

  <button v-on:click='say("hi",$event)'>Say hi</button>

   

3.4 .4事件修飾符

• .stop 阻止冒泡

  <a v-on:click.stop="handle">跳轉</a>

   

• .prevent 阻止默認行爲

<a v-on:click.prevent="handle">跳轉</a>
​
​

3.4.5 按鍵修飾符

• .enter 回車鍵

  <input v-on:keyup.enter='submit'>
  ​

   

• .esc 退出鍵

<input v-on:keyup.delete='handle'>
​

3.4.6. 自定義按鍵修飾符

• 全局 config.keyCodes 對象

  Vue.config.keyCodes.f1 = 112