特殊标签的使用方式、数据响应式原理

1.特殊标签的使用方式

1.1 标签嵌套规则

1.p标签不能嵌入其他块标签

2.a标签不能嵌入a标签

3. table不能嵌入非tr标签

4. ul 内之呢个嵌入li

。。。

对于组件来说,table标签只能嵌套tr标签 自定义组件不能在table标签里面被识别；在tablle中放入t组件，结果会把组件放到table外面；

1.2 解决方法

代替直接使用组件标签对的方式，选择使用设置标签的is属性为组件名，改变该标签；

1.3 代码演示

<div id="app">
    <table border="1">
        <tr is="my-com" v-for="n,i in list" :l='n'></tr>
    </table>
</div>
<template id="tem">
    <tr>
        <td>{{l.name}}</td>
        <td>{{l.age}}</td>
        <td>{{l.sex}}</td>
    </tr>
</template>

Vue.component('myCom', {
    template: '#tem',
    props: ['l']
})

new Vue({
    el: '#app',
    data: {
        list: [{
            name: '大刀王五',
            age: 12,
            sex: '男'
        }, {
            name: '发发',
            age: 74,
            sex: '男'
        }, {
            name: '夏利飞到',
            age: 35,
            sex: '男'
        },
        ]
    },
    methods: {

    },
})
Math.random() * 99;

2.总结props传值，this.$emit(）传值、使用is属性改变标签的命名规范；

props传值：命名的自定义属性值使用横线分割法，接受props可以可直接使用小驼峰命名接收；

this.$emit() :命名自定义事件名字最好使用横线分割法，这样在组件标签对上书写自定义事件时也可以直接使用横线分割法；

使用is属性改变标签，is的属性值于组件名相同，js中组件名使用小驼峰命名；使用组件标签和is属性值设置一样都使用横线分割法;

标签中，标签名和属性名都使用横线分割法；

3. 数据响应式原理

3.1 模拟数据响应式原理

使用Object.defineProperty方法；

Object.definedProperty('变量名',{get(){   },set(i){   }})

3.2 代码演示

<div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>
        <button onclick="f1()">点击修改</button>
</div>

// 定义初始化方法
function initData() {
    var name = null;
    var age = "";
    // 给name和age添加set和get函数
    // set函数目的 当修改对象的name属性时候,触发set函数，之后调用render函数，就能达到页面更新的结果
    // get函数目的 使用对象的name属性;
    Object.defineProperty(window, 'name', {
        set(v) {
            // v参数就是传值的属性值；修改属性值
            name = v;
            // 页面更新的方法
            render();
        },
        get() {
            return name;
        }
    })

    Object.defineProperty(window, 'age', {
        set(v) {
            // v参数就是传值的属性值；修改属性值
            age = v;
            // 页面更新的方法
            render();
        },
        get() {
            return age;
        }
    })

}

// 获取模板字符串
var div = document.getElementById('app');
var htmStr = div.innerHTML;

initData();

// 给name和age赋值
name = "张三"; //给name属性赋值，调用name的set方法
age = 10;
// 页面更新的方法
function render() {
    var reg = /{{([0-9a-zA-Z_]+)}}/g //{{name}}
    var arr = [];
    var temp = htmStr;
    while (arr = reg.exec(temp)) {
        console.log(arr);
        var v1 = window[arr[1]]; //张三
        console.log(v1);
        temp = temp.replace('{{' + arr[1] + '}}', v1) //{{name}} 张三
        div.innerHTML = temp;
    }
}

function f1() {
    name = '李四';
    age = 36;
}

/* 当组件创建完之后 为组件添加data选项，vue会对data选项字段进行遍历，并且通过object.defineProperty()设置set和get方法,在属性进行修改的时候；
    调用set方法，并且在set方法里面添加页面更新的方法，这个时候数据再发生变化了，界面就会随之更新;            
*/