【Vue.js 牛刀小試】：第二章 - 常見的指令的使用

時間  2019-11-07
標籤 Vue.js 牛刀小試 第二 常見的 指令 使用 欄目 JavaScript 简体版
原文   原文鏈接

系列目錄地址

前言

        在上一章中，咱們瞭解了一些在使用 Vue 進行開發中常常會遇到的基礎概念，與傳統的前端開發不一樣，Vue 可使咱們沒必要再使用 JavaScript 去操做 DOM 元素（仍是能夠用，可是極度不推薦），而這一優秀特性的核心就是 Vue 的指令系統，本章，一塊兒來學習 Vue 的指令系統。javascript

        倉儲地址：Chapter01-Rookie Directivescss

乾貨合集

        一、 v-cloakhtml

        在使用Vue的過程當中，當咱們引入了 vue.js 這個文件以後，瀏覽器的內存中就存在了一個 vue 對象，此時，咱們就能夠經過構造函數的方式建立出一個 vue 的對象實例，後面就能夠對這個實例進行操做。前端

        若是在這個過程當中，對於 vue.js 的引用由於某些緣由沒有加載完成，此時，未編譯的 Mustache 標籤就沒法正常顯示。例如，在下面的例子中，咱們模擬將網頁加載速度變慢，此時就能夠看見，頁面最早開始會顯示出插值表達式，只有 vue.js 加載完成後，纔會渲染成正確的數據。vue

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

<script src="../lib/vue.js"></script>

<script> new Vue({ el: '#app', data: { msg: 'hello world' } }); </script>
複製代碼

頁面閃爍
        這時候，咱們就可使用v-cloak指令用於隱藏未編譯完成的插值表達式，通常咱們在使用時會與添加一個隱藏該元素的樣式同時使用。 

<!-- 添加 v-vloak 樣式 -->
<style> [v-cloak] { display: none; } </style>

<div id="app">
	<!-- 添加 v-vloak 指令 -->
    <p v-cloak>{{msg}}</p>
</div>
複製代碼

        你們能夠看到，當頁面沒有顯示內容時，此時 p 標籤添加了一個 v-cloak 屬性，同時，從右側的樣式中能夠看到，隱藏顯示，當加載完成後， p 標籤上去除了該屬性，同時插值表達式也編譯完成，正確顯示出來。 java

v-cloak使用
         二、 v-text 與 v-html

        v-text 與 v-html 指令均可以更新頁面元素的內容，不一樣的是，v-text 會將數據以字符串文本的形式更新，而 v-html 則是將數據以 html 標籤的形式更新。git

        在更新數據上，咱們也可使用差值表達式進行更新數據，不一樣於 v-text、v-html 指令，差值表達式只會更新本來佔位插值所在的數據內容，而 v-text、v-html 指令則會替換掉整個的內容。程序員

<div id="app">

	<p>+++++++++ {{msg}} -----------</p>
	<p v-text="msg">=================</p>
	<p v-text="msgHtml">==============</p>
	
	<p v-html="msgHtml">============</p>

</div>

<script> new Vue({ el: '#app', data: { msg: 'hello world', msgHtml: '<h3 style="color:green">I want to learn vue.js</h3>' } }); </script>
複製代碼

更新內容

        三、 v-bindgithub

        v-bind 能夠用來在標籤上綁定標籤的屬性（例如：img 的 src、title 屬性等等）和樣式（能夠用style的形式進行內聯樣式的綁定，也能夠經過指定class的形式指定樣式）。同時，對於綁定的內容，是作爲一個 js 變量，所以，咱們能夠對該內容進行編寫合法的 js 表達式。數據庫

        在下面的示例中，咱們將這個按鈕的 title 和 style 都是經過 v-bind 指令進行的綁定，這裏對於樣式的綁定，咱們須要構建一個對象，其它的對於樣式的綁定方法，咱們將在後面的學習中提到。

<div id="app">
    <!-- v-bind：能夠用來在標籤上綁定標籤的屬性和樣式，對於綁定的內容，能夠對該內容進行編寫合法的 js 表達式 能夠簡寫爲 :要綁定的內容 -->
    <!-- <input type="button" value="按鈕" v-bind:title="msgTitle + 'lalala'" v-bind:style="{color:colorStyle,width:widthStyle+'px'}"> -->

    <!-- 使用 : 簡寫 -->
    <input type="button" value="按鈕" :title="msgTitle + 'lalala'" :style="{color:colorStyle,width:widthStyle+'px'}">
</div>

<script> new Vue({ el: '#app', data: { msgTitle: '這是我自定義的title屬性', colorStyle: 'red', widthStyle: '120' } }); </script>
複製代碼

        效果示意圖以下所示：

