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

前言

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

一、搭建一个Vue程序

1.1 搭建Vue环境

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

• 引入CDN
  

• 直接下载源码引入
  从官网中下载vue.js的源码复制下来即可，然后在页面中引入
  地址：https://cn.vuejs.org/v2/guide/installation.html
  
  点击开发版本，直接复制到已经创建好的vue.js的文件当中即可。
  
• NPM安装

1.2 构建一个Vue实例

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

    
        
        
        
    
    
        
{{msg}}
        
    

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

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

2.1 挂载点

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

这个就是挂载点

2.2 模板

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

        

            
lance {{msg}}
        

其中：

lance {{msg}}

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

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

2.3 实例

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

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

3.1 Vue中的计算属性

1）前言

        

            姓:
            名:
            
{{firstName}}{{lastName}}
        
        

效果：

问题：

{{firstName}}{{lastName}}
这个很冗余。

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

        

            姓:
            名:
            
{{fullName}}
        
        

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

3.2 侦听器

1）需求

        

            姓:
            名:
            
{{fullName}}
            

            
{{count}}
        
        

效果：

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

            姓:
            名:
            
{{fullName}}
            

            
{{count}}
        
        

效果：

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

3.3 计算属性的set与get

1）实例

    姓: 

    名: 

    姓名1(单向): 

    姓名2(单向): 

    姓名3(双向): 

效果：

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

    
    




    姓: 

    名: 

    姓名1(单向): 

    姓名2(单向): 

    姓名3(双向): 

注意：计算属性存在缓存，多次读取只执行一次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 完整实例

    
    
    
    




    

        
1.class绑定： :class= 'xxxx'
        
xxx是字符串
 //会有 两个类名
        点击一下字符串
        
 //对象中属性值是css的类名，属性值是布尔类型,true代表类名留下。
        
xxx是对象
 //只会显示为 true的类名
        点击一下对象
        

        
xxx是数组

        
2. style绑定
        
style绑定
    //style绑定的是对象 
        style绑定
    
    

转载于:https://www.cnblogs.com/zhangyinhua/p/9519549.html