黑马程序员技术交流社区

标题: [上海校区] Vue组件的3种书写形式 [打印本页]

作者: 默默呜呜 时间: 2019-10-30 10:07
标题: [上海校区] Vue组件的3种书写形式
本帖最后由默默呜呜于 2019-10-30 10:09 编辑

Vue组件的3种书写形式

第一种使用script标签：

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <my-component></my-component>

        </div>

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

<script type="text/x-template" id="myComponent">//注意 type 和id。

            <div>This is a component!</div>

        </script>

    </body>

    <script src="js/vue.js"></script>

    <script>

        //全局注册组件

        Vue.component('my-component',{

            template: '#myComponent'

        })

        new Vue({

            el: '#app'

        })

</script>

</html>

第二种使用template标签：

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="app">

            <my-component></my-component>

        </div>

        <template id="myComponent">

            <div>This is a component!</div>

        </template>

    </body>

    <script src="js/vue.js"></script>

    <script>

        Vue.component('my-component',{

            template: '#myComponent'

        })

        new Vue({

            el: '#app'

        })

    </script>

</html>

第三种单文件组件：

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

[JavaScript] 纯文本查看 复制代码

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

  </div>

</template>



<script>

export default {

  name: 'hello',

  data () {

    return {

      msg: '欢迎！'

    }

  }

}

</script>

app.vue

[JavaScript] 纯文本查看 复制代码

<!-- 展示模板 -->

<template>

  <div id="app">

    <img src="./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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2