- 博客(28)
- 收藏
- 关注
RSS订阅原创 子组件通过调用父组件传递方法，向父组件传递数据
注意： 子组件向父组件传递数值，通过v-on绑定方法。通过父组件的方法接收的数据接口，供子组件改变，然后通this.datamagFromSon方法改变改变父组件的值，变相传递数据。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2018-09-28 21:48:11
1020
1
原创 vue组件—父组件向子组件传值（通过属性绑定）
浏览器调试工具显示的正确的，调用父类方法功能能实现，但是出现了两次定义标签内容，两个按钮其中一个不能正常响应：是因为将传值跟绑定事件的两个作用分开了，方便观察注意：1.v-bind数据绑定时，可能由于某种命名的规范方法或者属性名字不能是带有驼峰或者连字符的。并且绑定之后，还要放到子组件的props数据后，方可调用。2.子组件调用的父组件的属性，只能读不能写。同时，子...
2018-09-28 20:44:31
17633
原创 vue组件切换—component标签实现多个组件的切换和组件动画的实现
要点： 1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换 2.只需将<component>组件定义的标签用<transition>包裹起来即可HTML代码：<!DOCTYPE html><html lang="en"><head> <meta ..
2018-09-28 17:38:23
6331
6
原创 vue组件切换—v-if和v-else切换两种状态
注意： 通过v-if或者v-else切换显示注册和登录，但是只能在两种状态下切换HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
2018-09-28 17:05:08
5476
原创 Vue组件—data等属性
注意：1.组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods2.因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响HTML代码：<!DOCTYPE html><html lan...
2018-09-28 10:54:48
1815
原创 Vue组件—通过将template定义为独立标签注册组件和私有组件的注册
注意: 1.将直接在template后面的内容，通过template标签写出来，代码可读性更强，通过id进行连接 2.同时也可以自定义组件，定义的方法和用法跟私有过滤器和私有指令一个套路HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charse...
2018-09-28 10:08:37
2894
原创 Vue组件—通过接收template内容注册
注意： 1. 组件调用时的规范，组件名如果有驼峰改为小写用连字符连接，JAVA规范改JavaScript规范 2.注意组件内部，有且只有一个根元素。其余元素，需要被其包裹起来HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2018-09-28 09:40:58
1246
原创 vue动画—列表的添加和删除效果
注意：1.通过v-for遍历多个元素时，不用transition而用transition-group包裹。同时，需要定义key属性。2.注意一下边框的虚线效果，以前没注意。以及退场时，套用的两段代码，以后理解。3.transition-group还要两个属性，appear属性指定整体的列表渲染时的动画，tag="ul"为渲染transition-group时不当作<span>...
2018-09-27 22:02:43
4456
原创 vue动画—通过钩子函数实现半场动画
注意：1.起始位置设置了一个（0，0）在第一遍执行时，是没有作用的。在一次入场动画执行完成之后，在最终位置停下来并不在起始位置，通过这里的位置的设置可以将入场动画结束时的位置调到这里2.理解enter()函数的el的指代对象和done()指代的回调函数3.理解this.show = !this.show，这句话有两个作用。一是：控制显示和隐藏，二是：false —> true为半...
2018-09-27 20:11:22
1946
原创 Vue动画—第三方类库实现动画
注意：1.使用了Animate类库，方便直接调用各种动画。点击进入官网2.用法大致同Bootstrap HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</titl
2018-09-25 21:15:26
13491
1
原创 vue动画—过度类方式实现（transition）
注意：transition承载的动画标签，添加一个类名，即可在动画的时间点或者时间段上，将v-前缀改为自己的类名，这样可以避免动画冲突HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&a
2018-09-25 20:45:43
587
原创 通过动态列表了解—vue自定义指令、过滤器和事件修饰符等
提要：1.最重要能够理解Vue的设计好处，浏览器持续监视model实例的改变而做出相应的改变。所以前端开发人员，不需要考虑数据改变以后浏览器该如何重新渲染页面，只需关注业务逻辑代码。2.查询功能，只需返回索引即可（Vue好处）3.全局过滤器和私有过滤器的定义4.全局自定义指令和私有自定义指令的定义5.键盘修饰符的定义 HTML代码：<!DOCTYPE htm...
2018-09-25 20:01:52
734
原创 Vue-resource三种请求格式和万能测试地址
注意：1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。 HTML代码：<!DOCTYPE html><html lang="en"><head> <met...
2018-09-24 16:13:00
5180
4
原创 Vue的过滤器
注意：1.可以同时调用多个过滤器，但是一个一个执行，前面的过滤器的结果执行完成之后再执行其他的过滤器。2.处理字符串的替换，可能会用的正则表达式，才能全局替换目标，字符串。3.全局和私有的过滤器，名称一样时，优先调用私有的过滤器，就近原则。<!DOCTYPE html><html lang="en"><head> <meta ...
2018-09-23 20:07:37
161
原创 v-if和v-show
注意：1.v-if每次都会重新创建和删除元素，切换消耗较大。v-show只改变元素的display属性，但一直占用渲染消耗2.当元素被频繁的切换时，用v-show，一些默认不显示的元素，特定条件下使用的元素用v-ifHTML代码：<!DOCTYPE html><html lang="en"><head> <meta chars...
2018-09-23 13:17:42
116
原创 v-for进阶——组件中使用时，注意绑定key作为指定区分
原因：对于已经渲染过的页面元素，Vue默认使用“就地复用的原则”，不会移动DOM元素来匹配数据注意：1.作为key，一定时唯一的，并且需要被v-bind绑定2.v-bind绑定的key属性只能只用唯一的number或String没有绑定出现的问题：key值使用之后：绑定key之后的HTML代码：<!DOCTYPE html><html la...
2018-09-23 11:11:15
1176
原创 Vue使用样式和内联样式
注意：1.Vue中使用样式，必须用v-on（缩写成:）绑定2.在Js中，对象（无序键值对）的类名单引号可以省略，但是属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号，属性名（键值）必须使用单引号隔开。所以都用单引号不会出错。<!DOCTYPE html><html lang="en"><head> <meta cha...
2018-09-23 09:28:59
2845
原创 v-model实例——山顶洞人计算器
HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"&a
2018-09-22 10:32:03
403
原创 v-model——双向数据绑定
注意：1.v-model双向绑定，v-bind只能单项绑定2.v-model只能用在表单元素中 HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&am
2018-09-22 09:56:57
159
原创 vue事件修饰符
注意：1.self事件自会阻止自己的冒泡事件或者监听事件，不会影响其他元素，.stop会影响整体。2.注意事件修饰符的使用位置，.stop阻止事件冒泡自下而上，.capture自上而下执行。所以一个在用在子元素，一个在父元素3.事件修饰符可以联合使用，并且顺序对结果没有任何影响 HTML代码：<!DOCTYPE html><html lang="en"...
2018-09-22 09:26:02
152
原创 跑马灯效果——this的使用和计时器
注意：1.VM机制，加载完页面后还持续监听data数据，一旦改变随之改变。是本地改变页面的基础，也是这个框架优点2.了解在此机制中，在VM实例中，如果想要获取data中的数据，或者调用methods中的方法，要使用this关键字实现3.ES6不是idea的默认规范，要调整。HTML代码：<!DOCTYPE html><html lang="en">...
2018-09-21 11:03:33
452
原创 绑定属性和事件——v-on，v-bind
注意：1.v-bind：可以直接缩写成： v-on：可以缩写成@2.在idea环境中，如果Vue指令没有编程红色，可能是符号状态忘记切换成英文(对这几个常用指令，对v-model就不符合) HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
2018-09-21 09:39:15
1280
原创 插值表达式闪烁问题——v-clock，v-html，v-text
HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-clock]{
2018-09-21 08:57:47
2505
原创 v-for迭代
注意：1.即使遍历数字时用不到任何的Model实例中的任何值，也需要创建一个实例才可以正常运行2.v-for遍历任何数组都可以建立索引<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</
2018-09-18 09:29:38
332
原创 bootstrap开发的新闻网站
写在开发前：1.如果用bootst框架开发网站，某些页面的排版怎么修改都不能达到预期效果，可能是承载这个盒子的元素，没有清除浮动。2.该框架的样式，有些需要更改时，在CSS中，继承修改即可。不可改库文件的源码，可能会出各种问题。3.在写新闻标题，用<h1>标签承载，会使页面被爬取的概率加大。以后写页面，可能在学习以下怎么被加载的更快，以及被搜索引擎爬取的概率加大。 ...
2018-09-16 12:45:23
7696
3
原创 Bootstrap基本格式和栅格系统
提一句：如果引入任何框架的库文件，下载后本地引入可以有代码提示，如果在线引入则不会有，Bootstrap也是基于Jquery开发的，所以要后引入。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi
2018-09-10 13:23:34
264
原创 将发布的地图，以及源码等嵌入页面
HTML代码：注意：这里添加图片，需要将 http://localhost:63342/arcgisForJs/写全<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一幅地图</title&g
2018-09-08 18:08:10
454
原创 通过ArcMap发布第一个地图
arcgis桌面端各版本https://www.sucaitu.cc/archives/7699安装时注意：统一安装到C盘默认的位置，不然又会出现各种问题，另外：最重要的是，一定要先安装server，再安装desktop。 第一步： 将做好的地图，保存文件格式为.mxd格式（设置相对路径，减少添加数据的负担）注意：例如，如1图 文件夹中是地图数据，shanghai文件是保...
2018-09-08 10:56:35
1380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人