Vue實現數據的雙向綁定,讓前端開發更加高效便捷。而Vue template標簽的出現,也進一步提高了Vue的渲染能力。
在Vue中,template標簽是用來定義組件模板的,它可以充當其它元素的占位符。比如,我們定義了一個組件模板,那么它就可以在template標簽中使用:
{{ title }}
{{ content }}
在這個組件模板中,我們通過{{}}對數據進行了綁定,數據的變化將會自動更新。我們接下來在頁面中使用這個組件模板:
這里,我們只需要使用
在Vue中,template標簽還有一個特別的用法,就是僅僅作為編譯器的根元素,而不渲染任何內容。這種用法主要是用來實現“多個根節點”的支持。比如:
{{ title }}
{{ content }}
這里,我們在
元素中同時使用了和兩個標簽,這本來是不被允許的。但是在加上包裹后,就能夠成功編譯。最終顯示出來的內容只有元素,而標簽不會被渲染出來。
除了在組件中用到template標簽外,在Vue自定義指令中也有可能用到。比如:
Vue.directive('bar', {
bind: function (el, binding) {
var template = binding.value;
var compiled = Vue.compile(template);
compiled.render();
}
});
這個自定義指令用到了template標簽的compile()方法進行編譯,并把渲染結果插入到el元素中。這種用法,雖然比較少見,但是在一些復雜的業務場景下,也是十分有用的。
最后值得一提的是,我們在使用template標簽的時候,需要注意其父元素和內容是否符合HTML規范,確保可以正確地被瀏覽器解析。否則在渲染過程中出現不符合規范的HTML,會導致頁面無法正常顯示或者出現嚴重的排版問題。
上一篇vue 彈框 特效
下一篇class反射json