专栏首页LanceToBigDataVue.js之Vue计算属性、侦听器、样式绑定

Vue.js之Vue计算属性、侦听器、样式绑定

前言

上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用。

一、搭建一个Vue程序

1.1 搭建Vue环境

搭建Vue的开发环境总共有三种方法:

  • 引入CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

点击开发版本,直接复制到已经创建好的vue.js的文件当中即可。

  • NPM安装

1.2 构建一个Vue实例

1)el(挂载点) 创建一个Vue这个实例去接管页面中的某个Element(元素)。也就是说el表明和页面上 哪一个节点做绑定! 2)data vue实例都有一些数据,我们把数据都存放在data中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue入门</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">{{msg}}</div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    msg:'hello world'
                }
            })
        </script>
    </body>
</html>

创建一个vue的实例,让这个vue的实例去接管页面中id为root的内容,所以这个vue实例 就和id为root的dom做好了绑定。

二、挂载点,模板与实例之间的关系

2.1 挂载点

挂载点是Vue实例中el属性对应的id所对应的一个dom节点。

这个就是挂载点

2.2 模板

在挂载点内部的内容都称之为模板内容。

        <div id="root">
            <h1>lance {{msg}}</h1>
        </div>

其中:

<h1>lance {{msg}}</h1>

就是模板内容啦! 当然我们可以把模板内容写在vue实例当中:

    <body>
        <div id="root"></div>
        <script>
            new Vue({
                el: '#root',
                template: '<h1>lance {{msg}}</h1>',
                data: {
                    msg:'hello world'
                }
            })
        </script>
    </body>

所以说模板你可以写在挂载点内部,当然也可以写在vue实例的template属性当中。

2.3 实例

其中new Vue({})其实就是创建一个Vue实例。 在实例中你需要指定一个挂载点,把模板写好。vue会自动的根据你的模板和你的数据 自动生成要展示的内容。会把要展示的内容放到挂载点当中。

三、Vue中的计算属性、侦听器、计算属性的set与get

3.1 Vue中的计算属性

1)前言

        <div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{firstName}}{{lastName}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data:{
                    firstName: '',
                    lastName: ''
                }
            })
        </script>

效果:

问题:

<div>{{firstName}}{{lastName}}</div>这个很冗余。

2)常用场景 fullName是通过firstName和lastName计算而成的一个新的变量。 我们可以通过Vue的计算属性来解决我们的需求,在Vue实例中添加一个computed属性。

        <div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{fullName}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    firstName: '',
                    lastName: ''
                },
                computed: {
        //什么时候执行:初始化显示/相关data属性数据发生改变
                    fullName: function(){
                    //计算属性的一个方法,方法的返回值作为属性值
                        return this.firstName+' '+this.lastName;
                    }
                }
            })
        </script>

fullName是一个计算属性,定义在computed里面表示它是一个计算属性。 它是由firstName和lastName计算出来的。 计算属性只有当里面参与计算的属性各任意一个改变的时候才会去计算,否则使用上 此次计算的缓存。

3.2 侦听器

1)需求

        <div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{fullName}}</div>
            <hr  />
            <div>{{count}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    firstName: '',
                    lastName: '',
                    count: 0
                },
                computed: {
                    fullName: function(){
                        return this.firstName+' '+this.lastName;
                    }
                }
            })
        </script>

效果:

2)实现 首先在vue实例中定义一个侦听器:watch。

<div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{fullName}}</div>
            <hr  />
            <div>{{count}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: { 
                    firstName: '',
                    lastName: '',
                    count: 0
                },
                computed: {
                    fullName: function(){
                        return this.firstName+' '+this.lastName;
                    }
                },
                watch: {
                    firstName: function(){
                        this.count++
                    },
                    lastName: function(){
                        this.count++
                    }
                }
            })
        </script>

效果:

