随笔分类 - 1_vue（组件、vue异常、vue事件、vue_resource、mixin、vue结构优化、vue表单等）
摘要：VUE参考 为什么组件中的data必须是一个方法且返回一个对象 一、总结 一句话总结： 便于复用的组件保持自己的数据，让各个复用组件的数据不一样 <div id="app"> <counter></counter> <hr> <counter></counter> <hr> <counter></c
阅读全文
摘要：VUE参考 组件中的data和methods 一、总结 一句话总结： 组件中可以有自己的data和methods，data的话必须是函数且返回对象，方法的话则和vue对象里面一样，data和methods使用的话和vue实例中一样。 Vue.component('mycom1', { templat
阅读全文
摘要：VUE课程 26、组件 一、总结 一句话总结： 前端组件化开发，可以便于组件的管理和复用。组件可以定义全局组件和私有组件。 1、vue中如何定义全局组件？ 直接在全局的 Vue.component 上定义 <mycom1></mycom1> <template id="tmpl"> <div> <h
阅读全文
摘要：VUE课程 25、发ajax请求 一、总结 一句话总结： vue发ajax包可以用axios包，操作也是比较简单，直接照着文档操作即可 methods:{ getNews:function () { _vue=this; //console.log(_vue); axios.post('http:/
阅读全文
摘要：VUE课程 24、插件 一、总结 一句话总结： vue里可以自定义插件，在插件里可添加全局方法和属性、添加全局指令、添加实例方法等等操作。 (function (window) { const MyPlugin={}; MyPlugin.install = function (Vue, option
阅读全文
摘要：VUE课程 23、自定义指令 一、总结 一句话总结： vue中指令可以自定义，可以自定义全局指令和局部指令两种，局部指令就在vue实例的directives上添加，全局指令可以直接Vue.directive(指令,回调函数) 1. 注册全局指令 Vue.directive('my-directive
阅读全文
摘要：VUE课程 22、ref获取dom 一、总结 一句话总结： vue中不推荐操作dom，vue操作dom的话可以用vue的$ref属性，例如this.$refs.msg获取ref="msg"的元素 <div id="app"> <p ref="msg">{{msg}}</p> <button @cli
阅读全文
摘要：VUE课程 21、表单输入绑定 一、总结 一句话总结： vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端 <div id="app"> <form action="" @submit.prevent="handleSubmit"> <div> <label fo
阅读全文
摘要：VUE实例课程 5、vue网格动画 一、总结 一句话总结： vue网格动画可以用<transition-group> 组件、v-move属性、lodash.js来做。 原理就是对元素移动的先后位置加动画。 <transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变
阅读全文
摘要：VUE实例课程 4、过滤器处理时间 一、总结 一句话总结： vue中处理时间可以用过滤器，可以很方便的得到各种格式的时间数据。可以配合moment.js来处理时间更加方便。 <div id="app"> <p>原始date模式：{{time}}</p> <p>年月日 时分秒：{{time | for
阅读全文
摘要：VUE课程 20、过滤器 一、总结 一句话总结： vue的过滤器有全局过滤器和私有过滤器，过滤器可以过滤一些敏感词汇，也能对时间格式进行过滤。 1、vue全局过滤器和私有过滤器？ 全局过滤器是对所有vue实例都有效的过滤器，语法 Vue.filter(过滤器名称,回调函数) 私有过滤器只对当前vue
阅读全文
摘要：VUE参考 过滤器 一、总结 一句话总结： 基本过滤器使用：值 | 过滤器：<p>{{time | dateString}}</p> 过滤器带参数：过滤器后小括号接要带的参数：<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p> <div id="test"
阅读全文
摘要：VUE参考 动画钩子函数 一、总结 一句话总结： 动画钩子函数，也就是用函数来写动画，也就是用js控制样式 <div id="app"> <input type="button" value="快到碗里来" @click="flag=!flag"> <!-- 1. 使用 transition 元素把
阅读全文
摘要：VUE课程 19、动画 一、总结 一句话总结： vue动画有进入和出去两个大状态，设置动画的话用transition原生包裹起来，transition的name属性指定动画的名称 <style> .xxx-enter-active, .xxx-leave-active{ transition: al
阅读全文
摘要：VUE课程 18、生命周期函数 一、总结 一句话总结： 生命周期函数：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期函数！比如mounted()、beforeDestroy()等 1、生命周期钩子、生命周期函数、生命周期事件 的关系是什么？ 生命周期钩子 =
阅读全文
摘要：VUE实例课程 3、定时显示隐藏元素 一、总结 一句话总结： 定时显示隐藏元素中，定时器函数可以写在mounted中，关闭显示隐藏效果可以用vue的$destroy()方法，可以在beforeDestroy中清除定时器避免内存泄漏 <div id="app"> <p v-show="isShow">
阅读全文
摘要：VUE参考 生命周期 一、总结 一句话总结： vue对象生命周期函数8个，初始化显示4个（create、mount），更新状态2个（update），销毁vue实例2个（destory），好记的很 a、初始化显示：beforeCreate()、created()、beforeMount()、mount
阅读全文
摘要：VUE实例课程 2、收集表单数据 一、总结 一句话总结： vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端 <div id="app"> <form action="" @submit.prevent="handleSubmit"> <div> <label f
阅读全文
摘要：VUE参考 收集表单数据 一、总结 一句话总结： vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端 <div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: </
阅读全文
摘要：VUE参考 事件处理 一、总结 一句话总结： *、vue绑定事件监听的时候，默认是带了event对象的：<button @click="test1">test1</button> *、事件处理中 按键修饰符 使用实例：<input type="text" @keyup.13="test7"> 1、v
阅读全文
浙公网安备 33010602011771号