Vue in assembly

0828 self-summary

Vue in assembly

A constituting component

Components: the template + css + js three parts (.vue file)

• 1) assembly having a reusability

• 2) When component multiplexed data to isolate

• 3) When the reuse assembly, the method does not require isolation, because the method used to produce the difference data can be isolated

Introducing:

• 1) Each component has its own template (virtual DOM), and finally asked to replace real DOM (rendering)
• 2) mount point el, not specified template in the root element, copy the virtual with the real DOM DOM mounted to complete the instance is created and then replace the real DOM (rendering)
• 3) mount point el, in the root element defined template, it uses its own template as a virtual DOM, mount point is still necessary for occupying
• 4) All components new Vue () are called root element produced - when the project development, only a whole project root component
• 5) template can only resolve a root tag

II. Use of components

Use a - the content associated with replacing the entire vue

<div id="app">
    {{ msg }}
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
        template: `
        <div id="main">
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
        </div>
        `,
    })
</script>

Finally, the effect is displayed

message
message

In fact, he came first message

Since the latter then generates a temporary template dom, el entire label front will become associated in the template content

Usage of Two - local assembly

    <div id="app">
        <!--3）组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="js/vue.js"></script>
<script>
    // 1）创建组件
    let localTag = {
        template: '<p>66666</p>'
    };
    new Vue({
        el: '#app',
        // 2）注册组件
        components: {
            // localTag: localTag,  函数名和组件名相同可以直接简写成一个名字
            localTag
        }
    })
</script>

Local components can be in three steps

• Creating a component
• Registration component
• Web page rendering

Use three - Global Components

<div id="main">
    <global-tag></global-tag>
</div>
<script src="vue.js"></script>
<script>
    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
    Vue.component('global-tag', {
        template: '<p>66666</p>'
    });
    new Vue({
        el: '#main',
    });
</script>

使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签

注意点

• template can have only one root tag, if there is more, only the first entry into force
• If the content of template to facilitate the observation of the multi-line display, then instead of using reverse marks `double or single quotes

III. Multiplexed data isolation component

1. Local assembly

    <div id="app">
        <!--3）组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="vue.js"></script>
<script>
    // 1）创建组件
    let localTag = {
        data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    };
    new Vue({
        el: '#app',
        // 2）注册组件
        data:{
            msg:20
        },
        components: {
            // localTag: localTag,  函数名和组件名相同可以直接简写成一个名字
            localTag
        }
    })
</script>

• The data which put the value of the function function of course I can not write omitted
• Vue and is not affected by the impact of msg, msg only by the influence of components

2, the overall assembly

<div id="main">
    <global-tag></global-tag>
</div>
//<global-tag></global-tag> 这样就是个普通的自定义标签
<script src="vue.js"></script>
<script>
    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
    // 4) 这里的全局不是指整个网页而是指与vue进行挂载那些全部的部分
    Vue.component('global-tag', {
                data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    });
    new Vue({
        el: '#main',
        data:{
            msg:10
        }
    });
</script>

特点和局部相同

IV. Component information exchange from father to son

<div id="app">
    <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad_dic'],
        template: `
        <div class="ad">
            <img :src="ad_dic.img" alt="">
            <h4>{{ ad_dic.title }}</h4>
        </div>
        `,
    };

    // 模拟后台的数据
    let ads = [
        {
            'img': 'img/001.png',
            'title': '小猫'
        },
        {
            'img': 'img/002.png',
            'title': '黄蛋'
        },
        {
            'img': 'img/003.png',
            'title': '蓝蛋'
        },
        {
            'img': 'img/004.png',
            'title': '短腿'
        },
    ];
    new Vue({
        el: '#app',
        data: {
            ads,  // 后期项目是后台返回的数据
        },
        components: {
            localTag
        }
    })
    // 分析数据 父传子
    // 1）父组件提供数据
    // 2）在父组件模板中，为子组件标签设置自定义属性绑定父级数据
    // 3）在子组件props成员中，接收自定义属性
    // 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据
</script>

V. parent component information exchange sub-transmission

<div id="app">
    <p>
        <input type="text" v-model="info">
        <button @click="add_msg">留言</button>
    <ul>
        <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
    </ul>
    </p>
</div>

<script src="js/vue.js"></script>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                this.$emit('del_action', this.index)
            }
        }
    };
    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析数据 子传父
    // 1）子组件提供数据
    // 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
    // 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法
    // 4）父组件实现方法获取到子组件数据
</script>