Vue学习笔记(二)

  • 2018-07-25
  • 0
  • 0

Vue学习笔记

作者：黄志成

博客：地址

内置指令

v-cloak & v-once

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div v-cloak id="app">
        <div v-once>
            {{text}}
        </div>
        <input type="text" v-model="text"></input>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            text: "Hcheng's Vue course"
        }
    });
</script>
</html>

v-cloak 是解决初始化慢导致页面闪动的最佳实践.

v-once 只让元素渲染一次,之后数据变动则不再渲染

v-if & v-else-if & v-else

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div v-cloak id="app">
        <h1 v-if="status == 0"> status 是 0 显示该行</h1>
        <h1 v-else-if="status == 1"> status 是 1 显示该行</h1>
        <h1 v-else> status 是 其他 显示该行</h1>
        <input type="text" v-model="status"></input>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            status: "0"
        }
    });
</script>
</html>

Vue在渲染元素时,出于效率考虑,会尽可能复用已有元素非重新渲染

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div v-cloak id="app">
        <input type="text" v-if="status == 0" placeholder="这是status0"></input>
        <input type="text" v-else placeholder="这是status-其他"></input>
        <button @click="changeStatus">修改status</button>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            status: "0"
        },
        methods: {
            changeStatus: function () {
                this.status = this.status == "0" ? "1" : "0" ;
            }
        }
    });
</script>
</html>

点击切换按钮的时候，虽然Dom变了，但是之前在输入框的内容没有变,说明被复用了.

如果不想这么做,可以使用vue 提供的 key属性,它可以让你决定是否复用元素

<input type="text" v-if="status == 0" placeholder="这是status0" key="status0"></input>
<input type="text" v-else placeholder="这是status-其他" key="statusOther"></input>

v-show

v-show用法和v-if基本一致,只不过v-show是改变元素css属性.让他隐藏并不是移除.

v-show不能在template上使用

v-for

当需要对一个数组遍历的时候就会用到v-for命令它的表达式需要配合 in 使用

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in items">{{index}} -{{ item.name }}</li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {'name': 'iphone6'},
                {'name': 'iphone7'},
                {'name': 'iphone8'},
                {'name': 'iphone9'}
            ]
        }
    });
</script>
</html>

这样就会在页面上显示

  • 0 - iphone6

  • 1 - iphone7

  • 2 - iphone8

  • 3 - iphone9

除数组之外，对象也可以遍历

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in items">{{ index }} - {{ key }} : {{ value }}</li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            items: {
                name: 'huangzhicheng',
                blogUrl: 'http://www.webhuang.cn'
            }
        }
    });
</script>
</html>

v-for 还可以迭代整数 v-for="n in 10"

数组操作

Vue提供了一组观察数组变异的方法,使用它们改变数组也会触发视图更新

  • push() 尾部追加一个元素
  • pop() 弹出尾部一个元素
  • shift() 删除头部第一个元素
  • unshift() 头部追加一个元素
  • splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
  • sort() 排序
  • reverse() 翻转

还有些方法不会改变原数组

  • filter()
  • concat()
  • slice()
<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in items">{{index}} -{{ item.name }}</li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {'name': 'iphone6'},
                {'name': 'iphone7'},
                {'name': 'iphone8'},
                {'name': 'mi6'}
            ]
        }
    });

    app.items = app.items.filter(function (item) {
        return item.name.match(/iphone/)
    })
</script>
</html>

上面的例子是匹配含有iphone的name,结果是成功过滤了mi6。

有些变动的数组是不会触发视图更新的.

  1. 通过索引直接设置项
  2. 修改数组长度

解决第一个办法可以使用Vue内置方法 set

下面给出一个购物车的Demo吧

image

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <table border="1">
          <tr>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(good,index) in items">
            <td>{{good.name}}</td>
            <td>{{good.price}}</td>
            <td>
                <button @click="addGoodsNum(index)">+</button>
                <input type="number" v-model.number="good.num"></input>
                <button @click="reduceGoodsNum(index)">-</button>
            </td>
            <td><button @click="deleteGoods(index)">移除</button></td>
          </tr>
        </table>
        <h3>总价：<span>{{totalPrice}}</span>元</h3>

        <div>
            <b>送货时间：</b>
            <input type="radio" name="day" v-model="picked" value="周一-周五">周一-周五
            <input type="radio" name="day" v-model="picked" value="双休">双休

            <h4>你选择的是：{{ picked }}</h4>
        </div>

        <div>
            <b>附加商品</b>
            <input type="checkbox" v-model="checked" value="手机套">手机套
            <input type="checkbox" v-model="checked" value="手机膜">手机膜
            <input type="checkbox" v-model="checked" value="碎屏险">碎屏险
            <br />
            <h4>你选择的是：{{ checked }}</h4>
        </div>

        <div>
            <b>支付方式:</b>
            <select name="payWay" v-model="selected">
                <option disabled="" value="请选择">请选择</option>
                <option value="支付宝">支付宝</option>
                <option value="微信">微信</option>
            </select>
            <h4>你选择的是：{{ selected }}</h4>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {name: 'iphone6', price: 2999, num: 1},
                {name: 'iphone7',price: 3999, num: 2},
                {name: 'iphone8',price: 4999, num: 1},
                {name: 'mi6',price: 1999, num: 2},
            ],
            picked: "周一-周五",
            selected: "支付宝",
            checked: []
        },
        computed: {
            totalPrice: function () {
                var total = 0;
                _this = this;

                for (var i = 0; i < _this.items.length; i++) {
                    var item = _this.items[i];
                    if (item.num <= 0) {
                        _this.items.splice(i, 1);
                    }
                }

                for (var i = 0; i < _this.items.length; i++) {
                    var item = _this.items[i];
                    total += item.price * item.num;                 
                }

                return total;
            }
        },
        methods :{
            deleteGoods: function (index) {
                this.items.splice(index, 1);
            },
            addGoodsNum: function (index) {
                this.items[index].num++;
            },
            reduceGoodsNum: function (index) {
                this.items[index].num--;
            }
        }
    });
</script>
</html>

下一节开始学习Vue中的组件部分。是最核心最精彩的部分.

评论

还没有任何评论，你来说两句吧

友情链接 - Theme by Qzhai