VUE基础

Vue是什么？

Vue是用于构建用户界面的渐进式框架，借鉴了angular的指令思维和react的组件与虚拟dom思维

Vue组成

模板（视图）
业务逻辑
指令

优点

1. 易用，会html、css、js更快上手
2. 灵活，不断繁荣的生态系统，可以在一个库或者一个框架伸缩
3. 高效，使用虚拟dom，运行速度更快

设计思想

MVVM是Model-View-ViewModel的简写，MVVM是一种设计思想。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，View和Model之间的同步工作是自动的，无需人为干涉，故开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM统一管理。

Vue的参数

• 模板指定 el || template
• 数据 data
• 方法 methods
• 计算computed
• 监听watch
• 过滤filters
• 自定义指令directives
• 属性props
• 混合minxin
• 组件components
• 生命周期created

创建vue实例

data中的数据，methods里的方法都会挂载到vue的实例上面，vue中this指向vue的实例

var vm = new Vue({
    el:"#app", //指定vue模板
    data:{  //指定vue的初始数据
        
    },
    methods:{ //事件     
    }
})

双向绑定

当数据发生变化时，ViewModel能够监听到这种变化，然后将对应的视图做出自动更新，而用户操作视图时，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

常见指令

1. v-text 类似于innerText，可以修改标签中的内容。
2. v-html 类似于innerHTML，可以修改标签中的内容，并能识别html标签。
3. v-if，v-else-if，v-else 用于条件渲染，直接移除元素
4. v-show 用于条件渲染，只是将元素的display变为none，dom元素仍然存在
5. v-on: 用于绑定事件，可缩写为@，once修饰符让事件只执行一次，
6. prevent修饰符阻止默认行为，
7. stop修饰符阻止冒泡
8. v-for 列表渲染，使用v-for时key需要制定一个唯一值，这样vue在进行Diff判断时可以提升性能s
9. v-bind: 可以将data中的变量于属性进行绑定，v-bind:属性名=“ ”，可以省略为 :属性名，可以自定义属性
10. v-model 用于在表单或者组件上创建数据的双向绑定，v-smodel.lazy 加上lazy修饰符之后，表单失去焦点才会更新 .number 修饰符将表单内容定义为数字类型，在表单type为checkbox的时候，如果只有一个框值为true|false

修饰符

• 事件修饰符

stop阻止事件冒泡
once只执行一次
prevent默认事件

• 按键修饰符

enter，esc，down，left，right，up

自定义指令

全局定义：Vue.directive(‘指令名称’,执行函数)
组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted（节点插入时触发）、update（组件内相关更新触发）componentUpdated（元素状态发生改变时触发）、unbind（元素从DOM删除时触发）
钩子函数参数：el、binding

<div v-img=""></div>

directives:{
    img:{
        inserted(el,binding){
            //el 指令所在的dom节点
            //binding.value自定义指令的值
        }
    }
}

方法

vue中的方法全部都定义在methods中，$event是事件的一个特殊参数

methods:{
    addItem(){
        
    }
}

计算

每当触发重新渲染时，调用方法将总会再次执行函数。计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。计算属性定义在computed中

computed:{
    "rmsg":function(){
        return this.msg.split("").reverse().join("")
    }
}

侦听器

vue通过watch选项提供了一个通用的方法，用于响应数据的变化

var vm = new Vue({
    el:"#app",
    data:{
        num:1,
        obj:{v1:0}
    },
    watch:{
        "num":{
    	handler:function(nval,oval){
    		console.log("从" + oval + "变成了" + nval)
    		localStorage.setItem("num",nval)
           }
        },
        "obj":{
            handler:function(nval){
                console.log("数据改变了")
            },
            deep:true //深度监听对象的变化，引用类型数据需要加上deep才能监听到
        }
    },
    created(){
        this.num = localStorage.getItem("num") || 1
    }
})

过滤，管道

使用filters过滤

<h1>{{num|price}}</h1> 
//

filters:{
    price:(val)=>{
        return val.toFixed(2);
    }
}
//num过滤price方法 toFixed(2)保留小数点两位数字

ref

给dom添加ref属性可以通过this.$refs.名称获取到dom

类的绑定

在标签中通过下面三种方式添加

:class="red"
:class="{'red':flag}"
:class="[red,'bold']"
data:{
    red:"red",
    flag:true
}

