Vue 指令總結(jié)

yankeys 發(fā)布于2019-08-26 10:15 / 1578人閱讀

摘要：注意三者必須緊跟在一起。標(biāo)簽類型或成員，類型為數(shù)組用于渲染列表數(shù)據(jù)重復(fù)標(biāo)簽。是數(shù)組索引，是數(shù)組項(xiàng)目的索引。表達(dá)式屬性中標(biāo)簽類型指令表達(dá)式，變量均為或的成員標(biāo)簽類型內(nèi)容中標(biāo)簽類型表達(dá)式，變量均為或的成員標(biāo)簽類型參考資料

指令（directive） v-bind

<[標(biāo)簽類型] v-bind:[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />
<[標(biāo)簽類型] :[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />

v-on

<[標(biāo)簽類型] v-on:[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />
<[標(biāo)簽類型] @[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />

v-if / v-else-if / v-else

<[標(biāo)簽類型] v-if:[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />
<[標(biāo)簽類型] v-else-if:[標(biāo)簽屬性]="[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]" />
<[標(biāo)簽類型] v-else />

v-if 、 v-else-if 和 v-else 用于指示某個(gè)元素是否渲染。

注意：三者必須緊跟在一起。

v-for

<[標(biāo)簽類型] v-for="(item, index) in [data 或 methods 成員，類型為數(shù)組]" />

v-for 用于渲染列表數(shù)據(jù)（重復(fù)標(biāo)簽）。item 是數(shù)組索引，index 是數(shù)組項(xiàng)目的索引。

需要注意的是， v-for 定義在列表成員（item）上而非列表（list）上。

表達(dá)式 屬性中

<[標(biāo)簽類型] [Vue 指令]="JavaScript 表達(dá)式，變量均為 data 或 methods 的成員">

內(nèi)容中

<[標(biāo)簽類型]>
  {{[JavaScript 表達(dá)式，變量均為 data 或 methods 的成員]}}

參考資料

https://vuejs.org/v2/guide/

https://cn.vuejs.org/v2/guide/

云服務(wù)器 GPU云服務(wù)器年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié) 函數(shù)總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105857.html

相關(guān)文章

vue知識點(diǎn)總結(jié)

摘要：知識點(diǎn)的生命周期生命周期鉤子描述在實(shí)例初始化前，數(shù)據(jù)觀測和事件配置之前被調(diào)用實(shí)例被創(chuàng)建完成后調(diào)用。在這一步，實(shí)例已經(jīng)完成以下配置數(shù)據(jù)觀測，屬性和方法的運(yùn)算，事件的回調(diào)。 vue知識點(diǎn) 1.vue的生命周期生命周期鉤子描述 beforeCreate 在實(shí)例初始化前，數(shù)據(jù)觀測和event/watcher事件配置之前被調(diào)用 created 實(shí)例被創(chuàng)建完成后調(diào)用。在這一步，實(shí)...

mdluo 2019-08-26 14:04 評論0 收藏0
前端面試題總結(jié)——VUE（持續(xù)更新中）

摘要：前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個(gè)組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0
前端知識點(diǎn)總結(jié)——Angular

摘要：前端知識點(diǎn)總結(jié)一概述基于命令行的開發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語法元數(shù)據(jù)告訴如何處理一個(gè)類。前端知識點(diǎn)總結(jié)——Angular 一、Angular概述基于命令行的開發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 評論0 收藏0
vue 的一些不常用指令和方法的總結(jié)

摘要：生命周期鉤子文本通過使用指令，能夠執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會更新。只能對可信內(nèi)容使用插值，絕不要對用戶提供的內(nèi)容使用插值。理想的值是每項(xiàng)都有的且唯一的。生命周期鉤子 beforeCreate / createdbeforeMount / mountedbeforeUpdate / updatedbeforeDestroy / destroyed 文本通過使用 ...

timger 2019-08-26 11:52 評論0 收藏0
解決移動端一像素問題的Vue指令

摘要：所以是不能用正常的方法來讓安卓設(shè)備渲染一個(gè)物理像素的線。其他的指令自動處理。最近公司項(xiàng)目要解決一像素問題，自己琢磨了一陣子并且網(wǎng)上搜索了一堆博客，總結(jié)出最好的辦法應(yīng)該是通過css的transform scale縮放1px的內(nèi)容來模擬設(shè)備上1px的效果了。但是這個(gè)方法有太多局限。然后秉著css解決不了的問題就用js來解決的原則，然后結(jié)合vue的自定義指令，手?jǐn)]了一個(gè)一像素vue自定義指...

wing324 2019-08-30 15:55 評論0 收藏0
前端知識點(diǎn)總結(jié)——VUE（持續(xù)更新中）

摘要：前端知識點(diǎn)總結(jié)持續(xù)更新中框架和庫的區(qū)別框架有著自己的語法特點(diǎn)都有對應(yīng)的各個(gè)模塊庫專注于一點(diǎn)框架的好處提到代碼的質(zhì)量，開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個(gè)漸進(jìn)式的構(gòu)建前端知識點(diǎn)總結(jié)——VUE（持續(xù)更新中） 1.框架和庫的區(qū)別：框架：framework 有著自己的語法特點(diǎn)、都有對應(yīng)的各個(gè)模塊庫 library ...

big_cat 2019-08-22 14:50 評論0 收藏0