其实监听器的作用是,监听某个数据的变化,一旦这个数据发生变化我就可以在监听器中 做相应的业务处理。 当然在上面的例子中我们可以直接监听fullName就可以了。

        <script>
            new Vue({
                el: '#root',
                data: { 
                    firstName: '',
                    lastName: '',
                    count: 0
                },
                computed: {
                    fullName: function(){
                        return this.firstName+' '+this.lastName;
                    }
                },
                watch: {
    /*              firstName: function(){
                        this.count++
                    },
                    lastName: function(){
                        this.count++
                    }*/
                    fullName: function(){
                        this.count++
                    }
                }
            })
        </script>

3.3 计算属性的set与get

1)实例

<body>
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
    姓名2(单向): <input type="text" placeholder="Full Name2"  v-model="fullName2" /><br />
    姓名3(双向): <input type="text" placeholder="Full Name3"      /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
  const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B',   //如果不定义的话,会造成vm.$watch的()方法会延迟一步
        },
        computed: {
            //什么时候执行:初始化显示/相关的data属性发生变化
            fullName1 (){//计算属性中的一个方法,方法的返回值作为属性值
                console.log("111111111111111")
                return this.firstName +' '+this.lastName;
            }
        },
        watch: { //配置监视
            firstName: function (value) {   //监听firstName的变化
                console.log(this) //就是vue的实例:vm
                this.fullName2 = value +' '+this.lastName;
            }
        }
    });

  //所有vm的实例方法都是以$开头的。 注意:在function中可以最多可以传两个值一个是新的,一个是旧的。
  vm.$watch('lastName',function (value) {
      //更新 fullName2
      this.fullName2 = this.firtName +' '+ value;
  })
</script>
</body>

效果:

分析: 我们修改都是基于单向的,也就是我们只是修改姓、名这两个文本框, 但是我们修改下面两个文本框是不能实现同步的,那要怎么样实现呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监听</title>
</head>
<!--
1.计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示结果
2.监视属性
    通过vm对象的$watch(或)watch配置来监视制定的属性。
    当属性变化时,回调函数自动调用,在函数内部进行计算。
3.计算属性高级
    通过getter/setter实现对属性属性的显示和监视
    计算属性存在缓存,多次读取只执行一次getter计算。
-->
<body>
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
    姓名2(单向): <input type="text" placeholder="Full Name2"  v-model="fullName2" /><br />
    姓名3(双向): <input type="text" placeholder="Full Name3"  v-model="fullName3"   /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
  const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B',   //如果不定义的话,会造成vm.$watch的()方法会延迟一步
        },
        computed: {
            //什么时候执行:初始化显示/相关的data属性发生变化
            fullName1 (){//计算属性中的一个方法,方法的返回值作为属性值
                console.log("111111111111111")
                return this.firstName +' '+this.lastName;
            },
            fullName3 :{
                //什么是回调函数? 1.你定义的  2.你没有调用  3.但最终它执行了
                //回调函数你要知道:什么时候调用?用来做什么?

                // 回调函数 当需要读取当前属性值时回调,根据相关的数据计算病返回当前属性的值
                get(){
                    return this.firstName +' '+this.lastName;
                },
                //回调函数,监视当前属性值的变化,当属性值发生改变时回调,更新的属性数据。
                set(value){//value就是fullName3的最新属性值
                   const names = value.split(' ');
                   this.firstName = names[0];
                   this.lastName = names[1];

                }
            }
        },
        watch: { //配置监视
            firstName: function (value) {   //监听firstName的变化
                console.log(this) //就是vue的实例:vm
                this.fullName2 = value +' '+this.lastName;
            }
        }
    })

  //所有vm的实例方法都是以$开头的。 注意:在function中可以最多可以传两个值一个是新的,一个是旧的。
  vm.$watch('lastName',function (value) {
      //更新 fullName2
      this.fullName2 = this.firstName +' '+ value;
  })
</script>
</body>
</html>

注意:计算属性存在缓存,多次读取只执行一次getter计算。

四、Vue强制绑定class和style

在应用界面中,当我们去点击某个按钮或者其他操作的时候,某个(些)元素的样式是变化的。 class/style绑定就是专门用来实现动态样式效果的技术。

4.1 class绑定

语法: :class='xxx'

  • xxx是字符串
  • xxx是对象
  • xxx是数组

4.2 style绑定

