摘要: 在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法。 HTML部分: JS部分: 点击 ref 按钮,得到以下结果: 阅读全文
posted @ 2019-01-22 23:34 CHECKY 阅读(825) 评论(0) 推荐(0) 编辑
摘要: 子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: JS部分: 结果: 阅读全文
posted @ 2019-01-22 23:09 CHECKY 阅读(170) 评论(0) 推荐(0) 编辑
摘要: 父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值。 HTML部分: JS部分: 注意:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使 阅读全文
posted @ 2019-01-16 00:59 CHECKY 阅读(189) 评论(0) 推荐(0) 编辑
摘要: 一、组件命名的方式 ①kebab-case,单词之间采用 - (短横线)连接,例如:my-component ,在DOM中使用时,<my-component ></my-component > ②PascalCase,驼峰式名称,单词之间,首字母大写,例如:MyComponent,但是在DOM中使用 阅读全文
posted @ 2019-01-16 00:51 CHECKY 阅读(3569) 评论(0) 推荐(0) 编辑
摘要: Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下几种常见的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 在 CSS 过渡和动画中自动 阅读全文
posted @ 2019-01-15 01:07 CHECKY 阅读(153) 评论(0) 推荐(0) 编辑
摘要: 概念:vue的生命周期的几个过程 实例从创建之前(beforeCreate) 实例创建之后(created) 模板渲染之前(beforeMount) 模板渲染之后(mounted) 数据更新后,页面更新前(beforeUpdate) 数据和页面都更新后(updated) 实例销毁之前(beforeD 阅读全文
posted @ 2019-01-15 00:45 CHECKY 阅读(165) 评论(0) 推荐(0) 编辑
摘要: 说明:在vue中有v-bind、v-model等内置的指令,当我们想实现一些对DOM元素底层的操作时,在vue没有提供内置方法时,我们可以自定义一些内置的指令。 一、定义一个全局的自定义指令 案例:来实现一个,元素自动获取焦点的案例,元素渲染完了后,自动获取光标焦点。 JS部分: 调用,在标签内加个 阅读全文
posted @ 2019-01-13 18:31 CHECKY 阅读(157) 评论(0) 推荐(0) 编辑
摘要: 在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: HTML部分: 结果: Vue内置的按键名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .righ 阅读全文
posted @ 2019-01-13 17:25 CHECKY 阅读(646) 评论(0) 推荐(0) 编辑
摘要: 定义:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: 一、定义全局过滤器: JS部分: 调用: 显示结果: 阅读全文
posted @ 2019-01-13 16:48 CHECKY 阅读(107) 评论(0) 推荐(0) 编辑
摘要: HTML部分: JS部分: 显示结果: 当点击 显示/隐藏 按钮后: 有图发现,根据Elements可见,v-show所在的p标签只是切换了display:none;的样式,而v-if所控制得标签,则被删除了。 总结: v-if 的特点:每次都会更新删除或创建元素 v-for 的特点:每次不会更新进 阅读全文
posted @ 2019-01-12 19:32 CHECKY 阅读(165) 评论(0) 推荐(0) 编辑