VUE笔记-许

1. VueJS 概述

1.1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷
VUE笔记-许_第1张图片

2. Vue.js快速入门

2.1 入门程序

我们使用vue编写一个最简单的入门程序:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        new Vue({
           el:"#app",   //表示当前vue对象接管了div区域
           data:{
               message:"hello vue!"     //注意结尾不要写分号
           }
        });
    </script>
</body>
</html>

效果图:

VUE笔记-许_第2张图片

双向绑定

V-model指令:双向绑定,model中的值改变会改变显示中的值,显示的值改变的时候会改变el中的值;
使用它可以将数据模型中的值显示在表单控件中,还可以在用户改变表单控件值的情况下改变数据模型;
控件改变,vue也改变,反之如此;
.

事件绑定

V-on:cick指令:用来绑定事件,冒号后面是事件类型;另一个写法 @click ;

事件绑定时必须在methods中

在表单提交的时候会出出现页面跳转情况,会出现页面刷新情况:
$event : 事件处理对象
VUE笔记-许_第3张图片
VUE笔记-许_第4张图片

事件修饰符:

@click.stop="" 阻止事件冒泡
事件冒泡:就是当点击内部子元素时,外部元素也会做出相应的动作;
@click.prevent=""阻止时间默认行为
@click.once:只执行一次

键盘修饰符:

@keyup.enter="" enter键抬起 回车键
@keydown.13="" enter建按下
.enter相当于.13
在这里插入图片描述

属性绑定:

v-:bind:属性名=“值”:值会从vue的data中取,即data中的属性名;
**:属性名=“”**另一种写法

计算属性:

可以进行简单的属性计算的属性
与data,el,methods同一级别
computed:{ **
userList(){
return 1;//必须有返回值**
}

}
访问时:{{ userList }}

元素显示与隐藏

v-if=“true” 显示
v-else false 显示
v-show
v-show: 节点还存在DOM,只是用户看不见,占用着视图空间;
v-for:如果值为true,显示,如果为false时,从文档结构中删除该元素,不占用视图空间;
二者只能存在一种;

vue实例生命周期 钩子函数

beforeCreate()
在vue实例创建完毕,内部属性和方法还没有设置好,触发该事件。
created() 使用较多1
在vue实例创建完毕,内部属性和方法设置好。
一般是向后台发送请求数据。
beforMount()
节点还没绑定好前,节点与vue实例绑定好前;
mounted()
节点加载完毕,并且与vue实例中的属性和方法绑定好了。
选中页面中的元素。
beforeUpdate()
在数据更新前出发的钩子函数,在页面渲染更新前。
updated ()
页面渲染更新完毕。
before destroy()
页面销毁之前,vue实例销毁前,还可以访问数据。
destroyed()
页面完全销毁,vue实例属性和方法也没有,绑定也没了,各种没。

vue的动画:

animate.css:
VUE笔记-许_第5张图片
效果:
VUE笔记-许_第6张图片

transaction组件:

自定义的类实现动画
。v-enter 进入之前的样式
。v-enter-active 正在进入的样式
。v-enter-to 进入之后的样式
。v-leave-active正在离开的样式
。v-leave-to 完全离开之后的样式

ve{
transition:all 3s;
}
VUE笔记-许_第7张图片
使用钩子函数实现动画某一事件时候触发的函数
VUE笔记-许_第8张图片

组件:

1.全局组件

Vue.component(‘组件名称’ ,{vue实例 } )
VUE笔记-许_第9张图片
VUE笔记-许_第10张图片
VUE笔记-许_第11张图片
局部注册:只能在绑定的app内部使用;
VUE笔记-许_第12张图片
组件插槽:
VUE笔记-许_第13张图片
VUE笔记-许_第14张图片
VUE笔记-许_第15张图片
VUE笔记-许_第16张图片
VUE笔记-许_第17张图片

动态组件:

VUE笔记-许_第18张图片

选项卡切换:

VUE笔记-许_第19张图片
VUE笔记-许_第20张图片
VUE笔记-许_第21张图片

过滤器:

全局声明:
VUE笔记-许_第22张图片
局部声明:
VUE笔记-许_第23张图片

你可能感兴趣的:(vue,vue)