vue的组件使用方式

组件使用有两种方式

使用compoments定义组件,以html标签的形式注册加入

缺点：不能依赖runtime vue
优点: 不会覆盖data的msg

使用compoments组件的步骤

1. 在main.js中定义组件

var login = {
    template: '<h1>这是logoin组件</h1>'
}

2. 在js中使用组件

var vm = new Vue({
    el: '#app',
    data: {
        msg: '测试vue是否引入成功！！'
    },
    components: {
        login
    }
})

3. html定义该组件标签

<div id="app">    <p>{{msg}}</p>    
<login></login>
</div>

使用vue文件定义组件

1. 导入定义的vue文件

import log from './logon.vue'

2. 安装vueloader

cnpm i vue-loader vue-template-compiler -D

3. 在配置文件中心中loader配置项

, {test: /\.vue$/, use: 'vue-loader'} //处理vue文件的loader

4. 在配置文件中插件导入

const VueLoaderPlugin = require('vue-loader/lib/plugin')

5. 在插件中使用该插件

new VueLoaderPlugin()

缺点：会覆盖data中msg。