双大括号会将数据解释为普通文本，而非 html 代码。为了输出真正的 html，你需要使用 v-html 指令，例如:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <七夕段子;title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body> <script> vue.config.productiontip=fal; vue.config.devtools=fal; </script> <div id="app"> <p>{{message}}</p> <p v-html="message"></p> </div> <script> var app = new vue({ el:'#app', data:{ message:'<span style="color:#f00">hell world!</span>' } }) </script></body></html>渲染结果为:
<p>{{message}}</p>里的message被解释为了普通文本，而不是输出真正的 html，而<p v-html=”message”></p>输出了真正的html
v-text和v-html类似，v-text以普通文本来插入，例如:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body> <script> vue.config.productiontip=fal; vue.config.devtools=fal; </script> <div id="app"> <p v-html="message">{{message}}</p> <p v-text="hello">你好</p> </div> <script> var app = new vue({ el:'#app', data:{ message:'<span style="color:#f00">hell world!</span>', hello:"hello world" } }) </script></body></html>渲染的结果为:
源码分析
我们以第二个例子为例。
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属性 }}par()解析模板时会执行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 = parmodifiers(name); if (modifiers) { name = name.replace(modifierre, ''); } if (bindre.test(name)) { // v-bind /*v-bind的分支*/ } el if (onre.test(name)) { // v-on /*v-on的分支*/ } el { // normal directives //普通指令 name = name.replace(dirre, ''); //去掉指令前缀，比如v-model执行后等于model // par 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); } } } el { /*普通属性的分支*/ } } }}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 = fal;}对于<p v-html=”message”>{{message}}</p>节点来说，他的ast对象如下:
对于<p v-text=”hello”>你好</p>对象来说，他的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东北电力大学是211吗.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 obrved objects, as the ur 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 对于<p v-html="message">{{message}}</p>这个节点来说，这里的key等于:innerhtml cur = props[key]; //获取对应的值,对于<p v-html="message">{{message}}</p>这个节点来说，cur等于:"<span style="color:#f00">hell world!</span>" // ignore children if the node has textcontent or innerhtml, // as the will throw away existing dom nodes and cau removal errors // on subquent 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 retting cursor position when value is the same var strcur = isundef(cur) ? '' : string(cur); if (shouldupdatevalue(elm, strcur)) { elm.value = strcur; } } el { elm[key] = cur; //否则直接设置elm的key属性值为cur，也就是设置元素的innerhtml或textcontent属性 } }}从updatedomprop函数内看到，对于v-html或v-text指令来说，如果有子节点，会每个删除掉，所以如果一个元素绑定了v-html或v-text指令，它的子节点时将忽略掉。
总结:通过源码可以发现，对于v-html和v-text来说，vue是通过设置元素原生的innerhtml或textcontent这两个属性来实现的。
本文发布于:2023-04-03 02:53:19，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/54dff979a4aa450736473ac6d85d7c65.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Vue.js 源码分析(十九) 指令篇 v.doc
本文 PDF 下载地址：Vue.js 源码分析(十九) 指令篇 v.pdf
| 留言与评论（共有 0 条评论） |
