vue学习笔记，购物车清单制作

大家想不想知道vue的判断语句是怎么样的呢？真的超简洁：

 <!-- 使用判断语句来实现登录的切换 -->
        <span v-if="isusername" key="user">
            <label for="username">用户名</label>
            <input type="text" id = "username" placeholder="username login">
        </span>
        <span v-else>
            <label for="email" key="email">邮箱</label>
            <input type="text" id = "email" placeholder="email login">
        </span>
        <button @click = "changelogin">change login ways</button>

直接加载标签的属性后面一个v-if 一个v-else 就可以了，当然后面的就是一个Boolean值了，来我们接着往下讲：

这就是声明式编程，大家要习惯，其实还挺好用的，我们的判断语句直接v-if="表达式或者值"加载标签的属性后面就可以，非常的方便，不过如果是判断那种很多数据分类的类型，大家还是直接使用计算属性的好，更加规范；

这里实现了一个登录切换的案例，我们点击后面的按钮，然后会改变变量的值，浏览器就会渲染不同的登录界面：

changelogin(){
                //不要忘记在vue的函数里面使用属性的时候要加this
                this.isusername = !this.isusername
            }

 

 

 

这里有几个要注意的地方，key属性涉及到了vue底层做的事，在我们改变dom的时候，vue其实先生成了一个虚拟dom，为了降低性能的消耗，有一些值会复用，如果没有添加不同的key，那么上一次输入的数据没有清除点击切换的时候就会显示到下面的输入框中，有一些需求是不想要这个效果的；

for属性是用来点击聚焦的，就是我们的输入框，一般label会需要这个for；

这里要提到一下v-show的用法，它的用法和v-if类似，但不同的是消失方式，当我们切换次数多的时候我们要是用v-show，它其实只是为元素添加了一个行内样式display，将元素隐藏了，但开发中还是v-if用的多；

1、v-for遍历数组和对象、key在数组中的作用

我们可以使用v-for遍历数组或对象：

        <ul>
            <li v-for = "(item,index) in movies" :key="item">{{index}} - {{item}}</li>
        </ul>

这里使用了小括号，表明是含有下标的遍历；

movies:['唐僧','孙悟空','猪八戒','沙和尚'],
            addmovie(){
                this.movies.splice(2,0,'a')
            },

这里添加了key进行动态绑定，目的是为了节省性能的消耗，利用key可以阻止数据的复用，这里的元素和数组元素绑定了，所以可以浏览器可以标识，当我们开始添加数据时，浏览器就能找到我们想要插入数据到数组种的位置；

2、小案例：书单购物车

 

学过了v-for和动态绑定相关的内容之后，我们可以写一个购物车：这里是拥有显示书名、序号、总价、数量、移除功能的一个程序，

我们可以用对象数组的数据结构，这里就有一个长度为四的数组，里面存放有序号，书名，价格和数量的属性的对象：

books:[
                {
                    id:1,
                    name:'海底两万年',
                    price:100,
                    authors:'none'
                    ,
                    booknumber:1
                },
                {
                    id:2,
                    name:'海底两万年',
                    price:100,
                    authors:'none',
                    booknumber:1
                },
                {
                    id:3,
                    name:'海底两万年',
                    price:100,
                    authors:'none',
                    booknumber:1
                },
                {
                    id:4,
                    name:'海底两万年',
                    price:100,
                    authors:'none',
                    booknumber:1
                }
            ],

那么表格的数据是怎么放进去的呢？

<!-- 书单购物车 -->
        <div v-if="books.length">
            <table class="tstyle">
                <thead>
                    <th></th>
                    <th>name</th>
                    <th>price</th>
                    <th>authors</th>
                    <th>numbers</th>
                    <th>action</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td >{{item.id}}</td>
                        <td >{{item.name}}</td>
                        <td >{{item.price | getprice}}</td>
                        <td >{{item.authors}}</td>
                        <td>
                            <!-- 要是小于1，按钮会变灰色 -->
                            <button @click="decrement(index)" :disabled="item.booknumber <= 1">-</button>
                            {{item.booknumber}}
                            <button @click="increment(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeHandle(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 计算属性可不是方法，不能传参 -->
            <h2>总价格：{{totalprice}}</h2>
        </div>
        <h2 v-else>购物车为空</h2>
​

很简单，使用判断和v-for就可以啦，表格组件一般有一个标题栏和数据栏，我们分别使用thead和tbody，tbody中可以遍历的数据只有四个，后面的添加和移除是我们需要自己额外写上去的，几个按钮和文字就搞定；样式在下面：

.tstyle{
            width: 600px;
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-spacing: 0;/*去掉单元格间隙*/
        }
        .tstyle td {
            padding: 10px 20px;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
​
        }
        .tstyle th {
            padding: 10px 20px;
            background-color: #c0c0c0;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
​
        }

这是创建一个全实线分割的常用css样式，建议记下来后面也好用到；

那么这些数据处理的逻辑是怎么样的呢？

