Vue內建指令

阿新 • • 發佈：2018-11-02

1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等

主要用法是繫結屬性，動態更新HTML元素上的屬性；

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>

<a :href="url" rel="external nofollow"

rel="external nofollow" >...</a>

<div :title='title'>標題</div>

var app = new Vue({

el: '#app',

data: {

url: 'www.baidu.com',

　　　　title: 'bind'

},

}）

2、v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup

順帶講一下方法與事件

2.1 @click 的表示式可以直接使用JavaScript 語句，也可以是一個在Vue 例項中methods 選項內的函式名，可以在方法中傳遞引數

<a v-on:click="doSomething">...</a>

<a @click="doSomething()">...</a>　　　　//是一個方法名

<p ng-

if='show'>一段文字</p>

<button @click="show=false">點選隱藏文字</button>　　//直接是一個內聯的語句

<button v-on:click="count++">Add 1</button>

var app = new Vue({

el: '#app',

　　data:{

　　　　show: true，

　　　　counter： 0

　　},

methods: {

doSomething: function(){

console.log(this.title);

},

}

}）

2.2方法與事件：

Vue 提供了一個特殊變數$event ，用於訪問原生DOM 事件，可以阻止事件冒泡或者阻止連結開啟

寫一個阻止冒泡的例子：

<div @click="stopClick1('stop1',$event)">

<div @click="stopClick2('stop2',$event)">

<div @click="stopClick3('stop3',$event)">阻止冒泡</div>

</div>

methods:{

stopClick3: function(message, event){

console.log(message);

event.stopPropagation(); //阻止冒泡

},

stopClick2: function(message, event){

console.log(message);

},

stopClick1: function(message, event){

console.log(message);

}

2.3修飾符：

在＠繫結的事件後加小圓點“．”，再跟一個字尾來使用修飾符。

上面的阻止冒泡事件，可以直接使用者修飾符的方式寫為：

1	`<div @click.stop="stopClick3('stop3')">阻止冒泡</div>`　　`//不用通過$event事件再來寫了`

常用的一些修飾符有：

.stop

.prevent

.capture

.self

.once

＜！一阻止單擊事件冒泡一〉

<a @click.stop=”handle "></a>

〈！一修飾符可以串聯一〉

<a @click.stop.prevent=” handle ” ></a>

〈！一新增事件偵聽器時使用事件捕獲模式一〉

<div @click . capture=”handle ”> ... </div>

〈！一隻當事件在該元素本身（而不是子元素）觸發時觸發回撥一〉

<div @click.self=” handle ”> ... </div>

＜！一隻觸發一次，元件同樣適用一〉

<div @click.once=” handle ”> ... </div>

在表單元素上監昕鍵盤事件時，還可以使用按鍵修飾符，比如按下具體某個鍵時才呼叫方法：

1 2	`＜！一隻有在keyCode 是13 時呼叫vm.submit()一〉` `<input @keyup.13 ＝“ submit ”〉`

3、v-model：資料雙向繫結；用於表單輸入等；例如：< input v-model= "message">

4、v-show：條件渲染指令，為DOM設定css的style屬性(不能在<template>標籤上使用)

5、v-if：條件渲染指令，動態在DOM內新增或刪除DOM元素

6、v-else：條件渲染指令，必須跟v-if成對使用

7、v-else-if：判斷多層條件，必須跟v-if成對使用；

8、v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同於 < span>{{msg}} </ span>；

9、v-html：更新元素的innerHTML；會把標籤名也帶上。

10、v-for：迴圈指令；例如：

<div id= "app ">

<ul>

<li v-for="book in books">{ { book.name } }</li>

</ul>

</div>

var app =new Vue({

el: '#app',

data: {

books: [

{name: '<vue.js實戰>'},

{name: '<javascript語言精粹>'},

{name: '<javascript高階程式設計>'}

]

}

});

10.1 v- for 的表示式遍歷陣列時支援一個可選引數作為當前項的索引，例如：

<div id="app">

<ul>

<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>

</ul>

</div>

10.2 v- for 的表示式遍歷物件屬性時，有兩個可選引數，分別是鍵名和索引：

<div id= "app">

<ul>

<li v-for="(value , key , index) in user ">

{ { index } } - { { key } } : { { value } }

</li>

</ul>

</div>

var app = new Vue({

el: '#app',

data: {

name: 'Aresn',

grender: '男',

age:23

}

});

10.3 v- for 的表示式還可以迭代整數：

<div id="app">

<span v-for="n in 10">{{n}}</span>

</div>

10.4 陣列更新

當我們修改陣列時， Vue 會檢測到資料變化，所以用v-for 渲染的檢視也會立即更新。

• push()
• pop()
• shift()
• unshit（）
• splice()
• sort（）
• reverse()

這些方法會改變被這些方法呼叫的原始陣列

例如，我們將之前一個示例的資料books 新增一項：

app.books.push({

name: '《css世界》'

});

有些方法不會改變原陣列，例如：

• filter()
• concat()
• slice()

它們返回的是一個新陣列，在使用這些非變異方法時，可以用新陣列來替換原陣列，如：

app.books = app.books.filter(function (item) {

return item . name.match(/JavaScript/);

});

Vue 在檢測到陣列變化時，並不是直接重新渲染整個列表，而是最大化地複用DOM 元素。

替換的陣列中，含有相同元素的項不會被重新渲染，因此可以大膽地用新陣列來替換舊陣列，不用擔心效能問題。

10.5 過濾與排序

當你不想改變原陣列，想通過一個數組的副本來做過濾或排序的顯示時，可以使用計算屬性來返回過濾或排序後的陣列，例如：

<div id="app">

<ul>

<template v-for="book in filterBooks">

<li>書名：{{book.name}}</li>

<li>作者：{{book.author}}</li>

</template>

</ul>

</div>

var app= new Vue({

el: '#app',

computed: {

filterBooks: function(){

return this.books.filter(function (book) {

return book.name.match(/JavaScript/);

})

},

}

});

11、v-cloak：不需要表示式，這個指令保持在元素上直到關聯例項結束編譯； v-cloak 是一個解決初始化慢導致頁面閃動的最佳實踐；

12、v-once：也是一個不需要表示式的指令，作用是定義它的元素或元件只渲染一次，包括元素或元件的所有子節點。

首次渲染後，不再隨資料的變化重新渲染，將被視為靜態內容； v-once 在業務中也很少使用，當你需要進一步優化效能時，可能會用到。

13、v-pre：不需要表示式，跳過這個元素以及子元素的編譯過程，以此來加快整個專案的編譯速度；例如： < span v-pre>{{ this will not be compiled }} </ span>；

Vue內建指令

1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等主要用法是繫結屬性，動態更新HTML元素上的屬性； 1 2 3 4 5 6 7 8 9 10 11

vue內建指令詳解

指令是Vue模板中最常用的一項功能，它帶有字首v-，主要職責是當其表示式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內建指令詳解,需要的朋友可以參考下指令 (Directives) 是帶有 v- 字首的特殊屬性，職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於

vue內建指令與自定義指令

一、內建指令 1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb 2、v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup 3、v-model：

VUE：內建指令與自定義指令

VUE：內建指令與自定義指令常用的內建指令 1）v:text　　更新元素的 textContent 2）v-html　　更新元素的 innerHTML 3）v-if　　如果為true，當前標籤才會輸出到頁面 4）v-else　　如果為false，當前標籤才會輸出到頁面 5）v-show　　通過控

Vue(四) 內建指令

現在介紹 Vue.js 中更多的內建指令基本指令 v-cloak v-cloak 不需要表示式，它會在 Vue 例項結束編譯時從繫結的 HTML 元素上移除，經常和 CSS 的 display: none; 配合使用： <div id="app" v-cloak> {

vue學習：內建指令

1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb 2、v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup 3、v-mode

【Vue】通過自定義指令回顧 v-內建指令

Vue.js 的各種指令（Directives）更加方便我們去資料驅動 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等內建指令，這些指令的職責就是當表示式改變時將某些行為應用到 DOM 上，儘量不去操作增刪改 DOM。通過了解如何去自定義指

Vue框架整理：vue.js內建指令 v-if、v-for 、處理載入時閃動未處理的資料

vue 基本指令： v-cloak : 一般被用在網速較慢，Vue還沒有載入完成時，不過當Vue建立例項後內容就會被替換掉，並且螢幕會有一點閃動，使用時最好配合的加一句CSS : [v-cloak]{ display:none;} 這個指令在小

Vue.js入門-內建指令v-html

詳細：更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板,可以重新考慮是否通過使用元件來替代。例項：

vue內置指令詳解——小白速會

ret 表單元 www. reverse 副本用法以及 erb handle 指令 (Directives) 是帶有 v- 前綴的特殊屬性，職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。內置指令 1、v-bind：響應並更新DOM特性；例如：

vue內建元件

1.transition name - string，用於自動生成 CSS 過渡類名。例如：name: 'fade' 將自動拓展為.fade-enter，.fade-enter-active等。預設類名為 "v" <transition> 元素作為單個元

Angularjs系列之常用內建指令

2.4.1. 常用內建指令常用內建指令有一些獨特的性質。雖然可用表示式生成HTML程式碼從而與它們等效，但這些做法都是不推薦的。 ng-href 當使用當前作用域中的屬性動態建立URL時，應該用ng-href代替href。Angul

angular.js常用內建指令

**指令，我將其理解為AngularJS操作HTML element的一種途徑。 AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。** angularjs指令： 1.ngApp 寫法：ng-app ng-app 指令初

Angular中的內建指令

Angular提供了若干內建指令。因為內建指令是已經匯入過的，故可以直接在元件中直接使用它們。 ngIf 如果你希望根據一個條件來決定顯示或隱藏一個元素，可以使用ngIf指令。這個條件是由你傳給指令的表示式的結果決定的。如果表示式的結果返回的是一個假值，那麼元素會從DOM

AngularJs 常見內建指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 指令</title> <!--

AngularJS內建指令示例——表單驗證

示例1： <html ng-app='TestFormModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> &

AngularJS入門 AngularJS控制器 AngularJS常見內建指令

每一個AngularJS應用，都有唯一的一個全域性作用域範圍，也稱為根作用域，Angular中其他的作用域都是這個根作用域的後代/子作用域。 AngularJS的根作用域/全域性作用域：$rootScope。根作用域使用時，通過注入的方式新增到控制器處理函式的入參中。 $watch: $scope物

AngularJs內建指令

ng-app 每一次用AngularJS都離不開這個指令，順便說下$rootScope。聲明瞭ng-app的元素會成為$rootScope的起點，而$rootScope是作用域鏈的根，通常宣告在<html>你懂的。也就是說根下的作用域都可以訪問它。但是，

AngularJs內建指令大全

1、ng-model 這個大家都非常熟悉了，就是將表單控制元件和當前作用域的屬性進行繫結。需要注意繫結的scope的範圍（父scope與子scope）。 ng-model主要繫結的元素包括input， select， textarea ng-model的元素都有ng-valid（可用）

Vue源碼後記-其余內置指令（2）

model 歸類 cli undefined bject 調用默認 inpu plain 　　…… 　　指令這個講起來還有點復雜，先把html弄上來： <body> <div id=‘app‘>

Vue內建指令

相關推薦