首页手记 vue组件模板的几种书写形式

vue组件模板的几种书写形式

标签：

Vue.js

1.第一种使用script标签

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <test-component></test-component>
        </div>
        <script type="text/x-template" id="testComponent"><!-- 注意 type 和id。 -->
            <div>{{test}} look test component!</div>
        </script>
    </body>
    <script>
        //全局注册组件
        Vue.component('test-component',{
            template: '#testComponent', 
            data(){              return{
                test:"hello"
              }
            }
        })        new Vue({
            el: '#app'
        })    </script></html>

注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，
浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

2.第二种使用template标签

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <test-component></test-component>
        </div>

        <template id="testComponent">
            <div>look test component!</div>
        </template>
    </body>
    <script>

        Vue.component('test-component',{
            template: '#testComponent'
        })        new Vue({
            el: '#app'
        })    </script></html>

当然，如果template内容少的话，我们可以直接在组件中书写，而不需要用template标签。像下面这样：

 Vue.component('test-component',{
       template:`<h1>this is test,{{test}}</h1>`,       data(){          return{             test:"hello test"
             }
            }
   })

3.第三种单文件组件

这种方法常用在vue单页应用中
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div></template><script>export default {  name: 'hello',
  data () {    return {      msg: '欢迎！'
    }
  }
}</script>

app.vue

<template>
  <div id="app">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png">
    <hello></hello>
  </div></template><script>import Hello from './components/Hello'export default {  name: 'app',  components: {
    Hello
  }
}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;
}</style>

作者：pattyzzh
链接：https://www.jianshu.com/p/190484b8b67a

点击查看更多内容