<p><code></p> <ul> <li>ArthurSlog</li> <li>SLog-7</li> <li>Year·1</li> <li>Guangzhou·China</li> <li>July 14th 2018</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="/img/remote/1460000016043562?w=128&amp;h=130" alt="关注微信公众号“ArthurSlog”" title="关注微信公众号“ArthurSlog”" style="cursor: pointer; display: inline;"></span></p> <ul> <li><a href="https://github.com/BlessedChild/ArthurSlog" rel="nofollow noreferrer" target="_blank">GitHub</a></li> <li><a href="https://juejin.im/user/59f2a424f265da432f305c66/posts" rel="nofollow noreferrer" target="_blank">掘金主页</a></li> <li><a href="https://www.jianshu.com/u/b9ebe10f0534" rel="nofollow noreferrer" target="_blank">简书主页</a></li> <li><a href="https://segmentfault.com/u/arthurslog/articles">segmentfault</a></li> </ul> <p>去往目的地的列车可能会晚点 但绝不会缺席</p> <hr> <h3 id="articleHeader0">开发环境MacOS(High Sierra 10.13.5)</h3> <h4>需要的信息:</h4> <ul> <li><a href="https://cn.vuejs.org/v2/guide/syntax.html" rel="nofollow noreferrer" target="_blank">vue模板语法官方手册</a></li> <li>我的上一篇文章:<a href="https://juejin.im/post/5b4799435188251aca1e23d0" rel="nofollow noreferrer" target="_blank">使用vue前端框架实现单页应用(SPA)</a> </li> </ul> <h4>开始编码:</h4> <ul> <li>切换至桌面路径</li> </ul> <blockquote><p>cd ~/Desktop</p></blockquote> <ul> <li>创建一个新文件夹</li> </ul> <blockquote><p>mkdir <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_vue_<a href="http://www.js-code.com/tag/template" title="Template" target="_blank">Template</a>Syntax_learningload</p></blockquote> <ul> <li>切换至新建的文件夹路径下</li> </ul> <blockquote><p>cd <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_vue_<a href="http://www.js-code.com/tag/template" title="Template" target="_blank">Template</a>Syntax_learningload</p></blockquote> <ul> <li>使用npm指令初始化nodejs项目环境,一路回车,完成初始化</li> </ul> <blockquote><p>npm init</p></blockquote> <ul> <li>安装 koa 和 kao-static</li> </ul> <blockquote><p>sudo npm install koa koa-static</p></blockquote> <ul> <li>需要管理员权限,输入密码</li> <li>在当前路径下创建 index.js 和 index.html 这两个文件,其中 index.js 实现了一个静态web服务器:</li> </ul> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <!-- 开发环境版本,包含了有帮助的命令行警告 --><br /> <script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;></script><br /> <title>ArthurSlog</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <p>Hello {{ rawHtml }} </p> <p>Hello <span v-html=&quot;rawHtml&quot;></span> </p> </p></div> <p> <script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { rawHtml: '<span style=&quot;color:red&quot;>ArthurSlog</span>' } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 开发环境版本,包含了有帮助的命令行警告 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello {{ rawHtml }} <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"rawHtml"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app'</span>, data: { rawHtml: <span class="hljs-string">'&lt;span style="color:red"&gt;ArthurSlog&lt;/span&gt;'</span> } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> serve = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa-static'</span>); <span class="hljs-keyword">const</span> Koa = <span class="hljs-built_in">require</span>(<span class="hljs-string">'koa'</span>); <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Koa(); <span class="hljs-comment">// $ GET /package.json</span> app.use(serve(<span class="hljs-string">'.'</span>)); app.listen(<span class="hljs-number">3000</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'listening on port 3000'</span>);</code></pre> <ul> <li>现在,切换至 ~/Desktop/node_vue_<a href="http://www.js-code.com/tag/template" title="浏览关于“Template”的文章" target="_blank" class="tag_link">Template</a>Syntax_learningload 路径下</li> </ul> <blockquote><p>cd ~/Desktop/node_vue_TemplateSyntax_learningload</p></blockquote> <ul> <li>启动静态web服务器</li> </ul> <blockquote><p>node index.js</p></blockquote> <ul> <li>打开浏览器,地址栏输入 127.0.0.1:3000, 回车,正常执行会有以下结果:</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Hello <span style=&quot;color:red&quot;>ArthurSlog</span></p> <p>Hello ArthurSlog" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="txt">Hello <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red"</span>&gt;</span>ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> Hello ArthurSlog</code></pre> <h5>上面的第二行,显示的 ArthurSlog 会显示红色</h5> <h5>请注意到</h5> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <p>Hello {{ rawHtml }} </p> <p>Hello <span v-html=&quot;rawHtml&quot;></span> </p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello {{ rawHtml }} <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"rawHtml"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { rawHtml: '<span style=&quot;color:red&quot;>ArthurSlog</span>' } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;script&gt; <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">rawHtml</span>: <span class="hljs-string">'&lt;span style="color:red"&gt;ArthurSlog&lt;/span&gt;'</span> } }) &lt;<span class="hljs-regexp">/script&gt;</span></code></pre> <h5>index.html 里使用了 v-html 指令,把 index.js 里的 rawHtml 作为 html 格式</h5> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <p>Hello <span v-html=&quot;rawHtml&quot;></span> </p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"rawHtml"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="data: { rawHtml: '<span style=&quot;color:red&quot;>ArthurSlog</span>'<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">data: { <span class="hljs-attr">rawHtml</span>: <span class="hljs-string">'&lt;span style="color:red"&gt;ArthurSlog&lt;/span&gt;'</span> }</code></pre> <h5>另一个没有使用 v-html 指令,而用 {{}}(无逻辑模板) 的,会解释为给定的值</h5> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <p>Hello {{ rawHtml }} </p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello {{ rawHtml }} <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="data: { rawHtml: '<span style=&quot;color:red&quot;>ArthurSlog</span>'<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">data: { <span class="hljs-attr">rawHtml</span>: <span class="hljs-string">'&lt;span style="color:red"&gt;ArthurSlog&lt;/span&gt;'</span> }</code></pre> <ul> <li>上面要说的,就是,当你使用 v-html 指令的时候,可以把给定的值按照 html格式 解析,使用方法是:</li> </ul> <h5>首先,先把你想执行的 html格式的内容 赋予变量 rawhtml:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="rwahtml: '<span style=&quot;color:red&quot;>ArthurSlog</span>'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;">rwahtml: '<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red"</span>&gt;</span>ArthurSlog<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>'</code></pre> <h5>其次,把你的 html标签 提取出来,这里的 html标签 指的是 &lt;span&gt;&lt;/span&gt;:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<span></span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre> <h5>然后,给标签上 解析指令 v-html:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<span v-html></span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre> <h5>最后,把变量 rawhtml 赋值给 v-html 指令,rawhtml 要加上双引号 “rawhtml”:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<span v-html=&quot;rawHtml&quot;></span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"rawHtml"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre> <ul> <li>至此,我们了解了 vue框架 的模版语法中 v-html 指令的使用。</li> </ul> <h3 id="articleHeader1">欢迎关注我的微信公众号 ArthurSlog</h3> <p><span class="img-wrap"><img data-src="/img/remote/1460000016043562?w=128&amp;h=130" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="ArthurSlog" title="ArthurSlog" style="cursor: pointer;"></span></p> <h3 id="articleHeader2">如果你喜欢我的文章 欢迎点赞 留言</h3> <h3 id="articleHeader3">谢谢</h3> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26979.html