Vue初学30-vue组件化的使用方案

vue在使用时是通过el属性与dom元素绑定，dom元素在html文件中，如果将dom元素都放在html文件中，随着页面的复杂，元素会越来越多，可读性差，维护起来也不方便。因此，需要采用组件化的思想组织页面元素。

el和template

vue中通过el属性与dom元素关联，vue中还有template属性，生成后，template中的元素将替换el中关联的dom元素。

将main.js和index.html修改如下：

main.js

import Vue from 'vue'
const vue = new Vue({
    el:'#app',
    template:`
    

      
{{message}}
    
    `,
    data:{
        message:'hello world'
    }
})

index.html

重新打包，效果如下：

template的提取 

 将template放在vue里面，组织起来仍然比较乱，将template作为模板提取出来比较好。

修改main.js如下：

import Vue from 'vue'

const App = {
    template:` 

      
{{message}}
    
`,
    data()
    {
        return {
            message:'hello world'
        }
    }
}
const vue = new Vue({
    el:'#app',
    template:'',
    components:{
        App
    }
})

模板可以单独放在一个js文件里面，在src目录下新建vue目录，vue目录下新建app.js文件

app.js文件如下：

export default {
    template:` 

      
{{message}}
    
`,
    data()
    {
        return {
            message:'hello world'
        }
    }
}

main.js文件修改如下：

import Vue from 'vue'
import App from './vue/app.js'
const vue = new Vue({
    el:'#app',
    template:'',
    components:{
        App
    }
})

这样vue中代码更加清晰简洁，但是app.js中dom元素和js代码的层次不够清晰。

vue component提取

在vue目录下新建vue component文件App.vue

App.vue如下：

App.vue文件有三部分