Vue基础2

事件
v-on:不加on的事件名
@不加on的事件名
如果传值可以加括号

    事件对象
        不传值的时候默认接收
        传值的时候需要单独再去传$event
    
    .stop  阻止冒泡
    .prevent 阻止浏览器默认事件
    .键码 .单词

class和style
:class="{class名:真假值}"
:class="[真假?‘class名’:’’]"
:class="[class1]"

:style="{width:变量}
:style="json的变量"
:style="[json的变量,json的变量]"

<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
        <div :style="{width:wid}"></div>
        <div :style="style1"></div>
        <div :style="[style1,style2]"></div>```
data:{
           wid:'100px',
           style1:{
               width:'100px',
               height:'100px',
               background:'red'
           },
           style2:{
                border:'1px solid blue'
           } 
        }

.yellow {
            background: yellow;
        }
<div class="div1" :class="{yellow:isShow}"></div>
        <div class="div1" :class="[isShow?'yellow':'']"></div>
        <div class="div1" :class="[class1]"></div>
        data: {
            isShow: false,
            class1: 'yellow'
        }

计算和监听
computed:{
计算的数据:function(){
return 计算后的结果
}
}
模板里面会放简单的计算。加入模板里面放的东西多的时候用computed

方法、计算、监听的区别
watch:{
    监听的值:function(变化后的,变化前的){

    }
}
watch:{
    监听的值:{
        handler:function(变化后的,变化前的){

        },
        immediate:true,  //一上来就执行一遍
        deep:true //深度监听
    }
}
方法:vue的范围内，只要有数据发生变化。内部重新渲染，方法就会被调用。尽可能不用。浪费性能
计算：大部分情况都用计算，计算里面不能异步的操作（定时器、ajax）
监听：监听里面可以异步操作。监听可以观察到数据变化前后的值
     默认初始化的时候不会执行监听里面的操作
     并且如果监听的是复杂的数据。里面的东西变化默认监听不到

Vue 实例对象 钩子函数

let vm=new Vue({
el:’’,
data:{},
methods:{
show(){
this
}
}
})

vm.$destroy();销毁vm.$el
vm.$datevm.xxx直接访问数据vm.$mount(’#app’); 手动挂载
生命周期的钩子函数

beforeCreate 刚new完Vue 什么事情还没做
created 检测了一下传进去的属性和方法 data
beforeMount 找到了整个大的容器 创建虚拟dom
mounted 把页面中的变量替换成绑定的数据
beforeUpdate 数据更新前
updated 数据更新后
beforeDestroy 销毁前
destroyed 销毁后

钩子函数使用场景
mounted里面去发送ajax请求