VUE基础学习
关注
分享
扫一扫
文章平均质量分 59
基础的VUE学习
休息休息夏
我爱喝咖啡~~~
展开
-
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted1.什么事自定义指令1.2使用自定义指令的方式2.设置自定义组件2.1 设置全局指令2.2 设置私有指令2.3 钩子函数3. 案例1.什么事自定义指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 例外)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。简单的讲就是： 指令是可以写在DOM元素的小命令，以v-为前缀，vue就能识别这是一个原创 2021-05-29 19:38:53 · 10545 阅读 · 4 评论 -
28.VUE自定义事件--$emit()
VUE自定义事件--$emit自定义事件：当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。注意：此方法只用于子组件向父组件发送消息（数据）隔代组件或兄弟组件间通信此种方式不合适案例：<body><div id="app"><!-- <son></son>--> <parent&原创 2021-05-29 13:42:06 · 493 阅读 · 0 评论 -
27.VUE组件的状态保持keep-alive
VUE组件的状态保持keep-alive1. 使用场景：2.使用keep-alive1. 使用场景： 当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。 比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这原创 2021-05-26 23:13:27 · 1020 阅读 · 10 评论 -
26.VUE过渡实现tabs切换案例
文章目录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> *{ margin:0; padding:0;原创 2021-05-26 21:23:07 · 483 阅读 · 1 评论 -
25.多组件和transition-group列表元素的过渡
文章目录1.多组件过渡2.列表元素的过渡1.多组件过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .v-enter-active,.v-leave原创 2021-05-26 21:15:02 · 130 阅读 · 1 评论 -
24.VUE多标签过渡中key的使用
文章目录1.代码展示2.key的使用1.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .v-enter-active,.v-leave-ac原创 2021-05-26 20:04:57 · 351 阅读 · 4 评论 -
23.VUE使用动画完成过渡效果
文章目录1.使用动画完成过渡效果2.使用第三方动画库来实现过渡效果1.使用动画完成过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*创建*/ @keyframes myScale { from原创 2021-05-26 19:51:31 · 329 阅读 · 0 评论 -
22.VUE移动过渡效果
22.VUE移动过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .move-enter-active,.move-leave-active{原创 2021-05-25 15:25:45 · 211 阅读 · 0 评论 -
21.VUE显示和隐藏动画
VUE显示和隐藏动画 <style> /*设置transition组件管理的内容在显示和隐藏时候的样式*/ .v-enter-active,.v-leave-active{ transition: all 2s; } .v-enter,.v-leave-to{ opacity: 0; } .v-enter-to,.v-leave{原创 2021-05-25 15:13:50 · 2451 阅读 · 1 评论 -
20.VUE中的监听器（侦听器）
20.VUE中的监听器（侦听器）监听器:在监听器中设置需要被监听的属性，被监听的属性的值只要发生变化，监听器就会自动调用被监听的属性，必须是data中的某个值，也就是说watch中属性名必须存在于data中，否则无效<body><div id="app"> <input type="text" v-model="msg1"> <p>{{msg1}}</p> <p>{{msg2}}</p>原创 2021-05-24 21:32:08 · 945 阅读 · 0 评论 -
19.Vue计算属性
19.Vue计算属性1.计算属性介绍2.计算属性的使用计算属性的好处（缓存）：3.计算属性的setter和getter1.计算属性介绍什么是计算属性:是对data的补充。使用计算属性和使用data一致，没有区别。计算属性的特点:计算属性必须有一个函数并且返回值计算属性默认只读，不可更改计算属性默认缓存依赖，多次渲染时，依赖如果没有变化则只会调用一次。2.计算属性的使用注意点计算属性中的属性名可以直接在插值表达式或者指令中调用，和调用data中的值一样计算属性中的方法不能有参数!!原创 2021-05-24 20:42:08 · 544 阅读 · 1 评论 -
18.使用VUE自己封装a标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <!--属性值为布尔类型时，原生html中想要表示f原创 2021-05-24 08:46:04 · 438 阅读 · 0 评论 -
17.VUE自定义验证属性值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <!--v-bind来管理的属性后加的双引号中写数字原创 2021-05-23 20:35:04 · 140 阅读 · 0 评论 -
16.VUE--自定义组件的属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <test mytitle="hello world原创 2021-05-23 20:26:01 · 397 阅读 · 0 评论 -
15.VUE---插槽slot
文章目录1.插槽的理解2.solt插槽的使用3.具名插槽1.插槽的理解根据自己看的博客，CSDN，引用其他博主，来理解插槽。 插槽的目的在于，是组件更具有扩展性。举个栗子，电脑预留的usb接口，可以用来连接多种外部设备，耳机、音响、U盘等等，使得更具有扩展性。插槽slot的作用正是如此，例如，组件中的一个地方，默认情况下为button，而在使用的时候，我们有需求需扩展为span,扩展为input，这时候我们就需要使用到插槽。 &n原创 2021-05-23 20:02:04 · 213 阅读 · 5 评论 -
vue实现tabs切换
vue实现tabs切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-2.4.0.js"></script> <style> #app div{ height: 200px; width:原创 2021-05-23 11:36:01 · 553 阅读 · 0 评论 -
14.VUE过滤器filter
文章目录1.全局过滤器2.私有过滤器1.全局过滤器 Vue.filter('myFilter',function (value){ // return '你好 世界'; return value.replace('hello','HELLO'); }); <!-- | 管道符--> <p>{{msg | myFilter}}</p> <p :title="msg | myFilter"&g原创 2021-05-23 11:30:35 · 165 阅读 · 0 评论 -
13.v-model的修饰符
文章目录1.lazy2.number3.trim<script> let vm = new Vue({ el: "#app", data: { msg:"hello world", msg2:"", age:22, age2:22, info:'', }, methods: {原创 2021-05-23 11:10:40 · 115 阅读 · 0 评论 -
12.VUE表单元素的数据绑定
12.VUE表单元素的数据绑定1.输入框input2.复选框3.选择框<script> let vm = new Vue({ el: "#app", data: { msg:"hello world", cb:false, hobby:[], sex:'', citys:["徐州市","南京市","苏州市"],原创 2021-05-23 10:46:40 · 320 阅读 · 1 评论 -
11.VUE组件的切换和动态组件:is的使用
11.组件的切换和动态组件:is的使用1.组件的切换2.动态组件:is1.组件的切换页面用简单的文字来表示“登录”，“注册”页面<body><div id="app"> <button type="button" :class="{'active':isLogin}" @click="change(true)">登录</button> <button type="button" :class="{'active':!isLogi原创 2021-05-23 09:50:05 · 386 阅读 · 1 评论 -
10.VUE组件中的data和methods
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <cf></cf> <原创 2021-05-23 09:23:58 · 428 阅读 · 0 评论 -
09.VUE组件模板template标签
09.组件的模板x-template的使用1.template使用2.x-template使用1.template使用<div id="app"> <test1></test1> <test2></test2> <test3></test3></div><!--在被控制的标签外使用template标签来自定义模板内容--><template id="t1"&g原创 2021-05-23 09:08:55 · 767 阅读 · 0 评论 -
08.VUE全局组件和私有组件
08.VUE全局组件和私有组件1.创建全局组件1.创建全局组件2.简写3.注意：标签名大小写2.创建私有组件1.创建全局组件<div id="app" style="border: 1px solid red; margin-bottom: 20px" > <huaxia></huaxia> <zwj></zwj> <b>-----------</b> <my-test>&l原创 2021-05-22 21:32:53 · 144 阅读 · 0 评论 -
07.动态指令和静态指令
文章目录1.静态指令v-once2.动态指令1.静态指令v-oncev-once称为静态指令，被他标记的标签调用data中的属性，只会调用一次，后续data内容发生改变，不会重新渲染全局的JavaScript代码如下：<script> let vm = new Vue({ el: "#app", data: { msg:"我是静态指令", attr:'href', myatt原创 2021-05-22 20:53:54 · 1048 阅读 · 0 评论 -
6.VUE事件对象event
案例1<div id="app"> <!--直接调用的为传参方法，方法中默认会有第一个参数传递进去，就是event对象--> <button type="button" @click="show">show</button></div> /*vue中使用event对象时，禁止使用event这个单词表示event对象**/ show(e){ console.log(e); },点击“show1”案例二原创 2021-05-22 20:25:19 · 334 阅读 · 0 评论 -
5.对象和数组更新检测
<div id="app"> <p v-for="(v,k) in obj">{{k}}-->{{v}}</p> <button type="button" @click="addKey">addKey</button> <ul> <li v-for="l in arr ">选项{{l}}</li> </ul> <button typ原创 2021-05-22 20:13:06 · 140 阅读 · 0 评论 -
4.v-for的使用
<script> let vm = new Vue({ el: "#app", data: { arr:["a","b","c"], obj:{ name:"老王", age:19, }, str:"hello wordl!", num:10, stu原创 2021-05-22 19:57:29 · 139 阅读 · 0 评论 -
3.v-if和v-show使用
v-if使用 <p v-if="msgShow">{{msg}}</p> <p v-if="age<12">儿童</p> <p v-else-if="age<=18">未成年</p> <p v-else>成年人</p>用v-if 切换登录方式：<div class="login"> <div v-if="isPhone" key=原创 2021-05-22 19:38:12 · 258 阅读 · 0 评论 -
vue写走马灯案例
案例截图:代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-2.4.0.js"></script> <style> div{ position: relative;原创 2021-05-22 09:31:48 · 311 阅读 · 0 评论 -
2.VUE模板语法，属性，样式，事件绑定，事件修饰符
一、概述 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。二、插值1.文本数据绑定最常见的形式就是使原创 2021-05-17 21:18:02 · 172 阅读 · 0 评论 -
1.VUE实例，VUE生命周期函数
一、MVCM（Mode）数据层V（View）视图层C（Controller）控制层M -> 发送通知 -> 控制层 -> 刷新视图V -> 发送通知 -> 控制层 -> 刷新数据二、MVVMMVVM（ Model-View-ViewModel ） 为一种设计模式，下图不仅概括了 MVVM 模式，还描述了在Vue.js 中ViewModel 是如何和 View 以及 Model 进行交互的。ViewModel 是 Vue.js 的核心，它是一个 Vue原创 2021-05-17 20:42:04 · 165 阅读 · 0 评论