v-text、v-html、v-cloak、v-pre.md
本篇文章,我们简单的介绍几个Vue
内置指令的实现。
v-text
v-text
的用法很简单,以下两个表达式的作用相同。
<span v-text="msg"></span>
<span>{{msg}}</span>
和所有普通指令一样,在生成ast
时,v-text
会被解析到el.directives
中。
但在生成render
函数的过程中,在解析属性时,
我们会首先解析指令。genDirectives
方法中有如下一段代码:
const gen: DirectiveFunction = platformDirectives[dir.name] || baseDirectives[dir.name]
if (gen) {
// compile-time directive that manipulates AST.
// returns true if it also needs a runtime counterpart.
needRuntime = !!gen(el, dir, warn)
}
if (needRuntime) {
hasRuntime = true
res += `...`
}
directives概述中我们也提到过,platformDirectives
和baseDirectives
会对部分内置指令进行处理。v-text
就是其中之一。
最终的gen
函数如下所示:
export default function text (el: ASTElement, dir: ASTDirective) {
if (dir.value) {
addProp(el, 'textContent', `_s(${dir.value})`)
}
}
该函数返回的是undefined
,所以needRuntime
最终是false
,所以该结果不会添加到res
上。
addProp
的定义如下:
export function addProp (el: ASTElement, name: string, value: string) {
(el.props || (el.props = [])).push({ name, value })
}
它会给el.props
数组中添加一个对象,对象里保存的name
和value
。
// DOM props
if (el.props) {
data += `domProps:{${genProps(el.props)}},`
}
最终,会添加到domProps
对应的数组中。上面例子中的span
,最终生成的render
函数如下:
_c('span',{domProps:{"textContent":_s(msg)}})
在patch
过程中的处理,和其他data
中的数据一样,是通过钩子函数处理的。
function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
if (!oldVnode.data.domProps && !vnode.data.domProps) {
return
}
let key, cur
const elm: any = vnode.elm
const oldProps = oldVnode.data.domProps || {}
let props = vnode.data.domProps || {}
// clone observed objects, as the user probably wants to mutate it
if (props.__ob__) {
props = vnode.data.domProps = extend({}, props)
} for (key in oldProps) {
if (props[key] == null) {
elm[key] = ''
}
}
for (key in props) {
cur = props[key]
if (key === 'textContent' || key === 'innerHTML') {
if (vnode.children) vnode.children.length = 0
if (cur === oldProps[key]) continue
} if (key === 'value') {
// store value as _value as well since
// non-string values will be stringified
elm._value = cur
// avoid resetting cursor position when value is the same
const strCur = cur == null ? '' : String(cur)
if (shouldUpdateValue(elm, vnode, strCur)) {
elm.value = strCur
}
} else {
elm[key] = cur
}
}
}
首先会重置oldProps
中props
上不存在的属性。然后遍历props
中的属性,如果key
值textContent
或innerHTML
,则清除children
的内容。
如果key === 'value'
这里应该对input
、select
等标签的特殊处理。否则,直接设置elm.textContent = cur
,以此来改变文本内容。
v-html
v-html
和v-text
的用法和处理流程基本完全一样,唯一的区别就是最终v-html
设置的elm.innerHTML = cur
。
用法示例如下:
<span v-html="msg"></span>
v-cloak
这个指令用的比较少,不懂的人看完官方文档的说明可能还是稀里糊涂的。它的ast
生成和上面讲的普通指令一样,在genDirectives
时,baseDirectives
中包含了cloak
,但最终返回的gen
是一个空函数。最终它也不会添加到directives
数组中,之后也就没有了对它的处理。
因为我们的模板再编译的过程中,页面中是会显示Mustache
标签的。该指令就是在模板编译之后,被删除。我们可以添加[v-cloak] { display: none }
,来防止用户感知到Mustache
标签 出现。
v-pre
v-pre
表示该会跳过该标签及其子元素的编译。
在编译模板时的start
回调函数中,有如下片段:
if (!inVPre) {
processPre(element)
if (element.pre) {
inVPre = true
}
}
if (inVPre) {
processRawAttrs(element)
} else {
...
}
processPre
函数会获取element
上的v-pre
属性,如果有则设置element.pre = true
,同时设置inVPre = true
。
接下来的处理,会走进processRawAttrs
函数。else
块内对各种指令、属性等的处理,都不会执行。
function processRawAttrs (el) {
const l = el.attrsList.length
if (l) {
const attrs = el.attrs = new Array(l)
for (let i = 0; i < l; i++) {
attrs[i] = {
name: el.attrsList[i].name,
value: JSON.stringify(el.attrsList[i].value)
}
}
} else if (!el.pre) {
// non root node in pre blocks with no attributes
el.plain = true
}
}
这里是对属性的处理,如果el.attrsList
不为空数组,则直接循环el.attrsList
上的属性添加到el.attrs
上。否则,如果当前元素没有设置v-pre
指令(是设置v-pre
元素的子元素),则设置el.plain = true
。
因为我们不编译的是整个子树,而不是单个元素。Vue
中就是通过inVPre
来标示的,我们parse
的整个过程就是入栈出栈,当子元素都编译完,会走到当前元素的end
处理,此时再设置inVPre = false
,来结束不编译的内容。
v-text、v-html、v-cloak、v-pre.md的更多相关文章
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
- CF E. Vasya and a Tree】 dfs+树状数组(给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值)
题意: 给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值 ...
- 【工具篇】Sublime Text 2/3 安装汉化破解、插件包安装教程详解
Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...
- Corporative Network (有n个节点,然后执行I u,v(把u的父节点设为v)和E u(询问u到根节点的距离))并查集
A very big corporation is developing its corporative network. In the beginning each of the N enterpr ...
- 运维ps语法---》ps、pstree、top、htop、nice、renice、kill、ulimit、w 和 who 和 whoami、pgrep、fg 和 bg、ipcs
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- Android 获得本地IP地址、外网IP地址、本设备网络状态信息、本地Mac地址
本地内网IP和外网IP的区别: 根据我的经验一台电脑需要两个ip才可以上网,一个是本地的内网ip 一个是外网的ip 本地的ip 一般是192.168.1.2这种样子 只要在不同的路由器上可以重复 外 ...
- OSPF的特征、术语、包类型、邻居关系的建立、RID的选择、DR和BDR的选举、度量值的计算、默认路由、验证
链路状态路由协议OSPF的特征.术语.包类型.邻居关系的建立.RID的选择.DR和BDR的选举.度量值的计算.默认路由.验证等. 文章目录 [*1*].链路状态路由协议概述 工作过程 优缺点 [*2* ...
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇
一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
- Hive 文件格式 & Hive操作(外部表、内部表、区、桶、视图、索引、join用法、内置操作符与函数、复合类型、用户自定义函数UDF、查询优化和权限控制)
本博文的主要内容如下: Hive文件存储格式 Hive 操作之表操作:创建外.内部表 Hive操作之表操作:表查询 Hive操作之表操作:数据加载 Hive操作之表操作:插入单表.插入多表 Hive语 ...
- 鸟哥的linux私房菜 - 第5/6/7/9章(在线求助 man page、Linux档案权限与目录配置、Linux档案与目录管理、压缩与打包)
第五章.在线求助 man page X window与文本模式的切换 Ctrl+Alt+F1~F6:文字接口登入tty1~tty6终端机: Ctrl+Alt+F7:图形接口桌面. 注销当前用户:exi ...
随机推荐
- C++ 在容器A中查找最后出现的容器B中的元素,并返回iterator(find_end)
#include <iostream> // cout #include <algorithm> // find_end #include <vector> // ...
- BIOS和CMOS【转载】
在我们的电脑中,都有一块黑色的小芯片.但是请千万不要小看它,如果它损坏或者数据错误乱套的话,恭喜,如果不会“救回”这个小芯片,那么这台电脑可以挂闲鱼卖零件了……这个小芯片是什么呢?对,它就是BIOS芯 ...
- 对不队——Alpha冲刺
第五天 日期:2018/6/20 一. 今日完成任务:专家审稿逻辑的开发 冯晓.马思远:会议网站栏目管理开发,软件功能测试 王爽.彭辉:审稿管理员分稿和稿件查找功能开发,博客撰写 吴琼.郝延婷:更换 ...
- grafana 批量添加图表
利用grafana做监控展示特别方便,而且界面还很有科技感,一般的使用都是自己手动添加图表,或者使用别人提供好的模板. 在一种情况下就比较尴尬了,我有100个实例的内存数据想展示,如果都放在一个tab ...
- Codeforces 912E - Prime Gift
912E - Prime Gift 思路: 折半枚举+二分check 将素数分成两个集合(最好按奇偶位置来,保证两集合个数相近),这样每个集合枚举出来的小于1e18的积个数小于1e6. 然后二分答案, ...
- Codefores 835C-Star sky
835C-Star sky 思路:dp,预处理一下c+1层前缀和. 代码: #include<bits/stdc++.h> using namespace std; #define ll ...
- Java 常用对象-基本类型的封装类
2017-11-04 20:39:26 基本类型封装类:基本类型的封装类的好处是可以在对象中定义更多的功能方法操作该数据. 常用操作之一:用于基本数据类型与字符串的转换. 基本类型和包装类的对应: b ...
- IIS8.5支持WCF
昨天写了个WCF例子,在我电脑上怎么发布都不成功,老是报错. 后来把这个例子放到其他人电脑上发布都没问题,这应该就是我IIS的问题了.我用的是win8.1的系统,IIS版本是8.5,IIS8.5默认是 ...
- 《图解Http》 10,11章:构建Web的技术, Web的攻击技术
10.2动态HTML 通过调用客户端脚本语言js,实现对web页面的动态改造.利用DOM文档对象模型,指定想发生变化的元素. 10.22 更容易控制的DOM 使用DOM可以将HTML内的元素当作对象操 ...
- 原生js实现选项卡
html代码: <div class="tab"> <ul> <li class="selected">图片</li& ...