vue 组件之结构，数据，样式，行为，及生命周期函数

vue 组件之 data （数据）

data ：代表是当前这个组件内部的数据，一般也叫做state 状态，模型变量

之前我们知道了 vue 组件的定义和基本使用，但是我们发现，vue 组件使用的时候，不能在标签里加内容，比如说：

<div id="box">
    <my_component>你好</my_component>
</div>
<script>
    Vue.component("my_component",{
        template: "<h2>hello</h2>"
    });
    var vm = new Vue({
        el: "#box",
        data: {
            title: 'component'
        }
    })
</script>

我们看到，只能打印出 hello，“你好”是打印不出来的，如果想要打印‘’你好‘’，就要在 template 模板里面加，可是有时候我们所需要的数据是需要变动且维护的，这个时候我们就不能把数据全部写死了。
data ：代表是当前这个组件内部的数据，一般也叫做state 状态，模型变量
组件内部其实是可以维护一些数据的，我们数据就放在 和 template 同级的 data 属性里，但是data 的值必须是一个函数，并且函数的返回值必须是一个对象，这样才能在模板里引用 数据，如下面的例子

<div id="box">
    <my_component></my_component>
</div>
<script>
    Vue.component("my_component",{
        template: "<h2>hello</h2>",
        data: function(){
            return {
                title: '我是组件的一个数据',
                arr: [1,24,43,'gdhs'],
                obj: {name:'lili',age:23}
            }
        },
        template: `
            <div>
                <h2>我是一个全局组件</h2>
                <p>bdzcjzdschjuv hjdskchds dhushziv ishdi hiefhcoi mx bcki mxz hcisha hickimyfew8fy  huhcfox cuihdsacoieyf hciaohjc, chiajdshc hciok</p>
                <p>{{ title }}</p>
                <p v-for="value in arr">{{ value }}</p>
                <ul>
                    <li v-for="key in obj">{{ key }}</li>
                </ul>
            </div>
        `
    });
    var vm = new Vue({
        el: "#box",
        data: {
            title: 'component'
        }
    })
</script>

我们可以看到，在组件里面也可以用插值表达式，甚至是一些指令，其实这并不奇怪，组件也是 Vue 创建的一个对象，自然也可以用里面的方法和指令，这样一来，我们如果要改变数据，就不需要去更改模板，只需要更改 data 里的数据就可以了

vue 组件之 样式

组件里面包括 1. 结构 template 2. 数据 data: fn 3. 样式 4. 行为(事件) 4. 生命周期函数，现在我们就来说一下样式
目前学习的组件都是些在一个文件里面的，没有形成工程化的概念，还不能独立的写组件（后面学习单组件的定义方式，组件可以单独形成文件，在形成的文件里面，我们可以定义好只属于该组件的样式，但是目前的这种方式，我们定义的样式只能写在 style 样式表或者行内样式），如下

<style>
        .a{
            color:red;
            font-size:36px;
        }
    </style>

<div id="box">
    <componentstyle></componentstyle>
</div>
<script>
    Vue.component("componentstyle",{
        template:`
                <div>
                    <h2> 组件样式</h2>
                    <b class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus est excepturi ipsam iusto magnam nesciunt placeat praesentium soluta temporibus ullam! Ad aut autem beatae, esse illum quia quibusdam recusandae sit?</b>
                </div>
        `
    })
    var vm = new Vue({
        el: "#box",
        data: {
            title: 'component'
        }
    })
</script>

vue 组件之 行为

行为也就是可以说是事件，数据我们写在 data 里，而函数我们写在 methods 里

<div id="box">
    <component_action></component_action>
</div>
<script>
    Vue.component("component_action",{
        methods: {
            clickHandler: function(e){
                console.log(e.target);
            }

        },
        template:`
            <button @click="clickHandler">点击</button>
        `
    })
    var vm = new Vue({
        el: "#box",
        data: {
            title: 'component'
        }
    })
</script>

vue 组件之 生命周期函数

从上面的例子中我们应该也发现了，这种写法和我们写实例化的 Vue 是基本类似，其实 实例化的 Vue 我们称之为根组件，也就是 实例化的 vue 也是组件的一种，组件内部的生命周期函数等同 Vue 根组件的生命周期函数，也就是，vue 根组件的生命周期函数在组件内部也同样存在
注意：要使用组件，才能看到效果

<div id="box">
    <component_life></component_life>
</div>
<script>
    Vue.component("component_life",{
        created: function(){
            console.log("我是组件的生命周期函数")
        },
        updated: function(){
            console.log("我更新了");
        },
        data: function(){
            return {
                title: '组件'

            }
        },
        template: `
            <h2>我是生命周期函数</h2>
        `
    })
    var vm = new Vue({
        el: "#box",
        data: {
            title: 'component'
        }
    })
</script>