靈魂拷問：你是否懂得全部的Vue模板語法呢？

時間 2020-01-02

標籤靈魂拷問是否懂得全部 vue 模板語法简体版

原文原文鏈接

做者 | Jesksonjavascript

掘金 | https://juejin.im/user/5a16e1...css

Vue.js的建立者爲尤雨溪，2014年，Vue.js正式發佈，2015年，正式發佈1.00版本。VUE.JS爲漸進式的JavaScript框架，聲明式渲染，組件系統，客戶端路由，集中式狀態管理，項目構建。html

vue.js是一套用於構建用戶界面的漸進式框架，與其它大型框架不一樣的是，Vue被設計能夠自底向上逐層應用，vue.js的核心庫只關心視圖層，很容易上手，也便於和第三方庫或者是既有的項目整合。前端

vue的優勢，易用，就是能夠快速上手vue，靈活，就是能夠在一個庫和一套完整框架之間自入伸縮，高效，文件大小20kb運行大小，提供超快的虛擬DOM。vue

傳統開發模式的代碼：java

JavaScript原生代碼：jquery

<div id = "msg"> </div>

<script type="text/javascript">
 var msg = 'hello dada';
 var div = document.getElementById("msg");
 div.innerHTML = msg;
</script>

jquery代碼：web

<div id="msg"></div>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
 var msg = "hello da";
 $('#msg').html(msg);
</script>

Vue的基本操做，向世界問好！算法

<div id="app>
 <div>{{msg}}</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">
 new Vue({
  el: '#app',
  data: {
   msg: 'hello world'
  }
 })
</script>

vue的使用過程，須要提供標籤用於填充數據，引入vue.js庫文件，可使用vue的語法作功能，把vue提供的數據填充到標籤裏面。segmentfault

el屬性，元素的掛載位置，值能夠是css選擇器或者是dom元素

data屬性，模型數據，值是一個對象

插值表達式用法

將數據填充到HTML標籤中，插值表達式支持基本的計算操做

vue代碼運行的原理

vue語法到原生語法，vue的語法經過vue框架編譯成原生的代碼。

vue的模板語法

如何理解前端渲染？

把數據填充到HTML標籤中

模板和數據-》前端渲染-》靜態HTML文件

前端渲染方式：原生js拼接字符串，使用前端模板引擎，使用vue特有的模板語法

原生js拼接字符串，就是將數據以字符串的方式拼接到HTML標籤中。

什麼是指令？什麼是自定義屬性，指令的本質就是自定義的屬性，指令格式以v-開頭

指令v-cloak

插值表達式存在一個問題，「閃動」問題，就是刷新的時候會出現閃動的效果，如何解決問題，使用v-cloak指令，解決這個問題的原理，先隱藏，替換好值以後再顯示最終的值。

v-cloak，不須要表達式，用法，這個指令保持在元素上直到關聯實例結束編譯，和css規則如 [v-cloak] {display: none} 一塊兒用時，這個指令能夠隱藏未編譯的mustache標籤直到實例準備完畢。

示例：標準的屬性選擇器

[v-cloak] {
 display: none;
}

<div v-cloak>
 {{message}}
</div>

不會顯示，直到編譯結束。

v-cloak指令的用法

第一步使用提供的樣式

[v-cloak] {
 display: none;
}

第二步，在插值表達式所在的標籤中添加v-cloak指令

本質原理，先經過樣式隱藏內容，而後在內存中進行值的替換，替換好以後在顯示最終的結果。

數據綁定的指令

v-text填充純文本，v-html填充HTML代碼，v-pre填充原始信息

v-text，string，更新元素的textContent

示例：

<span v-text="msg"></span>

<span>{{msg}}</span>

v-html，string，更新元素的innerHTML，內容按照普通HTML插入，不會做爲vue模板進行編譯，若是試圖使用v-html組合模板，能夠從新考慮是否經過使用組件來替代。

在網站上動態渲染任意HTML是很危險的，容易致使xss攻擊，只在可信內容上使用v-html，永不用在用戶提交的內容上。

在單文件組件裏，scoped的樣式不會應用在v-html內部，由於那部分HTML沒有被vue的模板編譯器處理，若是你但願針對v-html的內容設置帶做用域的css，你能夠替換爲css modules或用一個額外的全局<style>元素手動設置相似bem的做用域策略。

v-html填充HTML片斷，存在安全問題的，只有在本網站內部數據可使用，第三方的數據不可使用。

v-pre填充原始信息