v-bind
         四、 v-on

        在傳統的前端開發中，當咱們想對一個按鈕綁定事件時，咱們須要獲取到這個按鈕的 dom 元素，再對這個獲取到的 dom 進行事件的綁定。在咱們學習 vue 的過程當中，咱們能夠秉持一個思想，對於 dom 的操做，所有讓 vue 替咱們完成，咱們只關注業務代碼實現，所以，咱們可使用 vue 內置的 v-on 指令來替咱們完成事件的綁定。         傳統的元素 js 寫法以下所示

<input type="button" value="點我啊~~~" id="btn">

<script> // 傳統的事件綁定方法 document.getElementById('btn').onclick = function () { alert('傳統的事件綁定方法'); } </script>
複製代碼

        在使用v-on指令對事件進行綁定時，咱們須要在標籤上指明 v-on:event(click、mousedown、mouseup 等等) 綁定的事件。

<input type="button" value="點我啊~~~" id="btn" v-on:click="alert(1111)">
複製代碼

        這樣就能夠了嗎？咱們能夠測試下，哦吼，報錯了，vue 提醒咱們屬性或者方法在 vue 實例中未定義，原來在 vue 的設計中許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱。因此，咱們須要在 vue 實例的 methods 下寫出方法。

事件綁定
        固然，使用 v-on 指令接收的方法名稱也能夠傳遞參數，咱們只須要在 methods 中定義方法時說明這個形參便可在方法中獲取到。 

<input type="button" value="點我啊~~~" id="btn" v-on:click="handlerClick">

<!-- 使用 @ 簡寫 -->
<input type="button" value="點我啊~~~" id="btn" @click="handlerClickWithParam(1)">

var vm = new Vue({
    el: '#app',
    data: {
        msgTitle: '這是我自定義的title屬性',
        colorStyle: 'red',
        widthStyle: '120'
    },
    methods: {//在 methods 中定義當前 vue 實例的全部可訪問方法
        handlerClick() {
            alert('我是使用 v-on 指令綁定的事件');
        },
		 handlerClickWithParam(id) {
            alert('我是使用 v-on 指令綁定的事件，方法參數爲'+id);
        }
    }
});
複製代碼

        五、 v-model

        在以前的學習中，對於數據的綁定，不論是使用插值表達式仍是 v-text 指令，對於數據間的交互都是單向的，即只能將 vue 實例裏的值傳遞給頁面，頁面對數據值的任何操做卻沒法傳遞給 model。

        例如，在下面的示例頁面中，咱們手動將頁面的 h3 標籤裏的內容進行修改，經過控制檯獲取到vue實例中的數據，發現數據並無發生變化。這裏可使用 window.vm 獲取到 vue 實例，則是由於咱們以前引入 vue.js 後，會自動在瀏覽器內存中建立 vue 對象，咱們經過構造函數建立的 vue 的實例也就存在與瀏覽器的內存裏了。

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

<script> var vm = new Vue({ el: '#app', data: { msg: '你好啊，hahaha' } }); </script>
複製代碼

數據的單項綁定
        MVVM中最重要的一個特性，能夠說就是數據的雙向綁定，而 vue 做爲一個 MVVM 框架，理所應當的實現了數據的雙向綁定，因此咱們可使用內置的 v-model 指令完成數據的在 View 與 Model 間的雙向綁定。

        咱們知道，只有表單元素能夠與用戶進行交互，因此咱們只能使用 v-model 指令在表單控件或者組件上建立雙向綁定。對於組件的雙向綁定，咱們也會在後面的學習中提到。

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

    <input type="text" name="" id="" v-model:value="msg">
</div>

<script> var vm = new Vue({ el: '#app', data: { msg: '你好啊，程十六' } }); </script>
複製代碼

v-model

        六、 v-if 與 v-show

        v-if 與 v-show 指令都是根據表達式的真假值判斷元素的顯示與否。

        在下面的代碼中，咱們經過綁定一個按鈕的點擊事件，去修改 flag 值，從而作到對於兩個 h3 標籤的顯示與否的控制。

<div id="app">
    <input type="button" value="切換" @click="handlerClick">

    <h3 v-if="flag">我是經過 v-if 指令控制的~~~</h3>
    <h3 v-show="flag">我是經過 v-show 指令控制的~~~</h3>
</div>

<script> var vm = new Vue({ el: '#app', data: { flag: true }, methods: { handlerClick() { this.flag = !this.flag; } } }); </script>
複製代碼

v-if、v-show控制元素顯示
        咱們能夠看到，flag 的初始值爲 true，此時，兩個 h3 標籤均可以顯示出來，當咱們點擊切換按鈕後，兩個 h3 都隱藏了，不一樣的是，咱們能夠看到，對於使用 v-if 指令控制的 h3 標籤，當表達式爲 false 時，這個元素 dom 會直接銷燬並重建，而對於使用 v-show 指令控制的 h3 標籤，當表達式爲 false 時，僅僅是將當前元素的 display CSS 屬性值設置爲 none。因此，當咱們須要頻繁控制元素的顯示與否時，推薦使用 v-show 指令，避免由於使用 v-if 指令而形成的高性能消耗。

        七、 v-for

        無論咱們是寫 C# 仍是寫 JAVA 或者是前端的 JavaScript 腳本，提到循環數據，首先都會想到 使用 for 循環，一樣的，在 vue 中，做者也爲咱們提供了 v-for 這一指令 用來循環數據。

        在使用 v-for 指令時，咱們能夠對數組、對象、數字、字符串進行循環，獲取到源數據的每個值。使用 v-for 指令，必須使用特定語法 alias in expression ，爲當前遍歷的元素提供別名，這裏相似於 C# 中的 foreach 的循環格式。

<div id="app">
    <!-- 一、循環數組數據 -->
    <p v-for="(item,index) in arrayList" :key="index">數組索引值: {{ index }} , 數據值: {{ item }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { arrayList: [12, 20, 34, 1, 6] } }); </script>
複製代碼

        在 v-for 指令中，咱們擁有對父做用域屬性的徹底訪問權限。v-for 還支持一個可選的第二個參數爲當前項的索引。在上面這個循環數組的代碼中，item 表明了數組中的每一項數據，index 則表示爲當前項的索引，因此咱們能夠很方便的打印出數組中每一項數據和索引。同時，咱們在 ul 標籤上綁定了一個 key 屬性，它能夠爲循環出來的每一項提供一個 key 值，咱們能夠理解成數據庫表中的每一條數據都有一個惟一的主鍵值，一樣的，咱們須要保證這個 key 值要惟一對應着當前的數據項。

        這裏，採用循環數組對象的方式，來解釋這個 key 屬性要惟一的問題。

<div id="app">
     <!-- 二、循環對象數組數據 -->
	<input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="index">數組索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { objList: [ {id: 1,name: 'zhangsan',age: 23}, {id: 2,name: 'lisi',age: 32}, {id: 3,name: 'wangwu',age: 22}, ] } }); </script>
複製代碼

        咱們如今循環了一個對象數組，並在每個數據項多的前面加了一個單選框，如今咱們選中 {id: 2,name: 'lisi',age: 32} 這個數據對象，同時，使用控制檯往數組中添加新的元素。咱們知道往一個數組中新增元素可使用 push 方法或者是 unshift 方法，咱們來嘗試一下。

key 屬性的使用
        咱們看到當咱們使用 push 方法在數組的最後添加一個數據時，以前單選框選擇的數據沒有發生更改，而當咱們使用 unshift 方法在數組最前面添加一個數據時，單選框選擇的數據就發生了更改。這裏就是由於 key 屬性綁定的是數組索引的緣故，咱們選中的索引值是1，當在選中的數組元素前面添加數據時，原來選中的數組數據的索引值就會加一，因此最後就會選擇到別的元素。         這裏咱們就能夠將 key 綁定爲 item.id 這個屬性，這樣咱們添加數據時就不會對選中的數據形成影響了，由於，咱們已經告訴了程序，咱們是根據 item.id 這個 key 值進行選中的，與數組的索引值無關。注意，這裏若是咱們添加的對象數據 id 仍是3的話雖然能夠添加成功，可是 vue 會給咱們提示警告信息了，由於已經存在了一個 id 等於3的數據。 

<div id="app">
    <!-- 二、循環對象數組數據 -->
	<input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="item.id">數組索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>
複製代碼

        對於對象、數字、字符串的循環與對於數組的循環差很少，實現方法以下所示，你們能夠本身編寫下試試。不過在遍歷對象時，是按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下是一致的。

<div id="app">
	<!-- 三、遍歷對象 -->
    <p v-for="(value,key,index) in obj" :key="key">鍵名: {{ key }} , 值: {{ value }} , 索引值: {{ index }}</p>

    <!-- 四、遍歷數字 -->
    <p v-for="item in 10" :key="item">{{ item }}</p>

    <!-- 五、遍歷字符 -->
    <p v-for="item in 'chengshiliu'" :key="item">{{ item }}</p>
</div>

<script> var vm = new Vue({ el: '#app', data: { obj: { id: 1, name: 'chengshiliu', age: 17 } } }); </script>
複製代碼

總結

        這一章咱們主要學習了一些 vue 中的內置指令，熟悉了它們的使用方法，本篇文章的所有的源碼都在文章開始處提供倉儲地址裏，每個文件的說明，能夠查看 github 倉儲的 readme 說明，但願能夠多多關注啊。

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程