脚本宝典收集整理的这篇文章主要介绍了

Vue的模板语法学习

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h1 id="articleHeader0">模板语法</h1> <h2 id="articleHeader1">1、插值</h2> <h3 id="articleHeader2">a、文本</h3> <h5>数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值</h5> <h5>我们在普通插值的时候无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新</h5> <h5>【案例】</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=" <div id=&quot;app&quot;> <span>{{ msg }}</span> </div> <p><script> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, data:{ msg:&quot;wo zai xue xi vue!&quot; } }); </script><br /> 结果就是:wo zai xue xi vue!" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">span</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</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">var</span> app = <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:{ msg:<span class="hljs-string">"wo zai xue xi vue!"</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 结果就是:wo zai xue xi vue!</code></pre> <h5>我们在使用 v-once指令的时候,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。</h5> <h5>【案例】</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=" <div id=&quot;app&quot;> <span>{{ msg }}</span></p> <h4 v-once>{{ msg }}</h4> </div> <p><script> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, data:{ msg:&quot;wo zai xue xi vue!&quot; } }); </script><br /> 打印结果看下图" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">v-once</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h4</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ msg:<span class="hljs-string">"wo zai xue xi vue!"</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果看下图</code></pre> <p><span class="img-wrap"><img data-src="/img/bVT2SF?w=199&amp;h=617" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h3 id="articleHeader3">b、纯<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></h3> <h5>双大括号会将数据解释为纯文本,而非 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 。为了输出真正的 <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> ,你需要使用 v-html 指令</h5> <h5>【案例】</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=" <div id=&quot;app&quot;> <div v-html=&quot;message&quot;></div> </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ message:&quot;我是纯HTML&quot; } }); </script><br /> 打印结果:我是纯HTML" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"message"</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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ message:<span class="hljs-string">"我是纯HTML"</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果:我是纯HTML</code></pre> <h3 id="articleHeader4">c、特性</h3> <h5>mustache 语法不能作用在 HTML 属性上,遇到这种情况应该使用 v-bind 指令:</h5> <h5>【案例】</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=" <div id=&quot;app&quot;> <div v-bind:title=&quot;msg2&quot;>nihao</div> </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg1:&quot;</p> <li>nihao</li> <p>&quot;, msg2:&quot;你好啊&quot; } }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"msg2"</span>&gt;</span>nihao<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ msg1:<span class="hljs-string">"&lt;li&gt;nihao&lt;/li&gt;"</span>, msg2:<span class="hljs-string">"你好啊"</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader5">d、使用 JavaScript 表达式</h3> <h5>什么是表达式</h5> <h6>由变量函数返回值和运算符以及常量组成的式子就叫表达式</h6> <h2 id="articleHeader6">2、指令</h2> <h5>什么是指令</h5> <h6>指令(Directives)是带有 v- 前缀的特殊属性。</h6> <h5>指令的职责是什么</h5> <h6>当表达式的值改变时,将其产生的连带影响,响应式地作用于 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>。</h6> <h5>最常用的指令有:</h5> <h6>v-bind和v-on</h6> <h3 id="articleHeader7">a、参数</h3> <h5>指令的参数都有哪些</h5> <h6>比如href</h6> <h3 id="articleHeader8">b、修饰符</h3> <h5>修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用</h5> <h5>【案例】</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=" <div id=&quot;app&quot;> <a v-bind:href=&quot;url&quot; v-on:click.prevent=&quot;a&quot;>百度</a> </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg:&quot;xue xi vue!&quot;, url:&quot;http://www.baidu.com&quot; }, methods:{ a:function(){ console.log(&quot;阻止跳转!&quot;) } } }); </script><br /> 结果看下图" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-bind:href</span>=<span class="hljs-string">"url"</span> <span class="hljs-attr">v-on:click.prevent</span>=<span class="hljs-string">"a"</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</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="javascript"> <span class="hljs-keyword">var</span> app = <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">msg</span>:<span class="hljs-string">"xue xi vue!"</span>, <span class="hljs-attr">url</span>:<span class="hljs-string">"http://www.baidu.com"</span> }, <span class="hljs-attr">methods</span>:{ <span class="hljs-attr">a</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"阻止跳转!"</span>) } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 结果看下图</code></pre> <p><span class="img-wrap"><img data-src="/img/bVT2SB?w=294&amp;h=645" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader9">3、过滤器</h2> <h5>过滤器是用来干什么的</h5> <h6>对文本进行格式化的</h6> <h5>过滤器用在什么地方</h5> <h6>过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。</h6> <h5>【反转案例】</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=" <div id=&quot;app&quot;> {{msg|guolvqi}}<br /> {{msg|guolvqi}}<br /> {{msg|guolvqi}} </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg:&quot;xue xi vue!&quot; }, //定义过滤器 filters: { guolvqi:function(value){ return value.split(&quot;&quot;).reverse().join(&quot;&quot;) } } }); </script><br /> 打印结果:!euv ix eux !euv ix eux !euv ix eux" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{msg|guolvqi}} {{msg|guolvqi}} {{msg|guolvqi}} <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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ msg:<span class="hljs-string">"xue xi vue!"</span> }, <span class="hljs-comment">//定义过滤器</span> filters: { guolvqi:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span></span>{ <span class="hljs-keyword">return</span> value.split(<span class="hljs-string">""</span>).reverse().join(<span class="hljs-string">""</span>) } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果:!euv ix eux !euv ix eux !euv ix eux</code></pre> <h5>【串联一个大写案例】</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=" <div id=&quot;app&quot;> {{msg|guolvqi|daxie}}<br /> {{msg|guolvqi|daxie}}<br /> {{msg|guolvqi|daxie}} </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg:&quot;xue xi vue!&quot; }, //定义过滤器 filters: { guolvqi:function(value){ return value.split(&quot;&quot;).reverse().join(&quot;&quot;) }, daxie:function(value){ return value.toUpperCase(); } } }); </script><br /> 打印结果:!EUV IX EUX !EUV IX EUX !EUV IX EUX" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{msg|guolvqi|daxie}} {{msg|guolvqi|daxie}} {{msg|guolvqi|daxie}} <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">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ msg:<span class="hljs-string">"xue xi vue!"</span> }, <span class="hljs-comment">//定义过滤器</span> filters: { guolvqi:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span></span>{ <span class="hljs-keyword">return</span> value.split(<span class="hljs-string">""</span>).reverse().join(<span class="hljs-string">""</span>) }, daxie:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span></span>{ <span class="hljs-keyword">return</span> value.toUpperCase(); } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 打印结果:!EUV IX EUX !EUV IX EUX !EUV IX EUX</code></pre> <h5>过滤器也可以接收参数</h5> <h2 id="articleHeader10">4、缩写</h2> <h3 id="articleHeader11">a、v-bind缩写</h3> <h5>【案例】</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=" <div id=&quot;app&quot;> <div :title=&quot;msg&quot;>缩写</div> </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg:&quot;xue xi vue!&quot; } }); </script><br /> 结果看下图" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"msg"</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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ msg:<span class="hljs-string">"xue xi vue!"</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 结果看下图</code></pre> <p><span class="img-wrap"><img data-src="/img/bVT2S6?w=161&amp;h=135" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h3 id="articleHeader12">b、v-on缩写</h3> <h5>【案例】</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=" <div id=&quot;app&quot;> <div @click=&quot;shijian&quot;>缩写</div> </div> <p><script> var app = new Vue({ el:&quot;#app&quot;, data:{ msg:&quot;xue xi vue!&quot; }, methods:{ shijian:function(){ console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg) } } }); </script><br /> 结果看下图" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"shijian"</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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> app = <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">msg</span>:<span class="hljs-string">"xue xi vue!"</span> }, <span class="hljs-attr">methods</span>:{ <span class="hljs-attr">shijian</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.msg) } } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 结果看下图</code></pre> <p><span class="img-wrap"><img data-src="/img/bVT2Te?w=350&amp;h=215" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h4>喜欢的朋友别忘了点赞和收藏啊</h4>

总结

以上是脚本宝典为你收集整理的

Vue的模板语法学习

全部内容,希望文章能够帮你解决

Vue的模板语法学习

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过