Vue.js中几种定义组件模板的方法 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
May 23

Vue.js中几种定义组件模板的方法 不指定

tommyhu , 21:29 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(69) , Via Original Large | Medium | Small
有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:


字符串(String)
模板字符串(Template literal)
X-Templates
内联(Inline)
Render函数(Render functions)
JSX
单文件组件(Single page components)


当然,可能还有更多方法!

在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。

1. 字符串
默认情况下,在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂,它除了有广泛的浏览器支持之外,并没有什么优势。



2. 模板字符串(Template literals)
通过ES6的模板字符串(反引号)语法,你在定义模板时可以直接换行,这是通过常规的JavaScript字符串没法做到的。这种写法更容易阅读,并且这种模板字符串语法得到了许多新版本浏览器的支持。当然,为了安全起见,你仍然应该把它转译为ES5的语法形式。

然而,这种方式并不完美,我发现大多数的IDE在语法高亮上做的差强人意,并且在缩进和换行等的格式方面,仍然很痛苦。



3. X-Templates
使用这种方法,你需要在index.html文件里的script标签中定义你的模板。script标签需要添加text/x-template类型作为标记,并且在定义组件时,通过id来引用。

我喜欢这种方式,它允许你使用真正的HTML标记来书写你的HTML文件,但是不足之处在于,这种方式会把模板和组件其它部分的定义分开。



4. 内联模板(Inline Templates)
通过给组件添加inline-template属性来告诉Vue,里面的内容就是模板,而不是把它当作是分发内容(见 slots)。

它的缺点和x-templates一样,但是有一个优点就是,它的内容就在HTML模板对应的位置,所以页面一加载就会渲染,而不用等到JavaScript执行。



5. Render functions(渲染函数)
渲染函数需要你把模板当作一个JavaScript对象来进行定义,它们是一些复杂并且抽象的模板选项。

然而,它的优点是你定义的模板更接近编译器,你可以使用所有JavaScript方法,而不仅是指令提供的那些功能。


▲返回顶部

Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot