- ArthurSlog
- SLog-18
- Year·1
- Guangzhou·China
- July 19th 2018
为什么要在一线城市,因为一切的舒适终将会被打破,因为新一代的人最不怕的就是学习和接受新的事物,旧的事物将会成为历史,也必将被新的所取代
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源:
- 本文的所有
- vue.js 的,当前(2018/7/17)一共有 13 个,分别是:
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-pre
- v-cload
- v-once
- vue.js 的模版指令,与编程语言的 “关键字” 或者 “保留字” 有点相似,例如 if(判断语句关键字)、for(循环语句关键字)
开始编码
- 首先,搭起静态服务器,先切换至桌面路径
cd ~/Desktop
- 创建一个文件夹node_vue_directive_learningload
mkdir node_vue_directive_learningload
- 切换路径到新建的文件夹下
cd node_vue_directive_learningload
- 使用npm初始化node环境,一路enter键完成初始化
npm init
- 使用npm安装koa和koa-static
sudo npm install koa koa-static
- 参考,我们在当前路径下编写index.js和index.html两份文件
index.js
const serve = require('koa-static');const Koa = require('koa');const app = new Koa();// $ GET /package.jsonapp.use(serve('.'));app.listen(3000);console.log('listening on port 3000');
index.html
ArthurSlog The static web server by ArthurSlog
- 接下来,我们来根据使用场景,来编写 vue.js 模版指令代码
v-on.html
ArthurSlog The button above has been clicked {
{ counter }} times.
- 现在你可以打开浏览器,在地址栏输入 127.0.0.1:3000/v-on.html,你会看到,按钮“Add 1”,和文本 “The button above has been clicked 0 times.”:
Add 1The button above has been clicked 0 times.
- 当你点击按钮的时候,每点击以下,文本的 “0 time” 的 “0” 值就会增加1
- 在这里,我们创建了一个对象 “counter”,给了初始值为 “0”,可以看到 v-on 指令与 “click” 按钮的点击事件,注意这里是“按钮”的“事件”,而 “counter + 1” 被当作了javascript解析执行了!所以,每点击一次,就触发一次 “click” 事件,就会执行一次 “counter + 1”,所以 文本 “The button above has been clicked { { counter }} times.” 里的 “{ { counter }}” 的值页跟着发生改变
- 至此,我们把 vue模版指令 v-on 介绍了一遍,更多使用方法和信息,请参考 。
欢迎关注我的微信公众号 ArthurSlog