vue02——vue中v-XXX指令

最新推荐文章于 2022-09-19 11:48:22 发布

_老逄

最新推荐文章于 2022-09-19 11:48:22 发布

阅读量518

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45134087/article/details/92846906

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-bind

v-text 等价于 {{}}

v-bind 属性绑定指令

v-bind

属性绑定指令，可设置行内样式
格式：v-bind:style="{background:bg}"
{{bg}} == 

<body>
    <div id="app">
        <p>{{bg}}</p>
        <p v-text="bg"></p>
        <p style="background: red">{{bg}}</p>
        <p v-bind:style="{background:bg,fontSize:'30px'}">{{bg}}</p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                bg:"red"
            }
        })
    </script>
</body>

v-bind-Class

v-bind:class=[‘class1’, ‘class2’]

v-bind:class=[‘class1’,(三目运算)]

v-bind:class={class1:true,class2:获取数据} //数据为bool类型

<body>
    <div id="app">
        <p class="red small">p1</p>
        <p v-bind:class=['red','small']>p2</p>
        <p v-bind:class=['red',(isBig?'big':'')]>p3</p>
        <p v-bind:class={red:true,big:isBig}>p3</p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                isBig:true
            }
        })
    </script>
</body>

v-bind-style

v-bind 可以简写成：冒号
img :src = “imgSrc” 前面不加冒号无效，会原样输出“imgSrc”
绑定常用的属性 id/class/style img:src属性

<body>
    <div id="app">
        <p v-bind:id="2*3" :style="{background:bg}">p标签</p>
        <p><img src="imgSrc" alt=""></p><!-- 无效 -->
        <p><img :src="imgSrc" alt=""></p><!-- 有效 -->
        <p>{{imgSrc}}</p><!-- imgSrc原样输出 -->
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                bg:"pink",
                imgSrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560837330028&di=3662628ed614ceeae33cb4c3a8c8e98f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F10%2F20161110182723_4m3jT.thumb.700_0.jpeg"
            }
        })
    </script>
</body>

vue_watch

案例做一个num*2+1的效果

1.{{num*2+1}} 可以实现效果，但是不方便维护管理
2.直接封装成一个函数，然后函数内部返回 this.num*2+1
优点：好处就是方便维护与管理了
缺点：缺点就是无关数据变化的时候，doubleNum这个方法也会被调用了。
3.可以通过设置watch监听器实现这个功能。
watch可以监听现有数据的变化，然后一旦现有数据发生变化了，就会让一个新的数据改变
逻辑上比较复杂点。

<body>
    <div id="app">
        <p>num: {{num}}</p>
        <p>{{num*2+1}}</p>
        <p>{{doubleNum()}}</p>
        <p>watchNum: {{watchNum}}</p>
        <p><input type="text" v-model="msg"></p>
        <p><button @click="++num">点击num++</button></p>
    </div>
    <script src="./base/vue.min.js"></script>
    <script>
        /*
            做一个效果： num*2+1  效果
                1.{{num*2+1}} 可以实现效果，但是不方便维护管理
                2. 直接封装成一个函数，然后函数内部返回  this.num*2+1
                    好处就是方便维护与管理了
                    缺点就是无关数据变化的时候，doubleNum这个方法也会被调用了。
                    无关数据变化的时候，就会引发视图渲染，doubleNum方法就会被执行了！
                3.  可以通过设置watch监听器实现这个功能。
                    watch可以监听现有数据的变化，然后一旦现有数据发生变化了，就会让一个新的数据改变。
                    逻辑上比较复杂点。
        */

        // var num  =1000;
        new Vue({
            el:"#app",
            data:{
                num:1,
                msg:"hello world",
                watchNum:"" ,//声明一条新的数据
            },
            methods:{
                doubleNum(){ 
                    return this.num*2+1
                }
            },
            watch:{
                // num:function(newValue,oldValue){
                //     this.watchNum = newValue*2+1
                // }
                num:{
                    immediate:true,//第一次就会监听
                    handler(newValue,oldValue){
                        this.watchNum = newValue*2+1
                    }
                }
            }
        })
    </script>
</body>

vue_computed

computed：计算属性

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

和watch的区别：watch监听是单个的每次监听只能监听一个变量的改变

<body>
    <div id="app">
        <p>num: {{num}}</p>
        <p>{{num*2+1}}</p>
        <p>{{doubleNum()}}</p>
        <p>watchNum: {{watchNum}}</p>
        <p>computedNum: {{computedNum}}</p>
        <p><input type="text" v-model="msg"></p>
        <p><button @click="++num">点击num++</button></p>
    </div>
    <script src="./base/vue.min.js"></script>
    <script>
        /*
            做一个效果： num*2+1  效果
                1.{{num*2+1}} 可以实现效果，但是不方便维护管理
                2. 直接封装成一个函数，然后函数内部返回  this.num*2+1
                    好处就是方便维护与管理了
                    缺点就是无关数据变化的时候，doubleNum这个方法也会被调用了。
                    无关数据变化的时候，就会引发视图渲染，doubleNum方法就会被执行了！
                3.  可以通过设置watch监听器实现这个功能。
                    watch可以监听现有数据的变化，然后一旦现有数据发生变化了，就会让一个新的数据改变。
                    逻辑上比较复杂点。
                4. computed 计算属性
                    会根据现有数据生成一个新的数据，并且两者会产生关联，建立永久性的缓存。
                    当无关数据变化的时候，他不会重新计算，直接从缓存里面取之前的值。
                    
                    跟watch的区别是什么？
                        watch监听是单个的  每次监听只能监听一个变量的改变
        */
        // var num  =1000;
        new Vue({
            el:"#app",
            data:{
                num:1,
                msg:"hello world",
                watchNum:"" ,//声明一条新的数据
            },
            methods:{
                doubleNum(){
                    return this.num*2+1
                }
            },
            computed:{ //计算属性  {{computedNum}}
                computedNum(){
                    return this.num*2+1
                }
            }
        })
    </script>
</body>

_老逄

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue02——vue中v-XXX指令

v-bindv-text 等价于 {{}}v-bind 属性绑定指令v-bind属性绑定指令，可设置行内样式格式：v-bind:style="{background:bg}"{{bg}} == <body> <div id="app"> ...
复制链接

扫一扫