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

╰+哭是因爲堅強的太久メ 2022-05-15 00:27 147阅读 0赞

### 前言 ###

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

## 一、搭建一个Vue程序 ##

### 1.1 搭建Vue环境 ###

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

*  引入CDN

*  直接下载源码引入  
    从官网中下载vue.js的源码复制下来即可，然后在页面中引入  
    地址：[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]  
    ![IJMmPaj.png][]  
    点击开发版本，直接复制到已经创建好的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>

效果：  
![vmt39tl.png][]  
问题：

<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>

效果：  
![atE599n.png][]  
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>

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

### 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>

效果：  
![2f3FbbU.png][]  
分析：  
我们修改都是基于单向的，也就是我们只是修改姓、名这两个文本框，  
但是我们修改下面两个文本框是不能实现同步的，那要怎么样实现呢？

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性和监听</title>
    </head>
    
    <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>
    
    
    <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>

[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[IJMmPaj.png]: https://i.imgur.com/IJMmPaj.png
[vmt39tl.png]: https://i.imgur.com/vmt39tl.png
[atE599n.png]: https://i.imgur.com/atE599n.png
[USiwnxs.png]: https://i.imgur.com/USiwnxs.png
[2f3FbbU.png]: https://i.imgur.com/2f3FbbU.png