vue第二天

最新推荐文章于 2021-04-23 16:48:50 发布

qq_40262972

最新推荐文章于 2021-04-23 16:48:50 发布

阅读量297

点赞数

分类专栏： vue 文章标签： vue第二天

本文链接：https://blog.csdn.net/qq_40262972/article/details/93521336

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue初学day01

vue属性

vue属性

1.除了昨天的v-for还有v-bind，直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .big{
            font-size: 2em;
        }
        .small{
            font-size: 1em;
        }
        .red{
            background: red;
        }
        .grey{
            background: grey;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">//v-bind   可以简写为：冒号，如果不写v-bind，浏览器会把后面的属性当做字符串，不会去Vue实例中去找其对应的值
        <p class="small red">这是p1小红</p>
        <p :class="'big'">这是p2大</p>    
        <p v-bind:class="['big','grey']">这是p2大灰</p>
        <p :class="['grey',isBig?'big':'']">这是p2大灰</p>
        <p :class="{grey:true,big:isBig}">这也是另一个大灰</p>
        <p :class="[{grey:true,big:isBig}]">这是另一个大灰</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isBig: true
            }
        })    
    </script>
</body>
</html>

2.这里通过一个实例来说明vue中的各个属性
每次点击按钮num++
每次点击按钮时，num++，其他的数字是num的2倍加1

<p><button @click="++num">点击num++</button></p>

①第一种方法通过vue中的methods处添加一个事件

new Vue({
   el: "#app",
    data:{
        num: 1,
        msg: "hello"
    },
    methods: {
        doubleNum(){//<p>doubleNum: {{doubleNum()}}</p>
            console.log("doubleNum...");
            return this.num*2+1;
        }
    }
})

这种方法简单但是有个弊端，当data中的无关数据，即msg改变时，doubleNum(),会重新计算一次。
②于是第二种方法出现了，那我们监听数据的改变，每当num改变时，再进行计算


new Vue({
    el: "#app",
    data:{
        num: 1,
        msg: "hello",
        watchNum: ""
    }
    watch: {//  html中<p>watchNum: {{watchNum}}</p>
        /* num(newValue,oldValue){
            console.log("watchNum...");
            this.watchNum = newValue*2+1;
        } */    //这种写法，方法不会立即执行，所以在页面上没有数据
        num: {//写immediate，值为true时，页面加载完立即执行
            immediate: true,
            handler(newValue,oldValue){  //改变时候的新值，和旧值
                this.watchNum = newValue*2+1;
            }
        }
    }
})

弊端：非常明显，我们创建了一个新的参数watchNum用来存储加倍后的值，这显然不是最好的办法
③于是第三种方法出来了，通过计算属性computed实现

new Vue({
    el: "#app",
    data:{
        num: 1,
        msg: "hello"
    }
    computed: {
        computedNum(){ //html中<p>computed: {{computedNum}}</p>注意，这里没有括号
            console.log("computed...");
            return this.num*2+1;
        }
    }
})

完美，computed 计算属性，会根据现有数据生成一个新的数据，并且两者会产生关联，建立永久性的缓存，当无关数据变化时，他不会重新计算，直接从缓存里面取之前的值
完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://www.forgettime.cn/demo/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>num:{{num}}</p>
        <p>{{num*2+1}}</p>
        <p>doubleNum: {{doubleNum()}}</p>
        <p>watchNum: {{watchNum}}</p>
        <p>computed: {{computedNum}}</p>
        <p><input type="text" v-model="msg"></p>
        <p><button @click="++num">点击num++</button></p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                num: 1,
                msg: "hello",
                watchNum: ""
            },
            methods: {
                doubleNum(){
                    console.log("doubleNum...");
                    return this.num*2+1;
                }
            },
            computed: {
                computedNum(){
                    console.log("computed...");
                    return this.num*2+1;
                }
            },
            watch: {
                /* num(newValue,oldValue){
                    console.log("watchNum...");
                    this.watchNum = newValue*2+1;
                } */
                num: {
                    immediate: true,
                    handler(newValue,oldValue){
                        this.watchNum = newValue*2+1;
                    }
                }
            }
        })    
    </script>
</body>
</html>

3.当我们试图在input框中修改计算属性的值时，vue会报错
计算属性was assigned to but it has no setter.
所以重写计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://www.forgettime.cn/demo/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{computedMsg}}</p>
        <p><input type="text" v-model="msg"></p>
        <p><input type="text" v-model="computedMsg"></p>//在这里修改会报错
        <p><input type="text" v-model="computedMsg1"></p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            computed: {
                computedMsg(){//只能获取
                    return this.msg;
                },
                computedMsg1: {
                    get(){
                        return this.msg;
                    },
                    set(val){//改变计算属性的话写set
                        console.log(val);
                        this.msg = val;
                    }
                }
            }
        })    
    </script>
</body>
</html>

qq_40262972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第二天

vue初学day01vue属性vue属性1.除了昨天的v-for还有v-bind，直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
复制链接

扫一扫