01 2019 档案

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