摘要：
一、父子组件 在一个组件内部定义另一个组件，称为父子组件。 子组件只能在父组件内部使用。 默认情况下，子组件不能访问父组件的数据，每个组件实例作用域都是独立的。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" 阅读全文
posted @ 2021-09-09 10:43
AnnLing
阅读(315)
评论(0)
推荐(0)
摘要：
一、内置组件component 1、component简介 有的时候，在不同组件之间进行动态切换是非常有用的。这时候就需要使用动态组件。 通过 Vue 的 <component> 元素加一个特殊的 is 属性来实现，写法： <component :is=''> </component> 多个组件使用 阅读全文
posted @ 2021-09-08 17:38
AnnLing
阅读(1096)
评论(0)
推荐(0)
摘要：
一、引用模板 引用模板就是把组件的内容放到<template></template>中并引用。一般当组件的内容比较多的时候使用引用模板的方式。 二、代码实例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 阅读全文
posted @ 2021-09-08 17:36
AnnLing
阅读(630)
评论(0)
推荐(0)
摘要：
一、组件的分类 组件可以分类为：全局组件和局部组件。 1、全局组件 全局组件可以在所有的vue实例中使用。使用Vue.component定义全局组件。 2、局部组件 局部组件只能在当前vue实例中使用。使用Vue中的components选项定义局部组件。 1 <!DOCTYPE html> 2 <h 阅读全文
posted @ 2021-09-08 16:49
AnnLing
阅读(1190)
评论(0)
推荐(1)
摘要：
一、组件component 1、什么是组件 组件是vue。js最强大的功能之一，组件可以扩展html元素，封装可重用的代码。组件就是自定义的元素，组件也是自定义的对象。 2、如何自定义组件？ 方式1：使用组件构造器定义组件（太麻烦，不推荐使用） 先使用Vue.extend创造组件构造器，由组件构造器 阅读全文
posted @ 2021-09-08 16:31
AnnLing
阅读(236)
评论(0)
推荐(0)
摘要：
一、多元素动画 需要使用transition group组件。 <transition group> </transition group> 二、实例 动画显示搜索结果。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U 阅读全文
posted @ 2021-09-08 11:58
AnnLing
阅读(106)
评论(0)
推荐(0)
摘要：
一、安装animate.css 1、运行cpm install animate.css --save 2、找到下载的animate.css文件夹 3、拷贝animate.css源文件 二、引入animate.css 1、在项目中新建文件夹css存放所有css源文件，将animate.css源文件存放 阅读全文
posted @ 2021-09-08 11:22
AnnLing
阅读(576)
评论(0)
推荐(0)
摘要：
一、过渡的简介 Vue在插入、更新或移除DOM的时候，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation。 二、基本用法 使用transition组件，将要执行动画的元素包含在该组件内。 <transition> </transition> 说明：t 阅读全文
posted @ 2021-08-30 11:10
AnnLing
阅读(113)
评论(0)
推荐(0)
摘要：
一、需求 实现方块在屏幕上任意拖拽的功能。 二、代码实现 自定义指令drag，实现拖动功能。div绑定自定义指令v-drag，实现div的拖动功能。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <t 阅读全文
posted @ 2021-08-30 09:55
AnnLing
阅读(260)
评论(0)
推荐(0)
摘要：
一、简介 vue可以自定义指令。自定义指令分为：全局指令和局部指令。 二、自定义指令 1、自定义全局指令 使用全局API中的Vue.directive 来实现自定义全局指令。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset= 阅读全文
posted @ 2021-08-27 15:33
AnnLing
阅读(4254)
评论(0)
推荐(0)
浙公网安备 33010602011771号