什麼是原始信息，就是若是是，不用編譯，跳過編譯過程

<div v-pre>{{msg}}</div>

會致使顯示結果爲： {{msg}}

指令

數據響應式，HTML5中的響應式，數據的響應式，什麼是數據綁定？v-once只會編譯一次。HTML5中的變化，屏幕尺寸的變化會致使樣式的變化，數據的響應式指數據的變化致使頁面中內容的變化。

數據綁定如何理解，就是插值表達式是將數據填充到標籤中。

編譯，vue的模板內容就要經過vue的編譯過程，v-once只編譯一次，顯示內容以後再也不具備響應式功能。

雙向數據綁定

v-model指令的用法

<input type="text" v-model="name"/>

MVVM設計思想：把不一樣的功能代碼放到不一樣的模塊裏面

M,model
v,VIEW
VM，view-model

模型，數據，用到的數據，視圖，就是dom元素，模板，vm，二者的結合，把二者聯合到一塊兒。

核心思想，分而食之，事件監聽，數據綁定。

事件綁定，如何處理事件，v-on指令的用法

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

<input type="button" @click="num++"/>

事件函數的調用

直接綁定函數名稱

<button v-on:click="da">dada</button>

調用函數

<button v-on:click="da()">dada</button>

事件函數參數傳遞

普通參數和事件對象

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

阻止事件冒泡

dada: function(event) {
 event.stopPropagation();
}

事件修飾符

.stop 阻止冒泡
<a v-on:click.stop = "dada">跳轉</a>

.prevent 阻止默認行爲
<a v-on:click:prevent="dada">跳轉</a>

事件處理

監聽事件

能夠用v-on指令監聽dom事件，並在觸發時運行一些JavaScript代碼。

示例：

<div id="dada">
 <button v-on:click="counter += 1">da da</button>
 <p>dada {{counter}} </p>
</div>

var vm = new Vue({
 el: '#dada',
 data: {
  counter: 0
 }
})

內聯處理器中的方法

除了直接綁定到一個方法，也能夠在內聯的JavaScript語句中調用方法

<div id="da">
 <button v-on:click="say('hi')">dada</button>
</div>

new Vue({
 el: '#da',
 methods: {
  say: function(message) {
   alert(message)
  }
 }
})

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。

.stop

.prevent

.capture

.self

.once

.passive

// 阻止單擊事件繼續傳播
<a v-on:click.stop = "doThis"></a>

// 提交事件再也不重載頁面
<form v-on:submit.prevent="onSubmit"></form>

// 修飾符能夠串聯
<a v-on:click.stop.prevent="doThis"></a>

// 只有修飾符
<form v-on:submit.prevent></form>

// 添加事件監聽時使用事件捕獲模式
// 即爲元素自身觸發的事件先在此處理，而後才交由元素進行處理
<div v-on:click.capture="doThis"></div>

// 只當在event.target是當前元素自身觸發處理函數
// 即事件不是從內部元素觸發的
<div v-on:click.self="doThat">..</div>

按鍵修飾符

// .enter 回車鍵
<input v-on:keyup.enter="submit">

// .delete刪除鍵
<input v-on:keyup.deleter="handle">

使用修飾符要注意順序，相應的代碼會以一樣的順序產生。

v-on:click.prevent.self 會阻止全部的點擊

v-on:click.self.prevent 只會阻止對元素自身的點擊

所有的按鍵別名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定義按鍵事件修飾符

能夠經過全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可使用v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

<body>
 <div id="app">
  <input type="text" v-on:keyup.aaa="handle" v-model="info">
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
 Vue.config.keyCodes.aaa = 65
 var vm =  new Vue({
  el: '#app',
  data: {
   info: ''
  },
  methods: {
   handle: function(event) {
    console.log(event.keyCode)
   }
  }
 });
</script>

應用實例，簡單的計算器

需求，實現簡單的加法計算，分別輸入數值a和數值b，點擊計算按鈕，結果顯示在下面

<body> 
<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 @:click="handle">計算</button>
</div>

<div>
<span>計算結果：</span>
<span></span>
</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data: {
   a: '',
   b: '',
   result: ''
  },
   methods: {
    handle: function() {
     // 實現計算邏輯
     this.result = parseInt(this.a) + parseInt(this.b);
    }
   }
 });
</script>

屬性綁定

vue如何動態處理屬性呢？

// v-bind指令
<a v-bind:href="url">跳轉</a>

// 縮寫方式
<a :href="url">跳轉</a>

