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檔案,開...