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 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

223100
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

289110
来自专栏vue学习

前端面试题总结(持续更新。。)

17220
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

24490
来自专栏柠檬先生

zepto 基础知识(5)

81.width   width() 类型:number   width(value) 类型:self   width(func...

22470
来自专栏web前端

JavaScript基础学习--05自定义属性、索引值

一、自定义属性      1、读写操作 <input abc="123" type="button" value="按钮" /> ==============...

21170
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

用了转义字符把>和<替换掉,然后就没有问题了。

278100
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

20880
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

1.3K50
来自专栏mySoul

属性 元素的内容 创建,插入和删除节点 虚拟节点

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属...

16830

扫码关注云+社区

领取腾讯云代金券