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

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

微信扫描二维码，关注我的公众号

公平是弱者的安慰剂竞争是强者的试金石

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

本文的所有源码地址
vue.js 的模版指令（directive），当前（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

参考Koa-static说明手册，我们在当前路径下编写index.js和index.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');
复制代码

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ArthurSlog</title>
</head><body><h1>The static web server by ArthurSlog</h1></body></html>
复制代码

接下来，我们来根据使用场景，来编写 vue.js 模版指令代码

v-cloak.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"><div v-cloak>{{ msg }}</div></div><br><button onclick="loadmsg()">Load msg</button><script>function loadmsg () {new Vue({el: '#app',data: {msg: 'Hello ArthurSlog'}})}</script><style>[v-cloak]{ display:none; }</style></body>
</html>
复制代码

打开浏览器，地址栏输入 127.0.0.1:3000/v-cloak.html，文本 “Hello ArthurSlog” 没有显示，只有显示一个按钮 “load msg”，按钮的 “click” 事件和 "loadmsg()" 方法相关联，而 “loadmsg()” 方法里包含了 “vue对象的实例化”，

function loadmsg () {new Vue({el: '#app',data: {msg: 'Hello ArthurSlog'}})
}
复制代码

另一方面，在样式文件里，添加了：

[v-cloak]{ display:none; }
复制代码

现在点击按钮，文本 “Hello ArthurSlog” 显示出来，此时按钮 “load msg” 响应了 “click” 事件，“click” 事件调用了 “loadmsg()” 方法，“loadmsg” 方法执行了 “vue对象的实例化”，关键点在于：v-cloak 指令让指定的元素和元素的子元素在“vue对象的实例化” 之前处于隐藏状态，当 “vue对象的实例化” 完成后，才会显示出来
至此，我们把 vue模版指令 v-cloak 介绍了一遍，更多使用方法和信息，请参考 vue官方手册。

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

微信扫描二维码，关注我的公众号

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

谢谢

支配vue框架模版语法之v-cloak相关推荐

Slog21_支配vue框架模版语法之v-pre
ArthurSlog SLog-21 Year·1 Guangzhou·China July 21th 2018 GitHub 掘金主页简书主页 segmentfault 既然选择了浩瀚大海那就注 ...
Slog15_支配vue框架模版语法之v-else
ArthurSlog SLog-15 Year·1 Guangzhou·China July 18th 2018 GitHub 掘金主页简书主页 segmentfault 站在时代的十字路口成功者 ...
支配vue框架模版语法之v-once
ArthurSlog SLog-23 Year·1 Guangzhou·China July 22th 2018 你所希望的犹如钻石存于人间你所厌恶的犹如空气充斥天地开发环境MacOS(Hig ...
Slog29_支配vue框架初阶项目之博客网站-注册页面-单选按钮
ArthurSlog SLog-29 Year·1 Guangzhou·China Aug 3th 2018 GitHub 掘金主页简书主页 segmentfault 大学毕业交了几万块钱的学费 ...
Vue基础—模版语法指令精细版
本资源由 itjc8.com 收集 day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便 ...
Slog42_支配vue框架初阶项目之博客网站-单页-默认头像的布局和定位
ArthurSlog SLog-42 Year·1 Guangzhou·China Aug 19th 2018 GitHub 掘金主页简书主页 segmentfault 从业之路不同机缘也不同人 ...
Slog41_支配vue框架初阶项目之博客网站-单页-登陆成功页面的布局和定位
ArthurSlog SLog-41 Year·1 Guangzhou·China Aug 18th 2018 GitHub 掘金主页简书主页 segmentfault 履霜坚冰至开发环境MacO ...
vue框架如何转换成普通html,html和vue框架
Vue框架Element的事件传递broadcast和dispatch方法分析前言最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法 ...
Vue框架的初识入门
一,什么是Vue框架 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

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

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

开始编码

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

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

谢谢

支配vue框架模版语法之v-cloak相关推荐

最新文章

热门文章

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

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

开始编码

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

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

谢谢

支配vue框架模版语法之v-cloak相关推荐

最新文章

热门文章

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