资讯专栏INFORMATION COLUMN

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

DangoSky / 2944人阅读

摘要:所以坚决坚持,只看原版的官方文档除非作者就是中文的大家时间是有限的,技术更新是快速的,请迈开脚步一昧的等待,等来的是被淘汰上一篇,讲到了,的模版语法,用来干什么的就是让他实例的数据可以和进行数据绑定。

ArthurSlog

SLog-10

Year·1

Guangzhou·China

July 15th 2018

GitHub

掘金主页

简书主页

segmentfault

生活在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 等,举个栗子:

 //这里 id 就是  的 attributes

Hello ArthurSlog
//这里 "Hello ArthurSlog" 就是
的 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/inde...

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



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

现在,切换至 ~/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(元素,指