休息休息夏-CSDN博客

原创 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 10384 4

原创 28.VUE自定义事件--$emit()

VUE自定义事件--$emit自定义事件：当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。注意：此方法只用于子组件向父组件发送消息（数据）隔代组件或兄弟组件间通信此种方式不合适案例：<body><div id="app"> <parent&

2021-05-29 13:42:06 470

原创 27.VUE组件的状态保持keep-alive

VUE组件的状态保持keep-alive1. 使用场景：2.使用keep-alive1. 使用场景：当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这

2021-05-26 23:13:27 985 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 460 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 110 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 330 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 310

原创 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 188

原创 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 2433 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 920

原创 19.Vue计算属性

19.Vue计算属性1.计算属性介绍2.计算属性的使用计算属性的好处（缓存）：3.计算属性的setter和getter1.计算属性介绍什么是计算属性:是对data的补充。使用计算属性和使用data一致，没有区别。计算属性的特点:计算属性必须有一个函数并且返回值计算属性默认只读，不可更改计算属性默认缓存依赖，多次渲染时，依赖如果没有变化则只会调用一次。2.计算属性的使用注意点计算属性中的属性名可以直接在插值表达式或者指令中调用，和调用data中的值一样计算属性中的方法不能有参数!!

2021-05-24 20:42:08 519 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 410

原创 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 120

原创 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 383

原创 15.VUE---插槽slot

文章目录1.插槽的理解2.solt插槽的使用3.具名插槽1.插槽的理解根据自己看的博客，CSDN，引用其他博主，来理解插槽。插槽的目的在于，是组件更具有扩展性。举个栗子，电脑预留的usb接口，可以用来连接多种外部设备，耳机、音响、U盘等等，使得更具有扩展性。插槽slot的作用正是如此，例如，组件中的一个地方，默认情况下为button，而在使用的时候，我们有需求需扩展为span,扩展为input，这时候我们就需要使用到插槽。 &n

2021-05-23 20:02:04 197 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 543

原创 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 152

原创 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 99

原创 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 308 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 374 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> &lt

2021-05-23 09:23:58 414

原创 09.VUE组件模板template标签

09.组件的模板x-template的使用1.template使用2.x-template使用1.template使用<div id="app"> <test1></test1> <test2></test2> <test3></test3></div><template id="t1"&g

2021-05-23 09:08:55 746

原创 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 127

原创 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 1023

原创 6.VUE事件对象event

案例1<div id="app">  <button type="button" @click="show">show</button></div> /*vue中使用event对象时，禁止使用event这个单词表示event对象**/ show(e){ console.log(e); },点击“show1”案例二

2021-05-22 20:25:19 322

原创 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 126

原创 4.v-for的使用

2021-05-22 19:57:29 127

原创 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 242

原创 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 305

原创 1.Ajax 运行原理，以及实现步骤

Ajax 的应用场景1.页面上拉加载更多数据2.列表数据无刷新分页3.表单项离开焦点数据验证4.搜索框提示文字下拉列表Ajax 运行原理Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。Ajax 的实现步骤创建 Ajax 对象 var xhr = new XMLHttpRequest();告诉 Ajax 请求地址以及请求方式xhr.open('get', 'http://www.example.com'

2021-05-20 21:19:42 116

原创 2.VUE模板语法，属性，样式，事件绑定，事件修饰符

一、概述 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。二、插值1.文本数据绑定最常见的形式就是使

2021-05-17 21:18:02 156

原创 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 156

原创 4.数据库高级查询

1.去重，Like查询# 去除重复的值DISTINCT# 查询age不重复的值(某列)SELECT DISTINCT age FROM teacher;# 查询age不重复的值(某行)SELECT DISTINCT id,name,age,scode,mScore FROM teacher;# LikeSELECT * FROM teacher WHERE `name` LIKE 'weidong'# like 带 %# 查询teacher表中name字段值以w开头的name值# %

2021-05-16 20:46:06 123

原创 3.select，in，between 控制查询

CREATE TABLE teacher(id INT,name VARCHAR (20),age INT,code INT,score INT);INSERT INTO teacher VALUES(1,'李四',25,001,59);INSERT INTO teacher VALUES(2,'王五',25,002,60);INSERT INTO teacher VALUES(3,'六',25,003,70);INSERT INTO teacher VALUES(4,'七',25,00

2021-05-16 20:42:56 388 1

原创 2.数据库的插入，约束，删除

插入，数据库约束，设置列值自动增长1.插入数据语法1#INSERT INTO 表名（列名1，列名2）VALUES（值1，值2）；INSERT INTO person (id,name) VALUES(1,'李四')语法2：不指定列名但是要按照数据库表中的顺序，进行书写INSERT INTO person VALUES(NULL ,'李四')2.数据库约束#表的约束：维护数据完整性，给列唯一的标识#创建表时候设置主键约束CREATE TABLE student( id IN

2021-05-16 20:39:57 188 1

原创 1.数据库语句--添加，删除字段

1.数据库基本使用1.创建数据库并指定编码CREATE DATABASE test2 CHARACTER SET 'GBK'SHOW DATABASES;2.查看数据库语句SHOW CREATE DATABASE test23.修改数据库的编码ALTER DATABASE test2 CHARACTER set 'aaa'4.删除数据库CREATE DATABASE test3 CHARACTER#DROP DATABASE test3;5.切换数据库USE test2;

2021-05-16 20:33:47 357

原创 jQuery中原型，原型链

1.原型的概念和作用什么是原型在javascript中规定，每个函数(大部分时间只针对构造函数来使用)都有一个prototype属性，这个属性就是原型。他的值是一个对象类型的值。prototype指向另一个对象，我们写的函数会默认的，自动的继承prototype所指向的这个对象。原型的作用当数据或者函数需要被共享时，把他交给prototype原型来管理，这样可以节省资源。2.原型的使用function Student(name,sex,age){ this.name=name;

2021-05-14 15:48:49 406

原创 empty，remove，detach 三个删除区别

标题：empty，remove，detach 三个删除区别代码演示：<style> div{ height: 200px; width: 200px; background-color: orange; }</style><body> <button type="button" id="empty">empty删除</button> <button typ

2021-05-09 12:59:38 437

原创 ES6中可枚举属性和遍历

可枚举性和遍历以下四种都会忽略不可枚举属性1.for-in循环2.Object.keys3.JSON.stringify4.Object.assign以下两种方案获取所有属性，不管是否枚举1.getOwnPropertyNames2.ReflectObject.valuesObject.entries总结：什么属性不能枚举js基本数据类型自带的原型属性不可枚举。通过Object.defineProperty()方法指定enumeralbe为false的属性不可枚举。注意：基本数据类型指的是js原有的

2021-04-27 15:03:00 1207

原创 1.const变量

ES6中 const变量简单介绍const和let完全相同，仅在用const声明的变量必须在声明时赋值而且不可以重新赋值。const是一个不会变化的常量实际上，在开发中，应该尽量使用const来声明变量，以保证变量的值不会被随意篡改。1.根据经验，在开发中的很多变量，都是不会更改的，也不应该更改的2.后续的很多框架或者是第三方JS库，都要求数据不变，使用常量可以一定程度上保证这一点。const name = "老张";// name = "老刘";报错，更改name的值/

2021-04-24 20:40:25 478

空空如也

空空如也