Vue基础知识

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

组成

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

特点

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

MVVM

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
路由守卫
生命周期

创建vue实例

使用script标签将vue.js引入html，然后通过new Vue创建实例，如下代码所示，data中的数据，methods里的方法都会挂载到vue的实例上面，vue中this指向vue的实例

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

双向绑定

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

常见指令

• v-text 类似于innerText，可以修改标签中的内容。
• v-html 类似于innerHTML，可以修改标签中的内容，并能识别html标签。
• v-if，v-else-if，v-else 用于条件渲染，直接移除元素
• v-show 用于条件渲染，只是将元素的display变为none，dom元素仍然存在
• v-on: 用于绑定事件，可缩写为@，once修饰符让事件只执行一次，prevent修饰符阻止默认行为，stop修饰符阻止冒泡
• v-for 列表渲染，使用v-for时key需要制定一个唯一值，这样vue在进行Diff判断时可以提升性能
• v-bind: 可以将data中的变量于属性进行绑定，v-bind:属性名=“ ”，可以省略为 :属性名，可以自定义属性
• v-model 用于在表单或者组件上创建数据的双向绑定，v-model.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);
    }
}

ref

给dom添加ref属性可以通过this.$refs.ref值获取到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实例从创建前到卸载后的过程中会自动执行的一系列函数
beforeCreate() 创建前触发
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
    }
}

子组件=>父组件：在子组件中通过$emit()函数向外传值，在父组件中通过@值名的方式接收

//子组件传值
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>

最后

以上就是单纯飞机为你收集整理的2020-06-23Vue基础知识的全部内容，希望文章能够帮你解决2020-06-23Vue基础知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。