vue-第五天

***结构渲染

1. 条件渲染指令v-if（与v-else）

<div v-if="loginbymobile">

    <label>手机登录</label>

    <input type="text" placeholder="请输入手机号">

</div>

1. V-else-if
2. key管理可复用元素

<div v-if="loginbymobile">

    <label>手机登录</label>

    <input type="text" placeholder="请输入手机号" key="bymobile">

</div>

为text添加key属性前，用户选择更换登录方式时文本框内容不会清除，因为本质上用的是同一个文本框，减少dom结构重构开销；而添加key属性之后，就能够标识文本框，实现切换时自动清除。

1. v-show本质上不是条件渲染，只是通过css规则“display：none”隐藏其他

<div v-show="loginbymobile">

    <label>手机登录</label>

    <input type="text" placeholder="请输入手机号" key="bymobile">

</div>

v-if的切换开销大，v-show输出渲染开销大，切换频繁：v-show，运行条件改变少：v-if

1. v-for

①基本列表<li v-for="item in list">{{item}}</li>

索引方式：<li v-for="(item,index) in list">{{index+1}}{{item}}</li>

括号后的空格！遗漏不生效！！！

②迭代对象数组

<div class="li" v-for="item in list" v-bind:key="item.productId">

    <img v-bind:src="item.picture">

    <div>

        <h3>{{item.name}}</h3>

        <p>{{item.price}}</p>

    </div>

</div>

v-bind绑定

弹性盒子布局display：flex

1. 对象属性列表

<div id="app">

    <ul v-for="(value,prop) in user">

        <li>{{prop}}:{{value}}</li>

    </ul>

</div>

let vm = new Vue({

    el: "#app",

    data: {

        user: {

            name: "jelly",

            age: 20,

            sex: "女"

        }

    }

})

Prop：属性名称

1. 数值范围

<p v-for="count in 10">第{{count}}个奇数是{{count * 2 - 1}}</p>

在一定数字内循环

1. 数组更新检测

不更新的两种情况：①索引修改：vm.items[5]=newValue②修改数组length属性

解决方法：set

//this.list[1] = 'Python'; 无法触发视图更新

this.$set(this.list, 1, 'Python')

//this.list.length = 1; 无法触发视图更新

this.list.splice(1)

***如果数组类型是对象，修改对象属性不会影响视图更新！

1. V-for中key的作用

<ul>

    <li v-for="item in list" v-bind:key="item.id"><input type="checkbox">{{item.todo}}</li>

</ul>

对于迭代元素，将key属性（主键）绑定到具有唯一性的属性后，迭代元素和数据模型一一对应，新元素会按顺序插入而不是就地更新。

Unshift函数

1. V-for&v-if（v-for优先级大于v-if 每次迭代都会执行v-if性能浪费）

因此如果有条件跳过循环时，要把v-if置于v-for的外层

1. 步骤

• e.target.dataset是指获取当前点击dom的值，若没有对应的值则取的是undefined
• e.currentTarget 是指注册了监听点击事件的组件，会获取有事件的那个元素

1：html确定页面结构和样式

2.数据模型分析