• ArthurSlog
• SLog-21
• Year·1
• Guangzhou·China
• July 21th 2018

• GitHub
• 掘金主页
• 简书主页
• segmentfault

既然选择了浩瀚大海 那就注定要迎接风浪 既然选择了灿烂星辰 那就注定要拥抱深空

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源&＃xff1a;

• 本文的所有源码地址
• vue.js 的模版指令&＃xff08;directive&＃xff09;&＃xff0c;当前&＃xff08;2018/7/17&＃xff09;一共有 13 个&＃xff0c;分别是&＃xff1a;

1. v-text
2. v-html
3. v-show
4. v-if
5. v-else
6. v-else-if
7. v-for
8. v-on
9. v-bind
10. v-model
11. v-pre
12. v-cload
13. v-once

• vue.js 的模版指令&＃xff0c;与编程语言的 “关键字” 或者 “保留字” 有点相似&＃xff0c;例如 if&＃xff08;判断语句关键字&＃xff09;、for&＃xff08;循环语句关键字&＃xff09;

开始编码

• 首先&＃xff0c;搭起静态服务器&＃xff0c;先切换至桌面路径

cd ~/Desktop

• 创建一个文件夹node_vue_directive_learningload

mkdir node_vue_directive_learningload

• 切换路径到新建的文件夹下

cd node_vue_directive_learningload

• 使用npm初始化node环境&＃xff0c;一路enter键完成初始化

npm init

• 使用npm安装koa和koa-static

sudo npm install koa koa-static

• 参考Koa-static说明手册&＃xff0c;我们在当前路径下编写index.js和index.html两份文件

index.js

const serve &＃61; require(&＃39;koa-static&＃39;);
const Koa &＃61; require(&＃39;koa&＃39;);
const app &＃61; new Koa();// $ GET /package.json
app.use(serve(&＃39;.&＃39;));app.listen(3000);console.log(&＃39;listening on port 3000&＃39;);

index.html

The static web server by ArthurSlog

• 接下来&＃xff0c;我们来根据使用场景&＃xff0c;来编写 vue.js 模版指令代码

v-pre.html

• 打开浏览器&＃xff0c;地址栏输入 127.0.0.1:3000/v-pre.html&＃xff0c;显示

{{msg}}

• v-pre 指令会跳过此元素及其所有子元素的编译&＃xff0c;把标签里的数据都按普通文本解析
• 至此&＃xff0c;我们把 vue模版指令 v-pre 介绍了一遍&＃xff0c;更多使用方法和信息&＃xff0c;请参考 vue官方手册。

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

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

谢谢