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

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

关注微信公众号“ArthurSlog”

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

开发环境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指的就是 \ \ 对象) ，当然了，对象就会有 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	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（可以直接访问到的 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)

* 小结一下：”HTML DOM“ 如下所说的：

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

学会用英文去理解，触碰最本质的信息

需要的信息和信息源：

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

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

现在，切换至 ~/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

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

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

关键点在：

index.html

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

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

看到 button 的 Attributes–“disabled”，“disabled” 与 “Output” 相关联了

index.html

<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（元素，指\，\，\ 等等）的 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>

现在，切换至 ~/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文档。

欢迎关注我的微信公众号 ArthurSlog

ArthurSlog

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

开发环境MacOS(High Sierra 10.13.5)

课前预习

本篇讲的是 “HTML DOM”，而 ”DOM“ 指代的范围就比较广了，更多信息请参考w3cschool

学会用英文去理解，触碰最本质的信息

需要的信息和信息源：

开始编码：

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章欢迎点赞留言

谢谢

猜你喜欢

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

开发环境MacOS(High Sierra 10.13.5)

课前预习

本篇讲的是 “HTML DOM”， 而 ”DOM“ 指代的范围就比较广了，更多信息请参考w3cschool

学会用英文去理解，触碰最本质的信息

需要的信息和信息源：

开始编码：

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

猜你喜欢

本篇讲的是 “HTML DOM”，而 ”DOM“ 指代的范围就比较广了，更多信息请参考w3cschool

如果你喜欢我的文章欢迎点赞留言