成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

002-讀書筆記-Vue官網(wǎng) 認識數(shù)據(jù)與指令

hqman / 2432人閱讀

摘要：首先把改成的形式這是一段測試文字綁定最后的顯示效果如下，如果要看具體的形式，可以在谷歌人員開發(fā)工具中自行查看指令的組成部分經(jīng)過上面的介紹，應(yīng)該對指令有一個大概的認識，下面就來對指令的每一項進行說明。

這篇筆記主要用來說明 Vue 中數(shù)據(jù)的定義和指令的一些特性，后續(xù)會做更深入的說明。

1.Vue中的data函數(shù) 1-1 使用data函數(shù)

由于使用的是單文件組件，因此 Vue 組件中的數(shù)據(jù)應(yīng)該是包含在 data 函數(shù)中的。

如果想正常綁定數(shù)據(jù)，那么在方法中就要返回一個對象：

    data() {
      return { // 通過return返回一個對象
        msg: "這是一段測試文字"
      }
    }

如果要把數(shù)據(jù)綁定到 DOM 中，可以使用 Vue 提供的數(shù)據(jù)雙向綁定：

這個時候，顯示的效果如下：

1-2 認識雙向綁定

Vue 中的數(shù)據(jù)是雙向綁定的，也就是說在 Vue 對象中修改數(shù)據(jù)，在 DOM 中會實時體現(xiàn)出來。下面來實際操作一下：

首先，打開谷歌人員開發(fā)工具，打開 Vue 選項卡，選中 ，會發(fā)現(xiàn)在 APP> 后面會出現(xiàn) == $vm0：

其次在控制臺中輸入下面的信息：

$vm0.$data.msg = "這是修改之后的內(nèi)容"

觀察 DOM，會發(fā)現(xiàn)顯示的內(nèi)容已經(jīng)修改了：

2.認識Vue指令 2-1 插入文本

在 Vue 中插入文本，可以使用兩種方式：

使用“Mustache”語法 (雙大括號)

使用 v-text 指令

第一種方式：

{{msg}}

第二種方式：

上面兩種插入文本實現(xiàn)的效果完全相同。但在實際開發(fā)中，使用的是第一種方式，因為這種方式更簡單。

2-2 在Vue中插入表達式

Vue 中不僅支持簡單的屬性鍵值，而且支持 JavaScript 表達式。

{{ msg + "123" }}


{{ msg ? "Yes" : "No" }}


{{ msg.split("").reverse().join("") }}

但是需要注意的是，Vue 不支持綁定語句。區(qū)分表達式和語句的區(qū)別，請參照JavaScript中:表達式和語句的區(qū)別。

2-3 插入原始的HTML

插入原始的 HTML，這個時候只能使用 v-html 指令來進行操作。

首先把msg改成HTML的形式：

    data() {
      return {
        msg: "這是一段測試文字"
      }
    }

綁定HTML：

最后的顯示效果如下，如果要看具體的 DOM 形式，可以在谷歌人員開發(fā)工具中自行查看：

2-4 指令的組成部分

經(jīng)過上面的介紹，應(yīng)該對指令有一個大概的認識，下面就來對指令的每一項進行說明。理解指令的每一項，對自定義指令有一定的幫助。

常規(guī)指令

常規(guī)指令是比較常見的，如上面使用的 v-text：

指令的參數(shù)

指令也可以通過自己的參數(shù)來進行傳值，使指令具有更多的可能性：

其中 v-bind 是一個指令，href 是一個參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

指令修飾符

指令的修飾符是對指令參數(shù)的進一步限定：

...

上面的代碼中，綁定了 submit 事件，通過修飾符 .prevent 告訴指令，如果觸發(fā)了 submit 事件，那么就調(diào)用 onSubmit 方法。

2-5 指令的縮寫

對于常用的指令，Vue 給出了其縮寫形式，這樣的指令只有兩個：

v-bind 縮寫成 :

v-on 縮寫成 @

下面挪用官方的案例說明：

v-bind 的縮寫：


...

...

v-on 的縮寫：


...

...
3.參考內(nèi)容

模板語法

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

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

相關(guān)文章

  • 005-讀書筆記-Vue官網(wǎng) 自定義指令

    摘要：自定義指令的使用在組件中定義一個自定義指令，作用將當前節(jié)點中字體顏色設(shè)置為紅色。參考內(nèi)容自定義指令 1.自定義指令的使用 在組件中定義一個自定義指令，作用：將當前DOM節(jié)點中字體顏色設(shè)置為紅色。 在自定義指令中簡化了鉤子函數(shù)，下面的鉤子函數(shù)相當于 bind 和 unbind 的縮寫： export default { name: app, directives: ...

    teren 評論0 收藏0

  • 007-讀書筆記-Vue官網(wǎng) 插件

    摘要：插件的定義與使用插件的定義需要注意的點定義一個對外公開的方法方法有兩個參數(shù)第一個參數(shù)的構(gòu)造器，第二個參數(shù)是一個可選的對象必須，插件對外公開的方法構(gòu)造器可選參數(shù)，是一個對象添加全局方法或?qū)傩蕴砑尤址椒ɑ驅(qū)傩蕴砑尤仲Y源指令過濾器過渡等添 1.插件的定義與使用 1-1 插件的定義 需要注意的點： 定義一個對外公開的install方法 install方法有兩個參數(shù)：第一個參數(shù)Vue的構(gòu)造...

    468122151 評論0 收藏0

  • 006-讀書筆記-Vue官網(wǎng) 混合

    摘要：混合中的鉤子函數(shù)同名鉤子函數(shù)都會執(zhí)行如果組件中存在鉤子函數(shù)，混合中也存在相同的鉤子函數(shù)，那么兩個鉤子函數(shù)都會執(zhí)行。最終的執(zhí)行結(jié)果多個混合的鉤子函數(shù)多個混合的鉤子函數(shù)，會根據(jù)混合使用的順序來執(zhí)行。 1.認識混合 混合(mixins)是一種分發(fā)Vue組件中可復(fù)用功能的非常靈活的方式 混合的作用：抽取多個組件的共同部分，增強組件的可復(fù)用性 混合的實質(zhì)：混合對象類似一個Vue實例，可以包含V...

    kk_miles 評論0 收藏0

  • 008-讀書筆記-Vue官網(wǎng) 過濾器

    摘要：如果要修改上面代碼中的過濾器，根據(jù)傳入的參數(shù)來分割字母，可以使用下面的方式修改。參數(shù)傳遞情況作為的參數(shù)的結(jié)果作為的參數(shù)的結(jié)果作為的參數(shù)參考內(nèi)容過濾器 1.認識過濾器 過濾器的作用：用于文本格式化，僅僅作為格式化操作，不做復(fù)雜的業(yè)務(wù)處理 過濾器的使用方式：通過管道符號(|)來使用 過濾器的使用位置：mustache插值和v-bind表達式 2.過濾器的簡單使用 2-1 使用過濾器 ...

    JaysonWang 評論0 收藏0

  • 004-讀書筆記-Vue官網(wǎng) Class與Style的綁定

    摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達式字符串對象或數(shù)組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達式、字符串、對象或數(shù)組。 1-1 搭建結(jié)構(gòu) 首先，新建一些 class 樣式： .colorRed { colo...

    hufeng 評論0 收藏0

發(fā)表評論

0條評論

hqman

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<