Vue中定义模板的几种方法

淩亂°似流年 2022-12-04 01:27 448阅读 0赞

# 指定模板 #

Vue实例的模板在Vue实例的选项·template·中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中，或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。  
下面的例子中，根实例没有指定模板，不指定模板的情况下挂载点内部的内容就是其模板

1、字符串模板  
通过template选项指定字符串作为模板,见上  
2、 template选项指定模板字符串  
通过template选项指定ES6的模板字符串作为模板

template: `<div> <p>{ { message }}</p> </div>`

3、X-Templates  
script标签中设置type为text/x-template，配置id属性;在template选项指定script标签的id。

<div id="app">
        <my-component></my-component>
    </div>
    <script type="text/x-template" id="template"> <div> <p>{ { message}}</p> </div> </script>
    <script> Vue.component('MyComponent', { data () { return { message: 'Hello Vue!' } }, template: '#template' }) new Vue({ el: '#app' }) </script>

4、内联模板（Inline Templates）  
在内联模板中添加inline-template属性来告诉Vue，里面的内容就是模板,这种方式无需显示的配置template选项

<div id="app">
        <my-component inline-template>
            <div>
                <p>{
       {message}}</p>
            </div>
        </my-component>
    </div>
    <script> Vue.component('MyComponent', { data () { return { message: 'Hello Vue!' } } }) new Vue({ el: '#app' }) </script>

# 单文件组件 #

单文件组件是把组件写到单独的.vue 文件中，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。  
由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析，如在webpack构建的应用中，需要安装vue-loader 对.vue文件进行解析，webpack会解析生成对应的 javascript、html、css 。

MyComponent.vue

<template>
      <div>
        <p>{
       {message}}</p>
      </div>
    </template>
    
    <script> export default { data () { return { message: 'Hello Vue!' } } } </script>
    
    <style> </style>

Vue官方提供的一个脚手架工具vue-cli ,生成的项目模板，就是采用的单文件组件。

# render函数 #

render函数直接用js语言来构建虚拟DOM（ VNode）。它接收一个 createElement 函数作为参数，render函数的返回值是VNode，也就是我们要渲染的虚拟节点。

createElement函数有三个参数：

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>{String / Object / Function}</td> 
   <td>必填项，一个 HTML 标签名、组件选项对象，或者,resolve 了上述任何一种的一个 async 函数</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>{Object}</td> 
   <td>一个与模板中属性对应的数据对象，可选</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>{Array / String}</td> 
   <td>由 createElement()构建而成子级虚拟节点 (数组)，或使用字符串来生成“文本虚拟节点”。可选</td> 
  </tr> 
 </tbody> 
</table>

<div id="app">
        <my-component></my-component>
    </div>
    <script> Vue.component('MyComponent', { data () { return { message: 'Hello Vue!' } }, render: function (createElement) { return createElement( 'div', [ createElement('p', this.message) ] ) } }) new Vue({ el: '#app' }) </script>

createElement可以简写为h，render函数可以用ES6语法进行简写

render: h => h(
        //...
      )

### 使用JSX语法 ###

用render函数createElement() 构建虚拟Dom的语法比较繁琐，更方便的是用更接近于模板的JSX语法,浏览器不认识不能识别JSX语法，需要babel插件的帮助，如果使用的 Vue-cli 大于或等于 3.0 版本，安装了babel,会自动支持JSX语法。  
下面是在Vue cli构建的应用中的一个单文件组件

JSX是React发明的一种JavaScript的语法扩展，有其特定语法规则  
[在Vue 中使用 JSX 语法][Vue _ JSX]

[Vue _ JSX]: https://blog.csdn.net/dreamingbaobei3/article/details/115802440