Vue前端架構常用指令

文章目錄

- - 常用指令
  - - 插值表達式：
    - v-cloak:時鐘指令
    - v-text:文本資訊綁定指令
    - v-html:Html資訊綁定指令
    - v-bind:元素屬性值綁定指令
    - v-on:方法綁定指令
    - v-mode:雙向綁定指令
    - v-for:循環指令

常用指令

插值表達式：

文法:

{{要插入的值}}

此時相當于占位符，到時候{{關鍵字}}會被替換成Model中的資料

注意點:

當網速較慢時，Vue初始化未完成時，插值表達式不能被解析，會直接顯示

出來，加載完畢之後又會被替換成真實結果，造成閃爍效果（Vue的加載代碼寫在HTML元素之後時會出現該bug）

v-cloak:時鐘指令

針對上面出現的問題,引出了v-clock指令

此指令是把它當作HTML元素的一個屬性使用

示例：

<p v-cloak>{{msg1}}</p>

特點：

當Vue加載完畢後，v-cloak屬性會自動消失。

運作機理：

等同于添加了如下CSS樣式：讓所有帶v-cloak屬性的元素隐藏，Vue加載完成後顯示實作，以解決使用插值表達式閃爍的問題:

[v-cloak]{
      		display: none;
		  }

v-text:文本資訊綁定指令

文法：

<p v-text="msg1"></p>

作用：和插值表達式一樣，用于給HTML元素添加文本

差別：

v-text不會存在閃爍問題
v-text會将Model中的資料完全替換到HTML元素中（覆寫）
插值表達式隻會将Model中的資料替換到插值表達式中（占位符内容的替換）

相同點：

4. 插值表達式和v-text都可以給HTML元素顯示文本

5. 插值表達式和v-text都不會解析要添加文本中的HTML标簽（原樣顯示）

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
	<!--插值表達式 -->
    <p v-cloak>{{msg}}</p>
    <!--v-text指令-->
    <p v-text="msg1"></p>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
	    el:"#app",
	    data:{
	        msg:"hello,vue",
	        msg1:"hello"
	         }
    })
</script>
</body>
</html>

Vue前端架構常用指令

思考一個問題:要是我們在data中寫一段html代碼,那麼替換到上面的div中,會被解析嗎?

不會,因為不管是插值表達式還是v-text指令都是将字元串進行了替換,不會解析html代碼…那有沒有什麼方法可以做到呢? v-html指令就出現了

v-html:Html資訊綁定指令

和v-text的唯一差別：給HTML添加内容時會解析内容中的HTML代碼

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

結果:(可以看到這裡确實将msg2中寫入的代碼進行了解析并展示了出來)

Vue前端架構常用指令

接下來我們再來看一種綁定字元串的方式…

v-bind:元素屬性值綁定指令

文法：在HTML元素的屬性目前加上綁定辨別，此時HTML的該屬性的值就會根據屬性值的名字從Model中擷取資料

示例：

<p>使用者名：<input type="text" name="username" v-bind:value="msg" /></p>

注意：

【v-bind:】用于綁定HTML元素屬性的值
使用v-bind指令是需要加載一個命名空間的: xmlns:v-bind="http://www.w3.org/1999/xhtml" ,使用:就可以不用導入了…
【v-bind:】可以簡寫為 :
Vue架構會把使用了v-bind:辨別的HTML的屬性的值當作一個Javascript表達式來使用

隻要表達式合法，就能執行（當然，資料必須是自變量或來自于Model中）

如：

:value=“msg+‘你好’”

:value=“msg+msg”

示例:

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
    <!--方法的綁定-->
    使用者名:<input type="text" name="username" v-bind:value="msg" />
    使用者名:<input type="text" name="username" :value="msg" />
    使用者名:<input type="text" name="username" v-bind:value="msg+'你好'" />
    使用者名:<input type="text" name="username" :value="msg+msg1" />
</div>

<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

結果:

Vue前端架構常用指令

接下裡我們看看如何綁定方法…

v-on:方法綁定指令

解釋：在HTML的事件屬性（屬性名不帶on）前加上綁定辨別，此時HTML觸發此事件時，會執行事件中綁定的代碼

示例：

<button v-on:click="vueTest()">點選有驚喜</button>

<button @click="vueTest()">點選有驚喜</button>

注意：

常見的web網頁的事件都支援綁定
事件名字不能帶on
v-on指令需要導入命名空間: xmlns:v-on="http://www.w3.org/1999/xhtml" ,使用@就不用導入命名空間了…
事件觸發的方法必須在methods中有定義
v-on辨別的屬性會被Vue解析為特定JavaScript，隻要内容符合JavaScript規範都能正确執行（例如:傳入參數）
v-on:等價于 @

示例:

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
    <!--方法的綁定-->
    使用者名:<input type="text" name="username" v-bind:value="msg" />
    使用者名:<input type="text" name="username" :value="msg" />
    使用者名：<input type="text" name="username" v-bind:value="msg+'你好'" />
    使用者名:<input type="text" name="username" :value="msg+msg1" />
    <br/>
    <hr/>
    <button v-on:click="vueTest1()">點選有驚喜1</button>
    <button @click="vueTest2()">點選有驚喜2</button>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             },
        methods:{
            vueTest1:function () {
                alert("你好！");
            },
            vueTest2:function () {
                alert("你好！");
            }
        }
    })
</script>
</body>
</html>

v-mode:雙向綁定指令

唯一的一個實作雙向資料綁定的指令

文法：

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

适用元素：表單元素，其它元素不能使用v-model指令
input系列（可以輸入内容的）、select、textarea

雙向綁定：

