Vue.js实战

指令

什么是指令

指令，directives，是vue非常常用的功能，在template里。

• 都是以v-开头
• 不是自己所为html元素，比如假设指令叫v-abc，没有这种写法，这是组件（component）的写法，组件也是vue的一个强大功能
• 都是在html元素里写，比如
  或者

  这样子的写法居多
• 主要都是用于决定是否渲染，怎么渲染的功能

v-if指令

• html元素根据v-if的结果是否为真从而决定是否渲染
• 放在html元素里，比如div，也可以放在vue的<template>里（v-show不行）
• 用等于号赋予表达式
• 表达式需要用等号包裹
• 表达式里直接写变量名称，变量不需要再用等号包裹，比如
  ，如果status的值为1，这个div就会渲染显示，否则不显示
• 如果是字符串，可以加单引号，这么写：

  ...

注意，cnblogs里不能直接写template标签，要用markdown的单引号包裹起来，否则后面的内容不显示。

v-else-if和v-else指令

• 必须和v-if指令配置使用
• 写法为比如：
  ...

v-for指令

• 列表的循环渲染指令
• 必须用in来使用
• 比如：

购物车

下面通过vue实现一个购物车的增加、减少商品数量，并且自动计算总价格的功能。

实现后的样子如下图：

html

html的代码如下。

  <div id="app" v-cloak>
            <!-- vue指令：v-if，放在标签中，如果为真则该标签会显示 -->
            <template v-if="list.length">
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>商品名称</th>
                            <th>商品单价</th>
                            <th>商品数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- vue的指令：v-for -->
                        <tr v-for="(item, index) in list">
                            <td>{{ index + 1 }}</td><!-- vue都是用{{}}来使用变量 -->
                            <td>{{ item.name }}</td>
                            <td>{{ item.price }}</td>
                            <td>
                                <!-- vue指令：v-on，绑定事件 -->
                                <button v-on:click="handleReduce(index)">-</button>
                                {{ item.count }}
                                <!-- v-on的语法糖：@，一般都是用@，不写v-on -->
                                <button @click="handleAdd(index)">+</button>
                            </td>
                            <td><button @click='handleRemove'>移除</button></td>
                        </tr>
                    </tbody>
                </table>
                <div>总价：￥ {{ totalPrice }}</div>
            </t emplate>
            <!-- v-if放在template标签，而v-else可以放在div，也就说不需要有标签的对应关系。
            但是需要有层次的对应关系，如果放在div外，则不生效。 -->
            <div v-else>您的购物车为空</div>
        </div>

js

        var app = new Vue({
            el: '#app',
            data: {
                // list是一个数组
                list: [
                    // id等不需要引号
                    { id: 1, name: 'iphone XS', price: 6599, count: 1 },
                    { id: 2, name: 'iphone XR', price: 4399, count: 1 },
                    { id: 3, name: 'iphone XS Max', price: 7499, count: 1 }
                ]
            },
            computed: {
                totalPrice: function () {
                    return this.list[0].price * this.list[0].count;
                }
            },
            methods: {
                // 方法定义用：号，不能用=号
                handleAdd: function (index) {
                    this.list[index].count++;
                },// 方法之间必须有逗号分隔
                handleReduce: function (index) {
                    if (this.list[index].count > 0)
                        this.list[index].count--;
                },
                handleRemove: function (index) {
                    // js的spilce函数：(start: number, deleteCount?: number)，vscode会提示详细解释。
                    this.list.splice(index, 1);
                }
            }
        })

css

        table{
            border: 1px solid #e9e9e9;/*表格框宽度、显示、颜色*/
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }
        th, td{/*表格头和表格体的样式*/
            padding: 8px 16px;
            border: 1px solid #e9e9e9;/*深灰色*/
            text-align: left;
            background: white;/*白色*/
        }
        th{/*表格头的样式*/
            background: #f7f7f7;/*表格头的底色：浅灰色*/
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
        }

2019.1.6

参考资料

《Vue.js实现》清华大学出版社