首先我们通过一个th进行遍历，有多少个对象就会有多少个th，而td就是其中一个对象的数据，所以我们可以自己引用，建议遍历的方式是带有缩印的，因为后面的价格什么计算是需要用到的，我们一般使用splice来进行数据的插入和删除：

            removeHandle(index){
                this.books.splice(index,1)
            }

添加书本数量就是一个简单的单击事件：

            increment(index){
                console.log(index)
                this.books[index].booknumber++;
            },
            decrement(index){
                if(this.books[index].booknumber>0){
                    this.books[index].booknumber--;
                }
                
                
            },

毕竟都是响应式的，所以我们改变数据的时候，浏览器也会显示响应的改变；如果书本数量减少到了1，我们可以让按钮变灰色；

:disabled="item.booknumber <= 1"

计算总价大家要想到使用计算属性，而不是函数：

            //1.5 计算购物车书单总价
            totalprice(){
                let total = 0
                for(let i = 0;i < this.books.length;i++){
                    total += this.books[i].price*this.books[i].booknumber
                }
                return total
            }

遍历一下数组，然后累加价格返回即可；

3、radio和v-model

v-model是一个双向绑定的指令，我们可以加上这个指令，传的是一个参数：

      <!-- 如果不写value的话，那么sex会一直为空字符串，因为单选框也是需要内容代表的 -->
      <input type="radio" v-model="sex" name="sex" value="男">
    data:{
      message:'动态绑定',
      sex:'男'
    },

然后我们改变输入框里面的内容时，sex参数的值也会随之发生变化；当然该sex的值，输入框中的内容也会变化；

radio是input的一种类型，叫做单选框，我们可以借助v-model绑定同一个参数来实现互斥；

    <!-- 1.2 单选框 -->
    <label for="male">
      男
      <!-- 如果不写value的话，那么sex会一直为空字符串，因为单选框也是需要内容代表的 -->
      <input type="radio" v-model="sex" name="sex" value="男">
    </label>
    <label for="female  ">
      女
      <input type="radio" v-model="sex" name="sex" value="女">
    </label>
    <h2>您选择的性别为：{{sex}}</h2>

4、单选框和复选框

CheckBox就是复选框，同样是input的功能，那么我们怎么将它们和变量绑定起来呢？

单选功能绑定变量，而多选就可以是数组，CheckBox也可以是单选功能，比如用户许可协议：

    <!-- 复选框的使用 -->
    <input type="checkbox" value="篮球" v-model="hobby">篮球
    <input type="checkbox" value="听音乐" v-model="hobby">听音乐
    <input type="checkbox" value="跑步" v-model="hobby">跑步
    <input type="checkbox" value="打游戏" v-model="hobby">打游戏
    <label for="">
      <input type="checkbox" value="agreement" v-model="agreement">已阅读用户许可协议
    </label>
    <div>
      您的爱好为：{{hobby}}
    </div>
    <button :disabled="!agreement">下一步</button>

如果我们选择了哪些爱好，vue就会将其添加到数组中，这里就是hobby这个数组：

      hobby:[],
      agreement:false,
​

还有一个就是select，也具有单选和复选的功能，但是它是下拉框的形式：

 

 

<!-- 1.2 select 标签与v-model  -->
    <select name="" id="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="橙子">橙子</option>
    </select>
    <label for="">您选择了：{{fruit}}</label>
    <!-- 多选 -->
    <select name="" id="" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="橙子">橙子</option>
    </select>
    <label for="">您选择了：{{fruits}}</label>
    <!-- 1.3 值绑定 -->
    <label v-for="item in originhobby">
      <input type="checkbox" value="item">{{item}}
    </label>
    <h2>您绑定的是:{{originhobby}}</h2>

要注意的是，我们直接将数值绑定在select上面就可以了；后面的值绑定的就是我们不将数据写死的操作，爱好的选项是由一个数组存储起来了，后期也方便修改，这里就直接遍历渲染出多选框；

5、v-model的修饰符，它的修饰符有lazy（懒加载）、number（设置为数字类型）、trim（给变量去除空格）；

使用的方式是靠v-model直接点出来的：

    <label for="">
      <input type="text" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2>

懒加载的作用就是我们不会已修改就刷新变量的值，而是等我们回车或者是失去焦点的时候才刷新；

    <label for="">
      <input type="text" v-model.number="message">
    </label>
    <h2>{{typeof message}}</h2>

这里我们无论类型设置为字符串还是数值，当我们填入数字后变量的类型就会被设置为数字类型；

    <label for="">
      <input type="text" v-model.trim="message">
    </label>
    <h2>{{typeof message}}-{{message}}</h2>

如果我们往输入框中填入了空格，vue会剔除变量的空格；

说实话，我们都是爱学习的好同学 。。。

 我恨不得全讲了，不过怎么可能呢？于是呢，我就讲了一点点；里面的购物车还蛮有意思的哈，大家千万不要错过哦。