style样式的绑定

:style="{color:'red',fontSize:24px}"
:style="styles"

data:{
    styles:{
        color:"red",
        fontSize:"24px"
    }
}

动画

通过动态添加类用css实现动画效果，需要使用一个transition内置组件
v-enter-active进入过程：v-enter从什么状态开始进入，v-enter-to进入到的状态
v-leave-active离开过程：v-leave从离开的起始状态，v-leave-to离开到的状态
transition组件
name class名称，enter-active-class定进入过程的class，leave-active-class定义离开的过程

//css样式
.fade-enter{
    opacity: 0;
}
.fade-enter-to{
    opacity: 1;
}
.fade-enter-active{
    transition: all ease 1s;
}
.fade-leave{
    opacity: 1;
}
.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: all ease 1s; 
}

//html
<button @click="flag=!flag">按钮</button>
<transition name="fade">
    <div class="box" v-show="flag"></div>
</transition>

//vue
data:{
    flag:true
}

css动画

过渡动画：同一个元素在两个不同的状态过渡
transition：动画的属性 动画的缓动函数 动画的持续时间
缓动函数：linear 匀速，ease 匀加速|匀减速，ease-in缓入，ease-out缓出，ease-in-out，cubic-bezier()
关键帧动画：

//定义动画
@keyframe fadeIn{
    from{
    	opacity: 0;
    }
    to{
    	opacity: 1;
    }
}

//调用动画
//animate:动画名称 缓动函数 次数 延迟
animate:fadeIn ease 1s infinite

Vue生命周期

生命周期钩子函数就是在vue实例从创建前到卸载后的过程中会自动执行的一系列函数
beforeCreat() 创建前触发
created() 创建后触发，可以获取到this
beforeMount() 渲染前触发
mounted() 渲染后触发
beforeUpdate() 更新前触发
update() 更新后触发
beforeDestroy() 销毁前触发
destroyed() 销毁后触发

组件

vue中的组件有全局组件和局部组件

全局组件：

定义在vue构造函数上，所有实例都可以使用

局部组件：

定义在当前实例中，只有当前实例能够使用

//全局组件
Vue.component('HomeTap',{
    template:`
        <div>
            <h1>姓名{{name}}</h1>
            <p>年纪{{age}}</p>
        </div>
    `,
    date(){
        return {
            name:'张三',
            age:18
        }
    },
    
})
//使用可以直接在vue作用区域内写 <home-tab></home-tab>
//局部组件  定义在vue内部
let vm = new Vue({
    el:'#app',
    data:{
        
    },
    components:{
        'HomeNav':{
            template:`
                <div>
                    局部组件{{info}}
                </div>
            `,
            data(){
                return {
                    info:'内容'
                }
            }
        }
    }
})
//在vue作用区域内用 <home-nav></home-nav> 使用
//如果局部组件和全局组件名字一样，则局部组件优先级高于全局组件

组件之间的传值

父组件=>子组件：在子组件标签上写上传入的值，在子组件内用props属性接收，父组件传给子组件的值为只读状态，不能修改，可以在data中创建一个值使其默认值等于父组件传递过来的值，通过修改data中的定义的值来达到类似修改传递值的效果。

//父组件传入
<home-tab :info='info'></home-tab>

//子组件接收
props:['info'] //数组形式接收
props:{  //对象形式接收
    "info":{
        type:Number,
        default:0
    }
}

//子组件传值
methods:{
    ttt(){
        this.$emit('info',this.num)  //向外发出 info
    }
}

//父组件接收
<home-tab @info='setInfo($event)'></home-tab> //@info 形式接收,$event就是上面的this.num

插槽slot

可以通过slot标签在定义组件的时候使用插槽将组件标签中的内容渲染到页面上，插槽分为默认插槽和具名插槽，具名插槽通过给slot加name值，在插槽内的标签上用slot属性实现具名插槽。

//组件中使用slot插槽
template:`
    <div>
        <slot name='top'></slot> 
        <h1>组件</h1>
        <slot></slot>
    </div>
`
//这样p标签就会被渲染到页面上
<home-tab><p slot='top'>插槽</p></home-tab>

.sync修饰符

<home-tab :visible="flag"></home-tab>  //:visible="flag" && @update:visible="$event=>flag"

<div v-if="visible">

props:{"visible":{
    type:Boolean,
    default: false
}}