HTML
·Mr.zuo
这个作者很懒,什么都没留下…
展开
-
ES6之模板引擎&&字符串模板x-template
前言在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。比如有的时候需要使用弹出框的时候手动使用字...原创 2019-11-07 20:07:10 · 163 阅读 · 0 评论 -
Vue之全局API(全局操作set+delete)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...原创 2019-11-06 16:12:36 · 223 阅读 · 0 评论 -
VUE之全局API(自定义指令directive)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作V...原创 2019-11-04 17:15:36 · 1982 阅读 · 0 评论 -
VUE之内置指令②(文本渲染指令VS插值表达式)
文本渲染指令v-text文本渲染指令:这里补充个vue基础指令v-text文本渲染指令,v-text取值为数据data中某项时,便以文本形式渲染到DOM中场景:如果想单纯展示vue对象中的数据,可以使用文本渲染指令v-text插值表达式{{}}对比v-text(1)是否显示虚拟DOM即virtual dom验证后发现两者渲染结果完全一样,页面元素也一样。区别:但是如果你把...原创 2019-11-04 16:17:44 · 330 阅读 · 0 评论 -
VUE之过渡动画钩子函数+Velocity.js动画库
前言CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。JS钩子函数方式+第三方库除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVelocity.js...原创 2019-10-31 15:11:24 · 1619 阅读 · 0 评论 -
VUE之过渡+动画
大纲(1)页面初始化渲染动画(2)transition过渡+@keyframes动画(3)过渡&&动画时长控制—type属性(4)自定义时长页面初始化渲染动画目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-clas...原创 2019-10-31 14:45:52 · 335 阅读 · 0 评论 -
VUE之动画与animate.css动画库
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过渡动画原理在进入/离开的过渡中,会有 6 个...原创 2019-10-31 14:34:30 · 3129 阅读 · 0 评论 -
VUE之过渡transition
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库,如 Velocity.js—JS动画库Vu...原创 2019-10-31 14:20:13 · 389 阅读 · 0 评论 -
Vue图书管理系统
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图书管理</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>...原创 2019-10-29 18:55:56 · 4743 阅读 · 0 评论 -
VUE之组件(组件通信、单向数据流)
组件通信我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。单向数据流单向数据流是父子组件的核心概念,props是单向绑定的。当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子组件无意间修改来父组件的状态,从下往上的数据流是不允许的。当父组件属性改变时,会传进子组件。...原创 2019-10-23 19:39:05 · 96 阅读 · 0 评论 -
VUE之组件(动态组件及keep-alive)实现选项卡
动态组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡案例</title> <script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"...原创 2019-10-23 19:25:06 · 787 阅读 · 0 评论 -
VUE之组件(复用性、props、单向数据流)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种:全局注册和局部注册。组件复用性可以将组件进行任意次数的复用,例如,利用组件定义一个超级链接,在项目中多次使用单个根元素...原创 2019-10-22 19:40:01 · 1066 阅读 · 0 评论 -
VUE之组件(基础、分类、命名)
前言组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。接下来会由浅入深地学习组件的全部内容,并通过几个案例练习熟练使用 Vue 组件。Vue.js的组件就是提高重用性的,让代码可复用组件注册回顾下创建 Vue 实例的方法:组件Component与之类似,需要注册后才可以使用。注册有全局注册和局部注册两种方式。①全...原创 2019-10-22 15:06:48 · 1442 阅读 · 0 评论 -
静态补充CSS类型转换
块级元素常用的块级block标签:<hn>...</hn> 标题标签<hr> 水平分割线<p>...</p> 段落<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...原创 2019-10-21 19:43:19 · 91 阅读 · 0 评论