:style = "{color: activeColor,fontsize: fontsize + 'px'}" 其中acticeColor/fontsize是data属性

4.3 完整实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue强制绑定class和style</title>
    <script src="js/vue.js"></script>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: blue;
        }

        .cClass {
            font-size: 40px;
        }
    </style>
</head>
<!--
1.理解
    在应用界面中,某个(些)元素的样式是变化的
    class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定: :class='xxx'
    xxx是字符串
    xxx是对象
    xxx是数组
3.style绑定
    :style = "{color: activeColor,fontsize: fontsize + 'px'}"
    其中acticeColor/fontsize是data属性
-->

<body>
    <div id="app">
        <h3>1.class绑定: :class= 'xxxx'</h3>
        <p class="cClass" :class="a">xxx是字符串</p> //会有 两个类名
        <button @click='update'>点击一下字符串</button>
        <hr/> //对象中属性值是css的类名,属性值是布尔类型,true代表类名留下。
        <p :class="{aClass : isA,bClass : isB}">xxx是对象</p> //只会显示为 true的类名
        <button @click='updateObj'>点击一下对象</button>
        <hr />
        <p :class="['bClass','cClass']">xxx是数组</p>

        <h3>2. style绑定</h3>
        <p :style="{color: activeColor,fontsize: fontsize + 'px'}">style绑定</p>    //style绑定的是对象 
        <button @click='updateStyle'>style绑定</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                a: 'aClass',
                isA: true,
                isB: false,
                activeColor: 'green',
                fontsize: '20'
            },
            methods: {
                update() {
                    this.a = 'bClass';
                },
                updateObj() {
                    this.isA = false;
                    this.isB = true;
                },
                updateStyle() {
                    this.activeColor = 'red';
                    this.fontsize = 30;
                }
            }
        })
    </script>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OOAD-设计模式(一)概述

    前言   在我们很多时候设计代码都是需要用到各种不一样的设计模式的,接下来着几篇给大家领略一下设计模式。知道设计模式的作用,以及在代码的具体体现。很多时候我们看...

    用户1195962
  • OOAD-设计模式(二)之GRASP模式与GOF设计模式概述

    一、GRASP模式(通用责任分配软件模式)概述 1.1、理解责任   1)什么是责任     责任是类间的一种合约或义务,也可以理解成一个业务功能,包括行为...

    用户1195962
  • MySQL(二)之服务管理与配置文件修改和连接MySQL

    上一篇给大家介绍了怎么在linux和windows中安装mysql,本来是可以放在首页的,但是博客园说“安装配置类文件”不让放在首页。接下来给大家介绍一下在li...

    用户1195962
  • react入门——慕课网笔记

      1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性

    超然
  • Python调用PHP的函数

            在电子商务的web平台中有可能存在这样的需求,在月末进行分红账务结算,这样就需要在web服务器下写脚本定时执行数据库的操作,这里有很多种可选的方...

    py3study
  • 【Web技术】421- 富文本原理介绍

    最近产品想让我在富文本里加个旋转图片的功能,我一想?,就觉得事情并不简单,因为印象中好像没见过这种操作。果然,经过一番百度之后,确实没怎么看到相关信息,这也就意...

    pingan8787
  • 【富文本】268- 富文本原理了解一下?

    最近产品想让我在富文本里加个旋转图片的功能,我一想?,就觉得事情并不简单,因为印象中好像没见过这种操作。果然,经过一番百度之后,确实没怎么看到相关信息,这也就意...

    pingan8787
  • vue+element-ui 回到顶部组件

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/detai...

    从入门到进错门
  • 最最最常见的Java面试题总结-第一周

    这里会分享一些出现频率极其极其高的面试题,初定周更一篇,什么时候更完什么时候停止。

    用户2164320
  • 小甲陪你一起看Ceph (OSDC | 上篇)

    小甲师兄有个喜好——喜欢下雨:每逢下雨天,不是诗兴大发,就是代码撸的飞起。再加上最近在优化rbd,小甲把之前分析的OSDC代码分享给大家

    腾讯云TStack

扫码关注云+社区

领取腾讯云代金券