Vue2 插值语法&事件&计算属性&监视&样式绑定

插值语法

• 可以在{{}}中进行一些简单的js表达式运算

{{num+1}} {{message.split(‘’)}}

• vm上存在的属性，以及vue原型上的属性，都可以插入

事件处理

• 事件的基本使用

  1.用v-on:xxx 或@xxx绑定事件 xxx是事件名

  2.事件的回调函数需要配置在methods中

  3.methods中的函数中this指向的是vm或是组件实例对象

事件的传参

1. @click="add"不传参，但在methods中add(e)方法会接收到一个参数e，也就是鼠标事件，就会获取的事件触发的DOM元素e.target

2. click="add(1)"就是简单传参 在methods中add(n),n就是1

    3.@click=“add(1,$event)”，第一个参数就是n，第二个参数就是鼠标事件，在methods中add接收两个参数
add(n,e)

<button @mouseover="showInfo1(66,$event)">点我提示</button>

 new Vue({
            el: '#root',
            data: {
                name: "尚硅谷"
            },
            //方法都写在methods里
            methods: {
                showInfo1(number) {
                    alert(number)
                }
            }
        });

事件修饰符

修饰符可以连续写（.prevent.stop)

• prevent：阻止默认事件发生

  <a href="http:baidu.com" @click.prevent="showInfo1">点我</a>

• stop：阻止冒泡事件发生

 <div @click="showInfo1">1
            <div @click.stop="showInfo1">2</div>
 </div>

• once：事件只发生一次

 <button @click.once="showInfo1">点击</button>

键盘事件

• 键盘输入完成之后，按下enter键，调用函数

 <input type="text" @keyup.enter="showInfo1">

• 配合keyup使用

• 配合keydown使用 (tab\alt\shift\meta\ctrl)

  

计算属性

计算属性要写在computed中，必须要return
vm直接调用computed里的函数，将结果返回，所以使用时直接用插值语法写方法名，不用调用了
计算属性最终会出现在vm上，所以直接当属性使用即可
计算属性只调用一次，有缓存机制，重复使用时只执行一次，效率更高，并且方便调试
计算属性靠get和set来实现，只要计算属性用到的变量发生变化，就会重新渲染

 computed: {
     fullName() {
                    return this.firstName + this.lastName;
                }
               }
//对象形式（可以进行修改操作setter）
computed:{
    fullName:{
        get(){
            return this.firstName + this.lastName;
        },
        set(newVal){
            let arr = newval.split('-');
            this.firstName = arr[0];
            this.lastName = arr[1];
        }
    }
}

过滤器

定义在filters下

在过滤器函数中一定要有一个return,不改变原数据，产生新的相对应的数据，多个过滤器可以串联

过滤器函数有一个形参，就是管道符前面的参数

//跟methods一样
filters:{
  cai(val){
      return val+1；  //val是
  }
}
<p> {{number | cai}}</p>

全局过滤器

Vue.filter()接收两个参数，第一个是全局过滤器的名字，第二个是全局过滤器的处理函数

Vue.filter('cap',(num)=>{
    return num++;})

使用场景：1. 配合插值语法，对数据进行特定的格式化 <p> {{number | cai}}</p>

2.配合v-bind

监视属性

• 监视数据的（data）变化，只要发生变化就被调用

• 要监视那个数据变化，就把数据名作为方法名

• 深度监视可以监视一个对象内部属性的变化，函数格式不可以监视，vue自身可以监视对象内部属性，watch默认不可以！

• 可以用来判断用户名是否被占用,可以开启定时器等异步任务

//对象格式
watch:{
    data上的属性名：{
        immediate:true; //mounted时被调用
        deep:true; //深度监视
        handler(newValue,oldValue){
            
        }
     }
 }
//函数格式
watch: {
     data上的属性名(newValue,oldValue){
 }
    //如果监听对象的子属性，深度监听
    'info.username'(){
        
    }
}

class绑定

将要动态切换的class用v-bind绑定即可，最终class样式会将动态变化和不变的合并起来

class绑定对象 :class=“对象名” 用来控制哪几个样式显示或隐藏

  <div class="box" :class="activeObj"></div>
  new Vue({
      el: '#root',
      data: {
        activeObj:{
          active: true
        },
      },
      methods: {
        btnClick() {
          this.activeObj.active = !this.activeObj.active; //太妙了！！！
        }
      },
    });

数组绑定class 增加或删除样式

 <div class="basic" :class="mood"></div>
 new Vue({
            el: '#root',
            data: {
                mood: ["happy", "sad", "normal"]
            },
           methods: {
           btnClick() {
                this.mood.push('sad');
                this.mood.pop();
        }
      },
        });

• 字符串类型 直接更改class名称,点击切换class类型

<div class="box" :class = "active"></div>
new Vue({
            el: '#root',
            data: {
                active:'sad';
            },
           methods: {
           btnClick() {
                this.active = 'happy';
        }
      },
        });

绑定style样式

 <div :style="styleObj">hello</div>
  new Vue({
            el: '#root',
            data: {
                styleObj: {
                    fontSize: "40px",
                    color: "white"
                }
            },
        });