VUE笔记-许

最新推荐文章于 2023-03-12 17:14:05 发布

许俊活

最新推荐文章于 2023-03-12 17:14:05 发布

阅读量314

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/fdsgfd43432/article/details/107787300

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
在这里插入图片描述

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>

效果图：

在这里插入图片描述

双向绑定

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

事件绑定

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

事件绑定时必须在methods中

在表单提交的时候会出出现页面跳转情况，会出现页面刷新情况：
$event : 事件处理对象
在这里插入图片描述

事件修饰符：

@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:
在这里插入图片描述
效果:

transaction组件:

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

ve{
transition:all 3s;
}
在这里插入图片描述
使用钩子函数实现动画某一事件时候触发的函数

组件：

1.全局组件

Vue.component(‘组件名称’ ，{vue实例 } )
在这里插入图片描述

局部注册：只能在绑定的app内部使用；

组件插槽：

动态组件：

在这里插入图片描述

选项卡切换：

在这里插入图片描述

过滤器：

全局声明：
在这里插入图片描述
局部声明：

许俊活

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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模式
复制链接

扫一扫