考察v-model指令的本質

<body>
<div id="app">
<input type="text" v-bind:value="msg" v-on:input="handle">
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

var vm = new Vue({
 el:'#app',
 data: {
  msg: 'dada',
 },
 methods: {
  handle: function(event) {
   this.msg = event.target.value;
  }
 }
})

優化：

<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">

樣式綁定

class樣式處理

對象語法

<div v-bind:class="{ active: isActive }"></div>

數組語法

<div v-bind:class="{activeClass, errorClass}"></div>

數組綁定樣式的語法：

<div v-bind:class="[activeClass, errorClass]'>dada</div>

var vm = new Vue({
 el: '#app',
 data: {
  activeClass: 'active',
  errorClass: 'error'
 },
 methods: {
  handle: function(){
   this.activeClass= '',
   this.errorClass= '',
  }
 }
});

對象綁定和數組綁定能夠結合使用，class綁定的值能夠簡化操做。

v-bind:class="[activeClass, errorClass, {test: isTest}]"

// 數組的簡化
arrClasses: ['active', 'erro'],

// 對象的簡化
objClass: {
 active: true,
 error: true
}

style樣式處理

// 對象語法
<div v-bind:style=" { color: activeColor, fontSize: fontsize }"></div>

// 數組語法
<div v-bind:style="[baseStyle, overridingStyles]"></div>

分支循環結構

v-if
v-else
v-else-if
v-show

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

也能夠用 v-else 添加一個「else 塊」：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

v-if和v-show的區別

v-if控制元素是否渲染到頁面

v-show控制元素是否顯示，已經渲染到了頁面

循環結構

// v-for遍歷數組
<li v-for="item in list">{{item}}</li>

<li v-for="(item, index) in list">{{item}}+","+{{index}}</li>

<li :key="item.id" v-for="(item,index) in list">{{item}}</li>

key的做用：幫助vue區分不一樣的元素，從而提升性能

v-if和v-for的使用

// v-for遍歷對象
<div v-for="(value, key, index) in object"></div>

// v-if和v-for
<div v-if="value==12" v-for="(value,key,index) in object"></div>

for...in...循環不建議遍歷數組，只遍歷對象

實例：

Vue實現Tab選項卡

主要思路:

點擊不一樣 tab

獲取 tab 選項卡下標併爲其動態綁定一個class(選中狀態時的樣式)

點擊時使 tab 對應的內容下標與 tab 選項卡下標保持一致

使用 v-show / v-if 指令控制內容顯示與隱藏

<div class="parts">
    <span @click="func('A');" v-bind:class="{'active':(active=='A') }">A</span>
    <span  @click="func('B');" v-bind:class="{'active':(active=='B') }">B</span>
    <span  @click="func('C');" v-bind:class="{'active':(active=='C') }">C</span>
</div>

<div class="block block1" v-if="block=='A'">
    A block
</div>
<div class="block block1" v-if="block=='B'">
    B block
</div>
<div class="block block1" v-if="block=='C'">
    C block
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            active:'A',
            block:'A'
        },
        filter:{
 
        },
        watch:{
 
        },
        methods: {
            func:function(c){
                this.active=C;
                this.block=C;
            }
        }
    });
</script>

<template id="tp1">
    <div id="nav">
        <ul>
            <li v-for="item in array" @click="choose(item)" :class='content===item?"pink":"blue"'>{{item}}</li>
        </ul>
        <div id="div">{{content}}</div>
    </div>
</template>

<script>
    //建立一個組件
    var component=Vue.extend({
       template:"#tp1",
        data:function () {
            return{
              content:"北京",
              array:["北京","上海","杭州","廣州","深圳"]
           }
        },
        methods:{
           choose:function (item) {
            this.content=item;
           }
        }
    });
    //註冊一個組件
    Vue.component("test",component);
    new Vue({
        el:"#app",
        data:{
            name:"選項卡組件案例"
        }
    });
</script>

<template>
    <div>
      <div id="tab">
        <div class="tab-tit">
          
          <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
          <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
          <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
          <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
        </div>
        <div class="tab-con">
          
          <div v-show="curId===0">
            html<br/>
          </div>
          <div v-show="curId===1">
            css
          </div>
          <div v-show="curId===2">
            javascript
          </div>
          <div v-show="curId===3">
            vue
          </div>
        </div>
      </div>
    </div>
</template>

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話，求點贊👍 求關注❤️ 求分享👥 對暖男我來講真的

很是有用！！！