Vue
关注
分享
扫一扫
何迟
这个作者很懒，什么都没留下…
展开
-
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 · 356 阅读 · 0 评论 -
Vue组件—通过接收template内容注册
注意： 1. 组件调用时的规范，组件名如果有驼峰改为小写用连字符连接，JAVA规范改JavaScript规范 2.注意组件内部，有且只有一个根元素。其余元素，需要被其包裹起来HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-09-28 09:40:58 · 1276 阅读 · 0 评论 -
Vue组件—通过将template定义为独立标签注册组件和私有组件的注册
注意: 1.将直接在template后面的内容，通过template标签写出来，代码可读性更强，通过id进行连接 2.同时也可以自定义组件，定义的方法和用法跟私有过滤器和私有指令一个套路HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-09-28 10:08:37 · 2938 阅读 · 0 评论 -
Vue组件—data等属性
注意：1.组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods2.因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响HTML代码：<!DOCTYPE html><html lan...原创 2018-09-28 10:54:48 · 1842 阅读 · 0 评论 -
vue组件之间的数据传递实例—评论留言自动刷新功能
注意：1.最重要理解这里的父组件的刷新功能，通过v-on事件绑定委托给子组件执行，因为子组件的提交按钮和父组件的刷新评论的功能是分开的。2.没有数据时直接点击提交按钮时会出bug，并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的，通过localStorage清除缓存，如下 。最后的执行效果，会有演示，本来可以做出判断为空时，不给提交，这里为了说明这个问题...原创 2018-10-07 09:56:51 · 2075 阅读 · 1 评论 -
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 · 5514 阅读 · 0 评论 -
通过$ref来操作DOM元素和组件
要点：这里的$ref相关的操作就是为了避免操作DOM，Vue提供的方案。效果等同于原生的id，然后操作HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&原创 2018-10-07 11:08:16 · 1942 阅读 · 0 评论 -
vue组件切换—component标签实现多个组件的切换和组件动画的实现
要点： 1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换 2.只需将<component>组件定义的标签用<transition>包裹起来即可HTML代码：<!DOCTYPE html><html lang="en"><head> <meta ..原创 2018-09-28 17:38:23 · 6392 阅读 · 6 评论 -
vue路由的定义、起始页面、切换、高亮显示
原理：1.浏览器持续监听着path属性的变换，从而使其对应的component组件发生变化，页面内同改变。2.理解router-view元素的占位符的作用HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&am原创 2018-10-07 15:45:25 · 1970 阅读 · 0 评论 -
vue组件—父组件向子组件传值（通过属性绑定）
浏览器调试工具显示的正确的，调用父类方法功能能实现，但是出现了两次定义标签内容，两个按钮其中一个不能正常响应：是因为将传值跟绑定事件的两个作用分开了，方便观察注意：1.v-bind数据绑定时，可能由于某种命名的规范方法或者属性名字不能是带有驼峰或者连字符的。并且绑定之后，还要放到子组件的props数据后，方可调用。2.子组件调用的父组件的属性，只能读不能写。同时，子...原创 2018-09-28 20:44:31 · 17739 阅读 · 0 评论 -
子组件通过调用父组件传递方法，向父组件传递数据
注意： 子组件向父组件传递数值，通过v-on绑定方法。通过父组件的方法接收的数据接口，供子组件改变，然后通this.datamagFromSon方法改变改变父组件的值，变相传递数据。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-09-28 21:48:11 · 1046 阅读 · 1 评论 -
vue路由传参两种方式—分别操作query和parames
注意：1.第一种方式：通过在router-link中用？&等符号进行操作，操作的是query元素2.第二种方式：在routeer-link中给id赋值，将占位符的位置取代，操作的是parames元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2018-10-07 20:56:40 · 1063 阅读 · 0 评论 -
vue路由—实现经典布局（同一个路由，对应多个组件）
要点：1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2018-10-09 08:43:38 · 8881 阅读 · 0 评论 -
vue-watch监听非DOM元素的事件
注意：1.通过键盘监听事件完成姓名的拼写监听的是DOM元素中的事件，是用户操作直接的事件。而watch可以监视路由等非DOM元素的事件。2.watch监视非DOM元素事件，只需将本实例中的firstname2属性名字符串换成 '$route.path' 变量名即可，注意单引号3.单引号的使用规则：一、字符串中带有英文连字符使用，不能使用有些驼峰原则的时候 二、本来都要使用单引号的，...原创 2018-10-09 10:34:05 · 988 阅读 · 0 评论 -
vue动画—列表的添加和删除效果
注意：1.通过v-for遍历多个元素时，不用transition而用transition-group包裹。同时，需要定义key属性。2.注意一下边框的虚线效果，以前没注意。以及退场时，套用的两段代码，以后理解。3.transition-group还要两个属性，appear属性指定整体的列表渲染时的动画，tag="ul"为渲染transition-group时不当作<span>...原创 2018-09-27 22:02:43 · 4519 阅读 · 0 评论 -
Vue使用样式和内联样式
注意：1.Vue中使用样式，必须用v-on（缩写成:）绑定2.在Js中，对象（无序键值对）的类名单引号可以省略，但是属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号，属性名（键值）必须使用单引号隔开。所以都用单引号不会出错。<!DOCTYPE html><html lang="en"><head> <meta cha...原创 2018-09-23 09:28:59 · 2894 阅读 · 0 评论 -
vue动画—通过钩子函数实现半场动画
注意：1.起始位置设置了一个（0，0）在第一遍执行时，是没有作用的。在一次入场动画执行完成之后，在最终位置停下来并不在起始位置，通过这里的位置的设置可以将入场动画结束时的位置调到这里2.理解enter()函数的el的指代对象和done()指代的回调函数3.理解this.show = !this.show，这句话有两个作用。一是：控制显示和隐藏，二是：false —> true为半...原创 2018-09-27 20:11:22 · 1977 阅读 · 0 评论 -
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 · 1213 阅读 · 0 评论 -
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 · 139 阅读 · 0 评论 -
Vue的过滤器
注意：1.可以同时调用多个过滤器，但是一个一个执行，前面的过滤器的结果执行完成之后再执行其他的过滤器。2.处理字符串的替换，可能会用的正则表达式，才能全局替换目标，字符串。3.全局和私有的过滤器，名称一样时，优先调用私有的过滤器，就近原则。<!DOCTYPE html><html lang="en"><head> <meta ...原创 2018-09-23 20:07:37 · 171 阅读 · 0 评论 -
Vue-resource三种请求格式和万能测试地址
注意：1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。 HTML代码：<!DOCTYPE html><html lang="en"><head> <met...原创 2018-09-24 16:13:00 · 5212 阅读 · 4 评论 -
通过动态列表了解—vue自定义指令、过滤器和事件修饰符等
提要：1.最重要能够理解Vue的设计好处，浏览器持续监视model实例的改变而做出相应的改变。所以前端开发人员，不需要考虑数据改变以后浏览器该如何重新渲染页面，只需关注业务逻辑代码。2.查询功能，只需返回索引即可（Vue好处）3.全局过滤器和私有过滤器的定义4.全局自定义指令和私有自定义指令的定义5.键盘修饰符的定义 HTML代码：<!DOCTYPE htm...原创 2018-09-25 20:01:52 · 769 阅读 · 0 评论 -
vue动画—过度类方式实现（transition）
注意：transition承载的动画标签，添加一个类名，即可在动画的时间点或者时间段上，将v-前缀改为自己的类名，这样可以避免动画冲突HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&a原创 2018-09-25 20:45:43 · 621 阅读 · 0 评论 -
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 · 13546 阅读 · 1 评论 -
插值表达式闪烁问题——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 · 2542 阅读 · 0 评论 -
绑定属性和事件——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 · 1299 阅读 · 0 评论 -
跑马灯效果——this的使用和计时器
注意：1.VM机制，加载完页面后还持续监听data数据，一旦改变随之改变。是本地改变页面的基础，也是这个框架优点2.了解在此机制中，在VM实例中，如果想要获取data中的数据，或者调用methods中的方法，要使用this关键字实现3.ES6不是idea的默认规范，要调整。HTML代码：<!DOCTYPE html><html lang="en">...原创 2018-09-21 11:03:33 · 484 阅读 · 0 评论 -
vue事件修饰符
注意：1.self事件自会阻止自己的冒泡事件或者监听事件，不会影响其他元素，.stop会影响整体。2.注意事件修饰符的使用位置，.stop阻止事件冒泡自下而上，.capture自上而下执行。所以一个在用在子元素，一个在父元素3.事件修饰符可以联合使用，并且顺序对结果没有任何影响 HTML代码：<!DOCTYPE html><html lang="en"...原创 2018-09-22 09:26:02 · 168 阅读 · 0 评论 -
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 · 182 阅读 · 0 评论 -
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 · 443 阅读 · 0 评论 -
vue—computed计算属性
要点：1.computed定义的属性，称为计算属性。本质是定义的方法，但是我们在使用时，直接当作属性使用，不用加()2.每次计算属性使用的数据发生改变时，计算属性调用其处理方法3.将计算属性的最新的值，放在缓存中。只有在计算属性的变量改变时，才会重新将缓存内容刷新。所以，别的方法调用计算函数结果时，如果没有触发变量的改变，不会调用对应的functionHTML代码：<!...原创 2018-10-09 11:00:10 · 457 阅读 · 0 评论