Vue入坑教程 二 Vue的資料和方法

2021-09-19 20:19:46 字數 1407 閱讀 5761

vue中的資料和標籤內容是雙向繫結的,也就是說當定義的方法(函式)裡的值改變時,在檢視標籤裡的顯示內容就會自動更新!這種技術大大簡化了我們的開發成本,縮減了複雜的邏輯設計。

vue中的資料是定義在vue物件中的,用data:宣告資料變數:

new

vue(,}

);

上述**中,定義了兩個變數,其中name初始化為 kdy、job初始化為 軟體工程師。

vue的資料定義後該如何使用?

vue的使用分為兩種情況:在檢視標籤中使用在定義的方法中使用

(1)在檢視標籤中使用

在定義的標籤中使用時,只需要在雙大花括號中寫入定義的變數就可以繫結資料。

例如使用我上面定義的name時,只需要:

name:

}<

/p>

此時,頁面就會顯示:

(2)在定義的方法中使用

在定義的方法中引用變數時,需要在變數前加that.例如:

methods:

}

此時,頁面顯示效果為:

當然,你可能疑問,標籤中是怎麼呼叫方法的,別急,往下看?

當檢視標籤中的資料需要動態改變時,就需要用到方法來從後台獲取或者處理資料。

methods:

}

可以看到,在上面的方法中,使用this.name來呼叫前面定義的變數,該方法還定義了乙個形參time用來接收呼叫方法時傳進來的引數。

在標籤中使用時,只需要在雙大花括號中寫入定義的方法名就可以繫結該方法:

}<

/h1>

可以看到,上述呼叫方法時,向方法中傳入了乙個值afternoon,顯示效果為:

vue 入坑指南 一 vue 基礎語法

1.模板語法 1.1 mustache語法 在html獲取data中msg變數的值1.2 html賦值 v html 將內容當成html標籤輸出 html 類似1.3繫結屬性 v bind id 新增繫結乙個標籤的屬性 attr 類似1.4 表示式 三目運算表示式1.5 文字賦值 v text 和 ...

vue安裝教程(遇到的坑詳解)

1.安裝node.js 菜鳥教程 node官網 2.基於node.js,利用 npm映象安裝相關依賴 在cmd裡直接輸入 npm install g cnpm registry 回車,等待安裝.windows使用管理員身份進行安裝,若安裝不了,可先輸入 npm install再輸入 npm inst...

Vue框架Element UI教程(二)

原文 時間選擇器 element ui手冊 中文文件 前一篇已經安裝好了element ui環境,現在開始來實際操作框架提供的一些元件的運用了。在準備好以下文章裡面的內容之後,可以開啟test.vue檔案,開始寫 了。vue框架element ui教程 安裝環境搭建 一 開啟test.vue檔案,開...