(Day67) components, component-based, component mass participation, JS supplement (naming convention, for in, data conversion), css and uncheck the analog hands

First, acquaintance components

(A) concept

1. Component is the html, css and js a collection, you can reuse again by the aggregate component
2. Assembly into the root component, the local component, global components

(B) Features

1. Each component is an example Vue
2. As the top-most parent root component assembly, local and global components as sub-components, the components may be the parent of other local and global components
3. Each component has its own template template template, root component is the mount point, template has one and only one root tag
4. All variables appear component, the component itself has provided
5. After partial assembly must be registered in order to use the global assembly does not require registration, we recommend the use of local components
6. Data subcomponents require isolation (by function so that each component has its own independent scope, component-based data)

Second, the classification of components

(A) a root assembly

1. Root component: new Vue()component generated
2. Root component can not clear template, template defaults mount point Page Structure
3. If you set the template, the contents of the mount point inside will be replaced
4. Thus, html body, and not as a label mount point

<div id="app">
    {{ msg }}
</div>
<script>
    new Vue({
    el: '#app',  // 被组件 template 模块进行替换的占位符
    data: {
        msg: '组件信息'
    },
    template: '<p>{{ msg }}</p>'
})
</script>

(B) sub-assembly

1. Local component: let 组件名={}{} syntax for internal use is Vue
2. To register to use local components in the parent assembly

<div id="app">
    <div class="wrap">
        <!--3. 渲染组件-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
        // 1. 声明组件
    let localTag = {
        template: `
    <div class="box" @click="fn">
        <img src="img/001.jpg" alt="">
        <h2>美女</h2>
    </div>`,
        methods: {
            fn() {
                console.log(this)
            }
        }
    };
    
    // 2. 注册组件
    new Vue({
        el: '#app',
        data: {},
        components: {  // 注册组件
            localTag,
        }
    })
</script>

(C) global components

1. Global components: Vue.component('组件名'，{}){} syntax for internal use is Vue
2. Global components do not require registration

<div id="app">
    <div class="wrap">
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    // 全局组件
    Vue.component('global-tag', {
        template: `
            <div class="box" @click="fn">
            <img src="img/002.jpg" alt="">
            <h2>大长腿</h2>
                </div>`,
        methods: {
            fn() {
                console.log(this)
            }
        }
    });
    
    // Vue实例
    new Vue({
        el: '#app',
        data: {},
    })
</script>

Second, the data component of

1. Local or global pickup, a component may be reused many times, each component should have its own independent variable namespace
2. As the return value (a local scope is generated after performing the method), in order to achieve data components of

<div id="app">
    <div class="wrap">
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</div>
<script>
    let localTag = {
        template: `
        <div class="box" @click="fn">
            <img src="img/001.jpg" alt="">
            <h2>捶了美女{{ count }}下</h2>
        </div>
        `,
        data() { //局部或全局取件，一个组件可能会被复用多次，每个组件都应该有自己独立的变量名称空间
            return {
                count: 0,
            }
        }, // 数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）
        methods: {
            fn() {
                console.log(this);
                this.count++;
            }
        }
    };

    new Vue({
        el: '#app',
        data: {},
        components: {
            localTag,
        }
    });
</script>

Third, the parameter passing assembly

(A) from father to son

1. Subassembly by props custom component attributes (using reflection, to fill the string, but may be directly used as variable)
2. Renders subassembly within parent components, when rendered, the parent element to bind variables custom properties subassembly, whereby the variable value passed to the subassembly

<div id="app">
    <localTag :sup_data1='sup_data1' :supData2='sup_data2'></localTag>
</div>
<script type="text/javascript">
    
     let localTag = {
        props: ['dog', 'def', 'xyz'],
        props:['sup_data1', 'supdata2'],
        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
    };
    
    new Vue({
        el: '#app',
        data: {
            sup_data1: '数据1',
            sup_data2: '数据2'
        },
        components: {
            localTag,
        }
    })
</script>

(B) the parent child transmission

1. Data transfer by sending a request event
2. Custom events are part of sub-assemblies, subassemblies and bind event rendering method in the parent assembly, the event method implemented by the parent component
3. By subassembly this.@emit('自定义事件名'，触发事件回调的参数)trigger event custom event method, the callback parameter to the parent component
4. Parameters parent component trigger events way to get passed

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
    let localTag={
         data () {
            return {
                sub_data1: "数据1",
                sub_data2: '数据2'
            }
        },
        template: '<div @click="clickAction">发生</div>',
         methods: {
            clickAction () {
                this.$emit('send_action', this.sub_data1, this.sub_data2)
            }
        }
    }
   
    new Vue({
        el: '#app',
        methods: {
            receiveAction (v1, v2) {
                console.log(v1, v2)
            }
        }
    })
</script>

Four, JS supplement

(A) name and html conversion

1. In the instruction syntax vue object, such as the need to add background-color style attribute parameters to the tag, then the command syntax to be written backgroundColor
2. When custom components, the component name is hump body, then, the label html page is - lowercase

# 1. 在vue对象的指令语法中，如需要给标签添加style属性中的background-color 参数，那么在指令语法中要写成backgroundColor

<p :style="{backgroundColor:bgc,width:w}"></p>

# 2. 在自定义组件时，组件名是驼峰体，则，在html页面的标签则是 -小写


# 在html页面的组件标签
<my-tag></my-tag>

# script中的组件名
let myTag{}

(A) in the loop through the JS

（1） for in

• for inTraversal is the value of the key, awareness is traversing is the index of the array of objects orkey

// 例子

let scores = [
        { name: 'Bob', math: 97, chinese: 89, english: 67 },
        { name: 'Tom', math: 67, chinese: 52, english: 98 },
        { name: 'Jerry', math: 72, chinese: 87, english: 89 },
        { name: 'Ben', math: 92, chinese: 87, english: 59 },
        { name: 'Chan', math: 47, chinese: 85, english: 92 },
    ];

for (score in scores) {
        console.log(score)
    }

// 打印结果：0 1 2 3 4

（2）for of

• for ofValue is traversed, traversing the array of values, or objectvalue

// 例子
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }
    ;


for (score in scores) {
        console.log(score)
    }

// 打印结果：name math chinese english


for (score of scores) {
        console.log(score)
    }

// 打印结果：Bob 97 89 67

（3） each

• The following is in jQuery, each usage
• When the loop through the array, you need to pay attention

// 遍历数组
let scores = ['a','b',['c','d'],'e'];

each(scores,function(ind,val){
    consol.log(ind,val)
})

// 打印结果：0,['a'] 1,['b'] 2,[['c','d']] 3,['e']

// 遍历对象
let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }

each(scores,function(key,val){
    consol.log(key,val)
})

// 打印结果：name,Bob math,97 chinese,89 english,67

(Ii) addition and subtraction and data type conversion

js是一种弱语言，

1. 相加：
对于两数（一个字符串一个数字）相加，会先把两个数当成字符串相加，不行的话再都转成数字类型相加，都不行就是NaN

2. 相减：
对于两数（一个字符串一个数字）相减，因为字符串没有减法，所以会直接转成数字类型相减，不行的话就是NaN


3. 字符串转成数字：

如 '2' ——》 +'2'  或 Number('2')

(C) and variable length parameter

• JS no keyword arguments, so only python in similar *numbers. Only in JS using ...to represent*

Four, css supplement

1. 取消选中 

user-select: none

2. 鼠标变成小手 

cursor：pointer