vueDay02(单向绑定、双向绑定、条件渲染、循环渲染)

vue中的响应式数据(单项绑定)

1.属性绑定
2.样式绑定
3.插值表达式
等。。。。。。

vue中的响应式数据(动态响应)是怎么实现的

1.劫持了data对象中的成员
2.采用发布者-订阅者的设计模式 然后重写了成员的set方法;
3.核心是es5的Object.defineProperty静态方法;
4.vue2.0使用的Object.defineProperty 而vue3.0 用的es6的proxy 不仅仅劫持了方法（可以通过this.函数名获取函数，和获取data的数据一样）;

双向数据绑定

描述:在页面交互中，有些值用户可以修改，如：input的value值 如果只对input进行响应式数据绑定的话，那么在用户输入值是不会改变vue中的data值；而双向数据绑定就是在用户输入的值与vue中的data值一致；不管是用户改变还是我们修改;

vue指令 v-model = '绑定的data属性'
//底层实现
<div class="box">
        <input type="text" :value='inputValue' @input='changeValue'>
        <button @click='send'> 发送</button>
        <!-- 语法糖 -->
        <input type="text" v-model='inputValue'>
    </div>
    <script>
        new Vue({
            el: '.box',
            data: {
                inputValue: '双向数据绑定'
            },
            methods: {
                changeValue(e) {
                    this.inputValue = e.target.value;
                },
                send() {
                    console.log(this.inputValue);
                }
            },

        })
        </script>

条件渲染

指令:v-if='flag' //flag为true时渲染该节点不执行其他else或else if节点代码
	v-else-if='flag2'//同上
	v-else
	v-show='flag'//flag为true时渲染该节点;
<div class="box">
        <div v-show="flag">
            nihao
        </div>
        <div v-if='flag'>
            你好
        </div>
        <div v-else-if='!flag'></div>
        <div v-else></div>
        <button @click='fn'>diani</button>
    </div>
    <script>
        new Vue({
            el: '.box',
            data: {
                flag: true
            },
            methods: {
                fn() {
                    this.flag = !this.flag;
                }
            },
        })
    </script>

v-if 和v-show的区别

v-if:false 
会在文档树以及呈现树(文档树与css规则树结合产生)中消失，原理是用注释把组件销毁实现
v-show:
false只会在呈现树中消失 而在文档树中会保留 ，原理用css的display设为none实现
v-show具有较高的渲染消耗 
v-if 具有较高的切换消耗(不存在内存中) 

循环渲染

v-for='`在这里插入代码片`el in arr'//循环会把绑定的节点后代全部循环一遍;
:key=''// 主要作用是对组件的区分.
//v-for 搭配 v-if  放在一起时有版本限制，当放在一起时v-for优先执行;
<h1 v-for='el in arr' v-if='el[id]!=1'></h1>//版本限制;
<h1 v-for='el in arr' >
    //template 是空标签 不会在节点树中 如果用div会每次循环都有一个多余的div;
    <template v-if='el[id]!=1'>
        数据	
    </template>
</h1>

循环渲染与key值

 <div class="box">
        <div v-for='el in arr'>
            <div v-html='el.text'></div>
            <div v-for='secarr in arr2'>
                <div v-if='el.id==secarr.a_id'>{{secarr.text}}</div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '.box',
            data: {
                arr: [
                    { id: 1, text: '这是id为1的商品' },
                    { id: 2, text: '这是id为2的商品' },
                    { id: 3, text: '这是id为3的商品' },
                    { id: 4, text: '这是id为4的商品' },
                ],
                arr2: [
                    { id: 1, a_id: 1, text: '这是外键为1的商品' },
                    { id: 2, a_id: 1, text: '这是外键为1的商品' },
                    { id: 3, a_id: 2, text: '这是外键为2的商品' },
                    { id: 4, a_id: 2, text: '这是外键为2的商品' },
                ]
            }
        })

案例:

  <div class="bigbox">
        <ul>
            <li v-for='el in arr'>
                <p v-html='el.text'></p>
                <img :src="el.imgsrc">
                <div v-for='comment in arr2'>
                    <img :src="comment.imgsrc">
                    <div v-html='comment.text'></div>
                </div>
            </li>
        </ul>
   </div>