- 博客(21)
- 收藏
- 关注
RSS订阅原创 VUE中常用组件库
VUE中常用组件库1.vant2.Ant Design Vue3.Element UI（1）.vant的使用1.安装 vantnpm i vant -S2.babel-plugin-import（这个插件安装后才可以实现按需加载的）npm i babel-plugin-import -D3.在babel.config.js 中配置 添加 plugins: [ ['import', { libraryName: 'vant', libraryDirec
2020-05-21 21:37:53
1341
原创 VUE中全局过滤器，局部过滤器
VUE中全局过滤器，局部过滤器局部过滤器1.添加filters钩子2.在具体数据 | 名字, filters: { //局部过滤器 moneyFilter(value) { return '￥' + Number(value).toFixed(2); } }全局过滤器在main.js中定义Vue.filter('wholeMoneyFormat',(valu
2020-05-21 21:34:54
373
原创 VUE中事件处理，处理事件冒泡等
VUE中事件处理，处理事件冒泡等.prevent 阻止父元素的事件.stop 阻止事件冒泡按键修饰符<template> <div> <button @click="clickBtn('点击了',$event)">点击</button> <h3>事件修饰符</h3> <a href="http://www.baidu.com" @click.pr
2020-05-21 21:32:38
410
原创 VUE中moment插件，格式小数点位数，时间样式等
moment格式化时间在webstorm中右击项目，Open in Terminalnpm i moment --save要记得在要使用的vue中导入import moment from “moment”mounted钩子，全部加载完毕后执行设置定时器实施实时更新日期<template> <div> <h3>格式化人民币</h3> <p>{{money | moneyFilter}}</
2020-05-21 21:30:36
652
原创 VUE中过渡
VUE中过渡6个过渡指令v-enterv-enter-activev-enter-tov-leavev-leave-activev-leave-to过渡动画的使用1.要做过渡都要在 标签里面2.给<transition>命名 <transition name="fade">3.在style中进行过渡动画编写.fade-enter就是把前面6个过渡指令的v换成fade//css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另
2020-05-21 21:26:26
126
原创 VUE中自定义动画
VUE中自定义动画 动画的使用1.首先在style中定义好动画和名字@keyframes bounce { 0%{ transform: scale(0); } 25%{ transform: scale(0.2); } 50%{ transform: scale(0.4); } 75%{ tran
2020-05-21 21:23:12
914
原创 VUE中动画库
VUE中动画库animate.css动画库的使用在webstorm中右击项目，Open in Terminalnpm install animate.css --save要记得在要使用的vue中导入import animate from ‘animate.css’<h1 class="animate__animated animate__bounce">An animated element</h1>直接在标签中引用，添加动画样式...
2020-05-21 21:21:11
941
原创 VUE中钩子生命周期
VUE中钩子生命周期一个vue会有8个钩子，data和methods不算，生命周期需要的数据和函数mounted是组件都加载完成后做事情（例如添加定时器）一个组件页面可以正常进行，就已经跑完前4个钩子了页面数据发生变化等就会执行beforeUpdate，Updata第7 8 个组件调用$destroy()来执行删除（这样销毁不会销毁全局的东西，定义在全局的定时器等要注意）clearInterval(this.intervalId); beforeCreate() {
2020-05-21 21:19:01
163
1
原创 VUE中组件通信
VUE中组件通信1.使用props2.自定义事件3.PubSub发布订阅4.vuex(重点)注意点：1.不要通过子组件来改变父组件的状态数据（应该告诉父组件，让父组件自己改）2.数据和处理数据的函数应该在同一模板内（父组件的数据要修改，方法等要绑定在父组件中，然后再传给子组件才合理）第一种方法props的使用：（1）.在子组件中添加props插件<script> export default { name: "PropsComponent",
2020-05-21 21:06:35
123
原创 VUE中实名插槽
VUE中实名插槽插槽的使用//在子组件中添加插槽<slot name="a1"></slot><slot name="a2"></slot><slot name="a3"></slot>//在父组件中填入插槽<div slot="a1"> <p> <input> </div><div slot="a2"> <p> <input> <
2020-05-21 20:40:27
160
原创 VUE中全局指令和局部指令
VUE中全局指令和局部指令案例：全局指令变大写，局部指令变小写定义全局指令， 在main.js中Vue.directive('upper-word',(el,binding)=>{ el.textContent = binding.value.toUpperCase();})定义局部指令，在组件中添加钩子 // 自定义局部指令 ,directives:{ 'lower-word'(el,binding){
2020-05-14 15:44:16
470
原创 VUE中列表渲染-遍历排序，如年龄的升序降序，sort()方法
VUE中列表渲染-遍历排序1.通过按钮的点击事件，修改传入的orderType的值，在0 1 2中变化 <button @click="orderByAge(0)">默认</button> <button @click="orderByAge(2)">年龄向上升序</button> <button @click="orderByAge(1)">年龄向下升序</butto
2020-05-14 15:42:05
3783
原创 VUE中过滤遍历
VUE中过滤遍历先用v-for遍历后再通过computed钩子来计算过滤（使用了.trim()过滤空格.filter（）过滤不满足括号后的条件，留下满足条件的.indexOf（）检索的字符串值有没有出现，没有出现则该方法返回 -1）<template> <div> <h3>搜索列表</h3> <input type="text" placeholder="请输入要搜索的姓名" v-model="sea
2020-05-14 15:27:25
1200
原创 VUE中使用插件shortID生成随机ID，map生成新数组
插件shortID生成随机ID如何使用：1.在webstorm项目中右击，Open in Terminal2.输入npm i shortid --save 安装对应的插件npm i shortid --save3.在要使用的组件中导入4.shortId.generate()import shortId from ‘shortid’map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。必须有一个function方法和cur
2020-05-14 15:21:14
1692
原创 VUE中列表渲染，遍历数组和对象
VUE中列表渲染，遍历数组和对象数组遍历，对象遍历，数字遍历，字符串遍历，可迭代协议的遍历为什么绑定KEY，给每个虚拟节点唯一的ID，本案例没有绑定KEYv-for="(person,index) in persons（使用了v-for）<template> <div> <h3>遍历数组</h3> <ul> <li v-for="(person,index) in p
2020-05-14 15:06:36
1338
原创 VUE中条件渲染指令v-if和v-show
条件渲染指令v-if和v-showv-if和v-show的区别如果用v-if和v-show来实现DOM元素的显示与不显示v-if实现dom元素的删除v-show只是内部添加display：none样式需要频繁的使用切换，那么就用v-show（使用了指令 v-if ， v-show ，@click ）@click=“flag=!flag” 点击切换<template> <div> <div v-if="flag">今天晚上出去玩<
2020-05-14 15:03:00
186
原创 VUE中样式的动态绑定:class 和:style
:class 和:style动态样式的绑定:class绑定DOM元素的整体样式:style绑定DOM元素中的部分样式，例如背景颜色还是字体大小等:class的使用1.现在这里定义动态绑定样式的名称2.编写动态样式的样式3.绑定动态的样式 :class="[oneClass,twoClass]":style的使用1定义样式名字及内容2直接绑定对应的DOM元素:style="（使用了:class 和 :style）<template> <div>
2020-05-14 14:56:14
870
原创 VUE中钩子函数computed和watch
computed和watch的作用和区别1.computed计算属性可以把在dom元素中计算的变到VM中计算，加快速度2.侦听器watch 比computed灵活；可以做函数节流，Ajax异步数据获取，操作DOM；依赖固定的数据类型3.总结 computed计算新属性，惰性求值，watch侦听一个原本就存在的数据，发生变化就执行函数computed适合一个数据被多个数据影响，由多个数据计算得来watch使用多个数据影响一个数据watch不能双向绑定(使用了钩子函数computed和watch
2020-05-14 14:56:07
1126
原创 VUE中模板语法
VUE中模板语法，类似node中的EJS，让页面动态包括：1.大括号表达式，指令V-（可以自己定义全局指令和局部指令）2.双大括号表达式，必须有结果，内容data(){return{num:‘like like’}} <div>{{num}}</div>3.强制数据绑定标签与标签用{{}}，但a标签不能直接使用还是用{{}}绑定，要用v-bind强制数据绑定 v-bind等同于在a标签加上 ：4.绑定事件监听v-on:click 等价于@clic
2020-05-14 14:55:58
220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人