model層資料的改變會影響view層HTML結果

HTML中表單元素值的改變會寫入對應的model層的資料中

示例:通過雙向綁定v-model指令實作一個簡易的電腦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的雙向資料綁定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div class="box">
        <h1>Vue中的雙向資料綁定指令v-mode</h1>
        <label>單價：<input type="text" v-model="price"></label><br/>
        <label>數量：<input type="text" v-model="num"></label><br/>
        <button @click="calc()">點選計算總價</button><br/>
        <label>總價：<span style="color:deeppink" v-text="sum"></span></label>
        <hr/>
        <h1>使用v-mode雙向資料綁定實作建議電腦</h1>
        <label>操作數1：<input type="text" v-model="num1" /></label>
        <select v-model="opr">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <label>操作數1：<input type="text" v-model="num2" /></label>
        <button @click="doCalc()">=</button>
        <span style="font-size: 20px;color:deeppink" v-text="result"></span>
    </div>
    <script type="text/javascript">
        var vm2 = new Vue({
            el:".box",
            data:{
                price:12,
                num:1,
                sum:12,
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                calc(){
                    this.sum = this.price*this.num;
                },
                doCalc(){
                    this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
                }
            }
        });
    </script>
</body>
</html>

結果:

Vue前端架構常用指令

知識點:

JavaScript的eval()方法可以把一個字元串當作JavaScript代碼執行，并傳回執行結果,如：

this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");

注意：

當代碼很複雜或難以控制時可以使用此方法，上面代碼中會包含太多的判斷,是以使用了eval()方法,大多數還是使用标準方法執行JavaScript代碼

v-for:循環指令

使用v-for指令周遊簡單數組 {{name}} 
使用v-for指令周遊對象數組 id：{{user.id}}---name：{{user.name}}
使用v-for指令周遊對象屬性值 {{key+'--'+value}}
使用v-for指令周遊數字（作用就是标準的for循環次數周遊）

總結:

格式為 v-for="xxx in xxx"
index是v-for中的預設屬性,值下标,從0開始…
周遊方式類似于我們java中學過的增強for
對于周遊對象,可以直接user.id這種形式,不需要使用get方法來擷取屬性值

注意

周遊得到的值可以使用【插值表達式、v-text、v-html】顯示
不管周遊何種資料類型，都可以得到值和索引
周遊對象屬性和值時可以得到【值、屬性名字、索引】
值的指派順序是：值、【鍵名】、索引
一次周遊中，多個結果之間使用,分割即可對應指派（value,key,index）
周遊過程中接受值的變量名字可以任意
周遊數字時數字是從1開始，不能是負數（因為該功能是固定次數周遊）
在元件中使用資料時，一定要用key唯一綁定資料（保證對UI元件的操作不會因為其它元件的變化而發生變化）

注意：

key必須是基本資料類型（string/number）

報錯：Avoid using non-primitive value as key, use string/number value instead.
key的資料值一定不要重複

報錯：Duplicate keys detected: ‘3’. This may cause an update error.

技巧：一般使用對象中的值唯一屬性（主鍵）作為key，比如id

文法：

<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
</p>

看不懂key和value?看看下面的代碼

<script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                names:["張三","李四","王五","趙六","田七"],
                users:[
                    {id:1,name:"胡歌",age:32},
                    {id:2,name:"袁弘",age:33},
                    {id:3,name:"霍建華",age:35}
                ],
                allClass:{no:"年級",classteacher:"班主任",classnum:["重點班","實驗班","普通版","火箭班"]
                }
            }
        });
    </script>

解釋:

names為數組,可以直接周遊
users為對象數組,也可以直接周遊
allClass為一個對象,但是内部包含了很多屬性,就要用到key和value來進行調用…

知識點

如果元件的屬性的值是一個變量，則必須使用v-bind:或者:進行屬性值的綁定
數組的push()方法用于向數組末尾加入元素，數組的unshift()方法用于向數組最前面加入元素 this.users.push({id:this.id,name:this.name,age:this.age}); this.users.unshift({id:this.id,name:this.name,age:this.age});
在周遊對象數組并結合元件（表單元素）一起使用時，一定要指定唯一的key屬性，進行元件和資料

的唯一關聯，避免被其它操作（指非本元素）影響

Vue前端架構常用指令

文章目錄

常用指令

插值表達式：

v-cloak:時鐘指令

v-text:文本資訊綁定指令

v-html:Html資訊綁定指令

v-bind:元素屬性值綁定指令

v-on:方法綁定指令

v-mode:雙向綁定指令

v-for:循環指令

繼續閱讀

Docker-DockerFile指令詳解

vue系列——基礎知識

web前端 vue介紹使用

【精講】vue2架構 GitHub資料擷取（内含詳細解析）第一部分：子元件

linux的基本操作與使用

vue架構基礎之資料綁定指令v-text，v-html,v-pre，及它們的差別

[Java基礎]--Java開發必須掌握的線上問題排查指令

vue報錯：Uncaught SyntaxError: unexpected token *vue-cli 打包後送出到線上出現 "Uncaught SyntaxError:Unexpected token <" 報錯Vue打包後放到伺服器出現Loading chunk {n} failed 錯誤

Vue-cli搭建vue項目

Uncaught TypeError: Cannot set property ‘onclick‘ of null

Linux終端複用神器-TMUX：常用指令

入門linux系統之 FTP、 NFS、靜态站點小集合篇

入門linux基礎之主從複制GTID篇

入門linux基礎之mysql部署實驗篇

入門linux基礎之YUM工具介紹及使用篇

vue中判裝置類型判斷移動端和pc端