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>

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

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

开发环境MacOS(High Sierra 10.13.5)

课前预习

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

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

须要的信息和信息源：

开始编码：

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章欢迎点赞留言

谢谢

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

开发环境MacOS(High Sierra 10.13.5)

课前预习

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

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

须要的信息和信息源：

开始编码：

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章 欢迎点赞 留言

谢谢

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

若是你喜欢个人文章欢迎点赞留言