国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Slog10_支配vue框架之模版語(yǔ)法 v-bind

DangoSky / 3006人閱讀

摘要：所以堅(jiān)決堅(jiān)持，只看原版的官方文檔除非作者就是中文的大家時(shí)間是有限的，技術(shù)更新是快速的，請(qǐng)邁開(kāi)腳步一昧的等待，等來(lái)的是被淘汰上一篇，講到了，的模版語(yǔ)法，用來(lái)干什么的就是讓他實(shí)例的數(shù)據(jù)可以和進(jìn)行數(shù)據(jù)綁定。

ArthurSlog

SLog-10

Year·1

Guangzhou·China

July 15th 2018

GitHub

掘金主頁(yè)

簡(jiǎn)書(shū)主頁(yè)

segmentfault

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

開(kāi)發(fā)環(huán)境MacOS(High Sierra 10.13.5) 課前預(yù)習(xí)

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

這里提醒一下大家，請(qǐng)一定要參考官方文檔，官方的母語(yǔ)版本！！！看中文翻譯容易被誤導(dǎo)，為什么呢？人的水平參差不齊，比如 attributes 這個(gè)單詞，有的翻譯成屬性？有的翻譯成特性？人為的制造混亂。所以堅(jiān)決堅(jiān)持，只看原版的官方文檔！除非作者就是中文的大家！

時(shí)間是有限的，技術(shù)更新是快速的，請(qǐng)邁開(kāi)腳步 一昧的等待，等來(lái)的是被淘汰

上一篇，講到了 v-html，vue的模版語(yǔ)法，用來(lái)干什么的？就是讓他 vue 實(shí)例的數(shù)據(jù)可以和 DOM(Document Object Model) 進(jìn)行數(shù)據(jù)綁定。什么是 DOM ？在比較靠譜的w3cschool里，是這么解釋 DOM 的:

“HTML DOM” is a standard. 

With the "HTML DOM", JavaScript can access and change all the elements of an HTML document.
本篇講的是 “HTML DOM”， 而 ”DOM“ 指代的范圍就比較廣了，更多信息請(qǐng)參考w3cschool

上面簡(jiǎn)單扼要的說(shuō)了 ”HTML DOM“ 能做什么：有了 ”HTML DOM“， javascript 可以訪問(wèn)和改變 HTML文件 的 elements(elements指的就是 對(duì)象) ，當(dāng)然了，對(duì)象就會(huì)有 attributes 和 values 等，舉個(gè)栗子：

 //這里 id 就是  的 attributes


 Hello ArthurSlog
  //這里 "Hello ArthurSlog" 就是 
 的 values，String格式的值

還要注意的地方是，“HTML DOM” 里的 elements 的值是我們可以控制的，這也就是 javascript 和 vue（vue也是javacript）的本職工作！而 attributes 是標(biāo)準(zhǔn)，是要查詢標(biāo)準(zhǔn)文檔的，HTML Attributes 與 elements相關(guān)聯(lián)，舉個(gè)栗子：

Attribute| Belongs to| Description

accept| | Specifies the types of files that the server accepts (only for type="file")
accept-charset|

| Specifies the character encodings that are to be used for the form submission
...| ...| ...

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

Attribute| Description

accesskey| Specifies a shortcut key to activate/focus an element
class| Specifies one or more classnames for an element (refers to a class in a style sheet)

小結(jié)一下：”HTML DOM“ 如下所說(shuō)的：

In other words: The "HTML DOM" is a standard for how to get, change, add, or delete HTML elements.
學(xué)會(huì)用英文去理解，觸碰最本質(zhì)的信息
需要的信息和信息源：

vue框架模版語(yǔ)法(Template Syntax)

vue.js API(https://vuejs.org/v2/api/inde...

W3CSchool HTML DOM手冊(cè)

W3CSchool HTML Attributes Reference手冊(cè)

W3CSchool HTML Tags

Koa官方手冊(cè)

Koa-static

開(kāi)始編碼：

切換至桌面路徑

cd ~/Desktop

創(chuàng)建一個(gè)新文件夾

mkdir node_vue_TemplateSyntax_v-bind_learningload

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

cd node_vue_TemplateSyntax_v-bind_learningload

使用npm指令初始化nodejs項(xiàng)目環(huán)境，一路回車，完成初始化

npm init

安裝 koa 和 kao-static

sudo npm install koa koa-static

需要管理員權(quán)限，輸入密碼

在當(dāng)前路徑下創(chuàng)建 index.js 和 index.html 這兩個(gè)文件，其中 index.js 實(shí)現(xiàn)了一個(gè)靜態(tài)web服務(wù)器：

index.html



    
    
    
    
    ArthurSlog

index.js

const serve = require("koa-static");
const Koa = require("koa");
const app = new Koa();

// $ GET /package.json
app.use(serve("."));

app.listen(3000);

console.log("listening on port 3000");

現(xiàn)在，切換至 ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload 路徑下

cd ~/Desktop/node_vue_TemplateSyntax_v-bind_learningload

啟動(dòng)靜態(tài)web服務(wù)器

node index.js

打開(kāi)瀏覽器，地址欄輸入 127.0.0.1:3000， 回車，正常執(zhí)行會(huì)出來(lái)一個(gè)button，但是這個(gè)button無(wú)法接受點(diǎn)擊

因?yàn)椋?index.html 里我們使用 vue.js模版語(yǔ)法，其中用到了 v-bind：

index.html

關(guān)鍵點(diǎn)在：

index.html

看到 button 的 Attributes--“disabled”，“disabled” 與 “Output” 相關(guān)聯(lián)了

index.html

這下我們可以通過(guò) javascript，控制 “Output” 的值，進(jìn)而控制 button 的 Attributes--“disabled”，“disabled” 的值，進(jìn)而影響了 button 是否接受點(diǎn)擊

index.html

關(guān)鍵的地方在于，在 HTML 中，elements（元素，指