双大括号会将数据解释为普通文本,而非 html 代码。为了输出真正的 html,你需要使用 v-html 指令,例如:
documentvue.config.productiontip=false;
vue.config.devtools=false;
{{message}}
var app = new vue({
el:'#app',
data:{
message:'hell world!'
}
})
渲染结果为:
{{message}}
里的message被解释为了普通文本,而不是输出真正的 html,而v-text和v-html类似,v-text以普通文本来插入,例如:
documentvue.config.productiontip=false;
vue.config.devtools=false;
{{message}}
你好
var app = new vue({
el:'#app',
data:{
message:'hell world!',
hello:"hello world"
}
})
渲染的结果为:
源码分析
我们以第二个例子为例。
v-html和v-text都是内部指令,它们有初始化函数,分别如下:
function text (el, dir) { //第9785行 v-text指令
if (dir.value) {
addprop(el, 'textcontent', ("_s(" + (dir.value) + ")")); //给el.prop上增加一个textcontext属性
}
}
function html (el, dir) { //第9788行 v-html指令
if (dir.value) {
addprop(el, 'innerhtml', ("_s(" + (dir.value) + ")")); //给el.prop上增加一个innerhtml属性
}
}
parse()解析模板时会执行processattrs()函数,如下:
function processattrs (el) { //第9526行 对剩余的属性进行分析
var list = el.attrslist;
var i, l, name, rawname, value, modifiers, isprop;
for (i = 0, l = list.length; i < l; i++) {
name = rawname = list[i].name;
value = list[i].value;
if (dirre.test(name)) { //如果该属性以v-、@或:开头,表示这是vue内部指令
// mark element as dynamic
el.hasbindings = true;
// modifiers
modifiers = parsemodifiers(name);
if (modifiers) {
name = name.replace(modifierre, '');
}
if (bindre.test(name)) { // v-bind
/*v-bind的分支*/
} else if (onre.test(name)) { // v-on
/*v-on的分支*/
} else { // normal directives //普通指令
name = name.replace(dirre, ''); //去掉指令前缀,比如v-model执行后等于model
// parse arg
var argmatch = name.match(argre);
var arg = argmatch && argmatch[1];
if (arg) {
name = name.slice(0, -(arg.length + 1));
}
adddirective(el, name, rawname, value, arg, modifiers); //执行adddirective给el增加一个directives属性,值是一个数组,例如:[{name: "model", rawname: "v-model", value: "message", arg: null, modifiers: undefined}]
if ("development" !== 'production' && name === 'model') {
checkforaliasmodel(el, value);
}
}
} else {
/*普通属性的分支*/
}
}
}
}
function adddirective ( //第6561行 指令相关,给el这个ast对象增加一个directives属性,值为该指令的信息,比如:
el,
name,
rawname,
value,
arg,
modifiers
) {
(el.directives || (el.directives = [])).push({ name: name, rawname: rawname, value: value, arg: arg, modifiers: modifiers });
el.plain = false;
}
对于
{{message}}
节点来说,他的ast对象如下:对于
你好
对象来说,他的ast对象如下:执行gendata$2()拼凑data属性时会先执行gendirectives()函数,该函数会执行v-html和v-text指令的安装函数,添加对应的prop属性,最后会转换为domprops属性,例子里的代码经过解析后生产的render函数如下:
with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{domprops:{"innerhtml":_s(message)}},[_v(_s(message))]),_v(" "),_c('p',{domprops:{"textcontent":_s(hello)}},[_v("你好")])])}
可以看到给两个p元素分别添加了一个domprops属性,值为对应的信息,
最后渲染成对应的真实的dom节点后就会执行domprops模块(vue内置的模块,当dom元素渲染、更新、删除时做一些操作)的初始化函数,也就是updatedomprops函数,如下:
function updatedomprops (oldvnode, vnode) { //第7102行 更新dom对象的props
if (isundef(oldvnode.data.domprops) && isundef(vnode.data.domprops)) { //如果oldvnode和vnode的data上都没有domprops属性
return //则直接返回不做处理
}
var key, cur;
var elm = vnode.elm; //vnode对应的dom节点对象
var oldprops = oldvnode.data.domprops || {};
var props = vnode.data.domprops || {}; //vnode的domprops对象
// clone observed objects, as the user probably wants to mutate it
if (isdef(props.__ob__)) {
props = vnode.data.domprops = extend({}, props);
}
for (key in oldprops) {
if (isundef(props[key])) {
elm[key] = '';
}
}
for (key in props) { //遍历props 对于
{{message}}
这个节点来说,这里的key等于:innerhtmlcur = props[key]; //获取对应的值,对于
{{message}}
这个节点来说,cur等于:" hell world!"// ignore children if the node has textcontent or innerhtml,
// as these will throw away existing dom nodes and cause removal errors
// on subsequent patches (#3360)
if (key === 'textcontent' || key === 'innerhtml') { //如果key等于textcontent或innerhtml,这里是对指令v-html和v-text的支持
if (vnode.children) { vnode.children.length = 0; } //如果有子节点,则删除它们
if (cur === oldprops[key]) { continue }
// #6601 work around chrome version <= 55 bug where single textnode
// replaced by innerhtml/textcontent retains its parentnode property
if (elm.childnodes.length === 1) {
elm.removechild(elm.childnodes[0]);
}
}
if (key === 'value') { //如果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
var strcur = isundef(cur) ? '' : string(cur);
if (shouldupdatevalue(elm, strcur)) {
elm.value = strcur;
}
} else {
elm[key] = cur; //否则直接设置elm的key属性值为cur,也就是设置元素的innerhtml或textcontent属性
}
}
}
从updatedomprop函数内看到,对于v-html或v-text指令来说,如果有子节点,会每个删除掉,所以如果一个元素绑定了v-html或v-text指令,它的子节点时将忽略掉。
总结:通过源码可以发现,对于v-html和v-text来说,vue是通过设置元素原生的innerhtml或textcontent这两个属性来实现的。