002-讀書筆記-Vue官網認識數據與指令

hqman 發布于2019-08-21 17:15 / 2416人閱讀

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

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

1.Vue中的data函數 1-1 使用data函數

由于使用的是單文件組件，因此 Vue 組件中的數據應該是包含在 data 函數中的。

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

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

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

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

1-2 認識雙向綁定

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

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

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

$vm0.$data.msg = "這是修改之后的內容"

觀察 DOM，會發現顯示的內容已經修改了：

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

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

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

使用 v-text 指令

第一種方式：

{{msg}}

第二種方式：

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

2-2 在Vue中插入表達式

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

{{ msg + "123" }}
{{ msg ? "Yes" : "No" }}
{{ msg.split("").reverse().join("") }}

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

2-3 插入原始的HTML

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

首先把msg改成HTML的形式：

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

綁定HTML：

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

2-4 指令的組成部分

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

常規指令

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

指令的參數

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

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

指令修飾符

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

...

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

2-5 指令的縮寫

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

v-bind 縮寫成 :

v-on 縮寫成 @

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

v-bind 的縮寫：


...

...

v-on 的縮寫：


...

...

3.參考內容

模板語法

GPU云服務器云服務器大數據時代讀書筆記讀書筆記編程思想讀書筆記 vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89316.html

005-讀書筆記-Vue官網自定義指令

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

teren 2019-08-22 11:13 評論0 收藏0
007-讀書筆記-Vue官網插件

摘要：插件的定義與使用插件的定義需要注意的點定義一個對外公開的方法方法有兩個參數第一個參數的構造器，第二個參數是一個可選的對象必須，插件對外公開的方法構造器可選參數，是一個對象添加全局方法或屬性添加全局方法或屬性添加全局資源指令過濾器過渡等添 1.插件的定義與使用 1-1 插件的定義需要注意的點：定義一個對外公開的install方法 install方法有兩個參數：第一個參數Vue的構造...

468122151 2019-08-22 11:13 評論0 收藏0
006-讀書筆記-Vue官網混合

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

kk_miles 2019-08-22 11:13 評論0 收藏0
008-讀書筆記-Vue官網過濾器

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

JaysonWang 2019-08-21 17:21 評論0 收藏0
004-讀書筆記-Vue官網 Class與Style的綁定

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

hufeng 2019-08-21 17:16 評論0 收藏0