KoalaShane

前端小虾米,在成为大神的路上,不断的爬行着!

Vue.js 权威指南 学习笔记 — 计算属性、表单

计算属性

1、计算属性就是当其依赖属所以,如果不用缓存的话,可以用方法(methods)代替。性的值发生变化时,这个属性的值会自动更新,与它相关的DEMO部分也会同步自动更新。

2、计算属性是基于它们的依赖进行缓存的,书中关于关闭缓存cache:false 属性在Vu2中被移除。

3、计算属性只有在它的相关依赖发生改变时才会重新求值。

4、v-repeat 在Vue2中移除。

总结:在需要做大量的计算,处理复杂的逻辑业务时,可以使用计算属性避免多次执行的getter,所以,如果不用缓存的话,可以用方法(methods)代替。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
    <style>
        [v-cloak] {
            display: none;
        }
        
        .mt5 {
            margin-top: 50px
        }
    </style>
</head>

<body>
    <h2>计算属性</h2>
    <h3>计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。</h3>
    <div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        <p>
            didi = {{didi}},family = {{family}},didiFamily = {{didiFamily}}
        </p>

        <div class="mt5">
            <h2>计算属性getter不执行的情景</h2>
            <h3>当包含计算属性的节点被移除,并且模板中没有其他地方引用时,对应的getter方法不会执行</h3>
            <button @click='toggleShow'>Toggle show total Price</button>
            <!-- 一直出现在模板中, 不会条件性隐藏 -->
            <p v-cloak>{{totalPrice}}</p>
            <p v-if="showToal">Total Price = <span v-cloak>{{totalPrice}}</span></p>

        </div>
        <div class="mt5">
            <del>v-repeat 已经废除 </del>
        </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            didi: 'didi',
            family: 'family',
            showToal: true,
            basePrice: 100
        },
        computed: {
            didiFamily: {
                // 一个计算属性的getter
                get: function() {
                    // 'this' 指向 vm 实例
                    return this.didi + this.family
                },
                // 一个计算属性的setter
                set: function(newVal) {
                    var names = newVal.split('')
                    this.didi = name[0]
                    this.family = names[1]
                }
            },
            totalPrice: function() {
                return this.basePrice + 1
            },
            fulltext: function() {
                return 'item' + this.text
            }

        },
        methods: {
            toggleShow: function() {
                this.showToal = !this.showToal
            }
        }

    })
</script>

</html>

Demo地址:https://github.com/koalashane/vuejs-code/tree/master/chapter4

官方API地址:https://cn.vuejs.org/v2/guide/computed.html

表单

表单主要使用v-model进行值绑定。

如果项目是使用Vue和iView进行开发时,在使用DatePicker 组件时,绑定使用on-change,使用v-model获取的值总是少一天。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单控件绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="example">
        <h2>表单的基本用法</h2>
        <h4>1、text</h4>
        <p> Welcom {{name}} join DDEE</p>
        <input type="text" v-model="name" placeholder="join DDEE">

        <div class="checkbox">
            <h4>2、checkbox</h4>
            <form>
                <input type="checkbox" id="flash" value="flash" v-model="bizLines">
                <label for="flash">快车</label>
                <input type="checkbox" id="premium" value="premium" v-model="bizLines">
                <label for="premium">专车</label>
                <input type="checkbox" id="bus" value="bus" v-model="bizLines">
                <label for="bus">巴士</label>
            </form>
            <p>选中的数据是: <span v-cloak>{{ bizLines | json}}</span></span>
            </p>
        </div>

        <div class="radio margin-top-4">
            <h4>3、radio</h4>
            <form>
                <input type="radio" id="flash" value="flash" v-model="radiomodel">
                <label for="flash">快车</label>
                <input type="radio" id="premium" value="premium" v-model="radiomodel">
                <label for="premium">专车</label>
                <input type="radio" id="bus" value="bus" v-model="radiomodel">
                <label for="bus">巴士</label>
            </form>
            <p>选中的数据是: <span v-cloak>{{ radiomodel }}</span></p>
        </div>

        <div class="selsect margin-top-4">
            <h4>4、selsect</h4>
            <select v-model="selected" multiple>
                <option value="car" selected>汽车</option>
                <option value="book">书本</option>
                <option value="box">盒子</option>
            </select>
            <p>选中的数据是: <span v-cloak>{{ selected }}</span></p>
            <div class=" margin-top-4">
                <select v-model="selected2">
                    <option  v-for="item in options" :value="item.value" >{{ item.text }}</option>
                </select>
                <p>选中的数据是: <span v-cloak>{{ selected2 }}</span></p>
            </div>
        </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            name: 'koalashane',
            bizLines: [],
            radiomodel: '',
            selected: [],
            selected2: "",
            options: [{
                text: '红色',
                value: 'red'
            }, {
                text: '黑色',
                value: 'black'
            }, {
                text: '蓝色',
                value: 'blue'
            }]
        }


    })
</script>

</html>

Demo地址:https://github.com/koalashane/vuejs-code/tree/master/chapter5

官方API地址:https://cn.vuejs.org/v2/guide/forms.html

嗯,重要的话说三遍。微笑

我爱代码,我爱学习。

我爱代码,我爱学习。

我爱代码,我爱学习。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/KoalaShane/article/details/79953290
文章标签: vue2  vue from
个人分类: Javascript
上一篇Vue.js 权威指南 学习笔记 — 第3章 指令 ( 附带 demo 示例代码 )
想对作者说点什么? 我来说一句

Vue.js权威指南 完整版 pdf

2018年02月05日 111.37MB 下载

Vue.js权威指南.pdf

2018年02月05日 113.86MB 下载

Vuejs权威指南

2018年02月04日 46.66MB 下载

Vue.js权威指南 pdf

2018年04月07日 139.79MB 下载

Vue.js实战 书籍

2018年03月14日 196.74MB 下载

Vue.js权威指南》.pdf

2018年02月05日 139.79MB 下载

没有更多推荐了,返回首页

关闭
关闭