支配vue框架之模版語法 v-bind

ArthurSlog

SLog-10

Year·1

Guangzhou·China

July 15th 2018

生活在99%以上的信息不是真實的世界 生活中99%以上的信息指向了剩下的信息不是真實的

開發環境MacOS(High Sierra 10.13.5)

課前預習

本篇是 《支配vue框架系列》的第二篇

這裡提醒一下大家，請一定要參考官方文檔，官方的母語版本！！！看中文翻譯容易被誤導，為什麼呢？人的水平參差不齊，比如 attributes 這個單詞，有的翻譯成屬性？有的翻譯成特性？人為的製造混亂。所以堅決堅持，只看原版的官方文檔！除非作者就是中文的大家！

時間是有限的，技術更新是快速的，請邁開腳步 一昧的等待，等來的是被淘汰

上一篇，講到了 v-html，vue的模版語法，用來幹什麼的？就是讓他 vue 實例的數據可以和 DOM(Document Object Model) 進行數據綁定。什麼是 DOM ？在比較靠譜的w3cschool里，是這麼解釋 DOM 的:

本篇講的是 「HTML DOM」， 而 」DOM「 指代的範圍就比較廣了，更多信息請參考w3cschool

上面簡單扼要的說了 」HTML DOM「 能做什麼：有了 」HTML DOM「， javascript 可以訪問和改變 HTML文件 的 elements(elements指的就是 對象) ，當然了，對象就會有 attributes 和 values 等，舉個栗子：

還要注意的地方是，「HTML DOM」 里的 elements 的值是我們可以控制的，這也就是 javascript 和 vue（vue也是javacript）的本職工作！而 attributes 是標準，是要查詢標準文檔的，HTML Attributes 與 elements相關聯，舉個栗子：

其中，包含有 全局的Attribute（可以直接訪問到的 Attribute）:

小結一下：」HTML DOM「 如下所說的：

學會用英文去理解，觸碰最本質的信息需要的信息和信息源：

vue框架模版語法(Template Syntax)

vue.js API(https://vuejs.org/v2/api/index.html)

W3CSchool HTML DOM手冊

W3CSchool HTML Attributes Reference手冊

W3CSchool HTML Tags

Koa官方手冊

Koa-static

開始編碼：

切換至桌面路徑

cd ~/Desktop

創建一個新文件夾

mkdir node_vue_TemplateSyntax_v-bind_learningload

切換至新建的文件夾路徑下

cd node_vue_TemplateSyntax_v-bind_learningload

使用npm指令初始化nodejs項目環境，一路回車，完成初始化

npm init

安裝 koa 和 kao-static

sudo npm install koa koa-static

需要管理員許可權，輸入密碼

在當前路徑下創建 index.js 和 index.html 這兩個文件，其中 index.js 實現了一個靜態web伺服器：

index.html

index.js

現在，切換至 ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload 路徑下

cd ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload

啟動靜態web伺服器

node index.js

打開瀏覽器，地址欄輸入 127.0.0.1:3000， 回車，正常執行會出來一個button，但是這個button無法接受點擊

因為，在 index.html 里我們使用 vue.js模版語法，其中用到了 v-bind：

index.html

關鍵點在：

index.html

看到 button 的 Attributes—「disabled」，「disabled」 與 「Output」 相關聯了

index.html

這下我們可以通過 javascript，控制 「Output」 的值，進而控制 button 的 Attributes—「disabled」，「disabled」 的值，進而影響了 button 是否接受點擊

index.html

關鍵的地方在於，在 HTML 中，elements（元素，指，， 等等）的 Attribute，具體參考HTML Attribute Reference

現在，把 script 里，」Output」 的值改為 false：

index.html

現在，切換至 ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload 路徑下

cd ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload

啟動靜態web伺服器

node index.js

打開瀏覽器，地址欄輸入 127.0.0.1:3000， 回車，正常執行會出來一個button，但是這個button已經可以接受點擊了

至此，我們了解了 vue框架 的模版語法中 v-bind 指令的使用，v-bind的其他用法參考 vue官方API文檔。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！