3种vue组件的书写形式

2019-11-19 14:49:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下

第一种使用script标签

<!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标签

<!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单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html

创建.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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：写给小白看的JavaScript异步

下一篇：easyui下拉框动态级联加载的示例代码