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

時間 2020-02-07

標籤 slog10 slog 支配 vue 框架模版語法 bind 简体版

原文原文鏈接

ArthurSlog
SLog-10
Year·1
Guangzhou·China
July 15th 2018

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

開發環境MacOS(High Sierra 10.13.5)

課前預習

本篇是《支配vue框架系列》的第二篇
這裏提醒一下你們，請必定要參考官方文檔，官方的母語版本！！！看中文翻譯容易被誤導，爲何呢？人的水平良莠不齊，好比 attributes 這個單詞，有的翻譯成屬性？有的翻譯成特性？人爲的製造混亂。因此堅定堅持，只看原版的官方文檔！除非做者就是中文的你們！
時間是有限的，技術更新是快速的，請邁開腳步一昧的等待，等來的是被淘汰
上一篇，講到了 v-html，vue的模版語法，用來幹什麼的？就是讓他 vue 實例的數據能夠和 DOM(Document Object Model) 進行數據綁定。什麼是 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「指代的範圍就比較廣了，更多信息請參考w3cschool

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

<body id="b1"></body> //這裏 id 就是 <body> 的 attributes

<div> Hello ArthurSlog</div>  //這裏 "Hello ArthurSlog" 就是 <div> 的 values，String格式的值

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

Attribute| Belongs to| Descriptionhtml

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

Attribute| Descriptionjava

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)node

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

In other words: The "HTML DOM" is a standard for how to get, change, add, or delete HTML elements.

學會用英文去理解，觸碰最本質的信息

須要的信息和信息源：

開始編碼：

切換至桌面路徑

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.htmlgit

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>ArthurSlog</title>
    </head>
    <body>
        <div id="app">
        <button v-bind:disabled="Output">Hello ArthurSlog</button>
        </div>

        <script>
        new Vue({
            el: '#app',
            data: {
                Output: true
            }
        })
        </script>
    </body>
</html>

index.jsgithub

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');

如今，切換至 ~/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.htmlweb

<body>
    <div id="app">
    <button v-bind:disabled="Output">Hello ArthurSlog</button>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
            Output: true
        }
    })
    </script>
</body>

關鍵點在：

index.htmlnpm

<button v-bind:disabled="Output">Hello ArthurSlog</button>

<script>
new Vue({
    el: '#app',
    data: {
        Output: true
    }
})
</script>

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

index.htmljson

<button v-bind:disabled="Output">Hello ArthurSlog</button>

這下咱們能夠經過 javascript，控制「Output」的值，進而控制 button 的 Attributes--「disabled」，「disabled」的值，進而影響了 button 是否接受點擊

index.html

<script>
new Vue({
    el: '#app',
    data: {
        Output: true
    }
})
</script>

關鍵的地方在於，在 HTML 中，elements（元素，指<button>，<textarea>，<input> 等等）的 Attribute，具體參考HTML Attribute Reference
如今，把 script 裏，"Output" 的值改成 false：

index.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>ArthurSlog</title>
    </head>
    <body>
        <div id="app">
        <button v-bind:disabled="Output">Hello ArthurSlog</button>
        </div>

        <script>
        new Vue({
            el: '#app',
            data: {
                Output: false
            }
        })
        </script>
    </body>
</html>