html方式写vue组件,vue组件的3种书写形式详解

本文主要为大家详细介绍了3种vue组件的书写形式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助大家。

第一种使用script标签

标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略

This is a component!

//全局注册组件

Vue.component('my-component',{

template: '#myComponent'

})

new Vue({

el: '#app'

})

第二种使用template标签

This is a component!

Vue.component('my-component',{

template: '#myComponent'

})

new Vue({

el: '#app'

})

第三种单文件组件

这种方法常用在vue单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html

创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

{{ msg }}

export default {

name: 'hello',

data () {

return {

msg: '欢迎！'

}

}

}

app.vue

// 导入组件

import Hello from './components/Hello'

export default {

name: 'app',

components: {

Hello

}

}

#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;

}

相关推荐：