![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
渐进式框架
是小王啊i
沉淀
展开
-
vue过滤器讲解
过滤器Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示支持级联操作过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本全局注册时是filter,没有s的。而局部过滤器是filters,是有s的 <div id="app"> <input type="text" v-model='msg'>原创 2020-10-05 08:02:39 · 176 阅读 · 0 评论 -
vue组件讲解
vue组件组件组件注册全局注册组件基础用组件注意事项局部注册组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -->原创 2020-10-05 08:02:23 · 120 阅读 · 0 评论 -
vue组件通信讲解(满满的干货)
组件通信Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递Vue组件之间传值父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 APP中嵌套着 故 menu-item 为原创 2020-10-05 08:02:07 · 137 阅读 · 0 评论 -
vue中slot插槽总结(干货)
vue之slot插槽讲解组件插槽匿名插槽具名插槽作用域插槽组件插槽组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box>原创 2020-10-05 08:01:44 · 614 阅读 · 1 评论 -
axios用法讲解
axios用法axiosaxios基础用法axios 全局配置axios 拦截器axios基于promise用于浏览器和node.js的http客户端支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据能转换请求和响应数据axios基础用法get和 delete请求传递参数通过传统的url 以 ? 的形式传递参数restful 形式传递参数通过params 形式传递参数post 和 put 请求传递参数通过选项传递参数通过 UR原创 2020-10-05 08:01:19 · 125 阅读 · 0 评论 -
在vue中如何解决axios跨域问题(满满的干货)
详细步骤如下1.在main.js中配置2.在vue.config.js中配置3.测试axios封装自己的axios请求函数axios配置参数1.在main.js中配置import Vue from 'vue';import axios from 'axios';Vue.prototype.$http=axios;//默认的根路径axios.defaults.baseURL = '/api'//设置响应请求头axios.defaults.headers.post['Content-Type']原创 2020-10-04 18:23:46 · 4559 阅读 · 1 评论 -
vue中$router和$route的区别
**$router和$route是有区别的**$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法$route为当前router跳转对象里面可以获取name、path、query、params等 也可以理解为 $router为全局路由对象 $route为局部组件路由对象通过这张图可以了解到这俩者的区别:...原创 2020-09-27 19:35:21 · 1074 阅读 · 0 评论 -
Vue路由懒加载
认识路由懒加载先看看官方的解释1.当打包构建应用时,Javascript 包会变得非常大,影响页面加载。2.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了路由懒加载的作用1.路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.2.只有在这个路由被访问到的时候, 才加载对应的组件路由懒加载写法1.结合Vue的异步组件和Webpack的代码分析const Home = resolve => { require.ens原创 2020-09-27 19:29:08 · 130 阅读 · 0 评论 -
Vue中router-link/router-view组件详解
router-link属性:<router-link to='/home' tag='li'>1.tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>2.replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中3.active-class: 当<router-link>对应的路由匹配成功时, 会原创 2020-09-27 19:20:51 · 8570 阅读 · 2 评论 -
vue路由对象
路由内容概述1.什么是路由?路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. 路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向.2.vue-router路由规则路由有俩种模式 mode:'hash'/'history'3 安装和使用vue-router步骤一: 安装vue-routernpm install原创 2020-09-27 19:03:48 · 455 阅读 · 0 评论 -
vue过渡动画
简介:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包含以下工具:1.在 CSS 过渡和动画中自动应用 class2.可以配合使用第三方 CSS 动画库,如 Animate.css(下篇文章我讲详解animate.css的用法)3.在过渡钩子函数中使用 JavaScript 直接操作 DOM4.可以配合使用第三方 JavaScript 动画库,如 Velocity.js*vue提供了transition/transition-group组件,用来实现过渡动画,所谓的原创 2020-09-24 09:52:20 · 230 阅读 · 0 评论 -
Vue生命周期详解
什么是生命周期?1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载Vue的生命周期分为四个阶段下面大家先看一个这张图生命周期详解1.初始化阶段:beforeCreate(){} 实例刚创建完成,此时还没有data和methods属性created(){} vue实例data和method属性已经初始化完成,此时还没有编译模板2原创 2020-09-23 09:23:22 · 119 阅读 · 0 评论 -
vue实现分页效果
代码来了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0;原创 2020-09-21 20:52:08 · 524 阅读 · 0 评论 -
vue事件修饰符
事件修饰符我们都知道,在操作dom事件时,难免会遇到一些事件的默认行为,例如事件冒泡,事件捕获a标签有默认的超链接跳转行为 .因此大家很懊恼,下面来例如vue中阻止事件默认行为的事件修饰符stop 相当于JavaScript中e.stopPropagation() 阻止事件冒泡(不会向上层延伸)capture 事件捕获(由外向内) 与冒泡相反once 只渲染一次prevent 相当于e.preventDefault() 阻止默认行为 相当于a标签的return fals原创 2020-09-21 20:48:23 · 148 阅读 · 1 评论 -
vue事件对象讲解
事件对象$event<button @click='fn($event)'></button>****在vue中,如点击事件/鼠标移入移出事件等等,事件的回调函数第一个参数默认都为$event(事件对象),通过事件对象可以用于获取dom元素或者修改dom中的属性.下面看一下事件对象$event的详解图e.target.value 可用于获取dom元素的value值(如input框)e.srcElement 表示当前标签下面来说一下事件对象中括号问题1.绑定原创 2020-09-21 20:39:20 · 2208 阅读 · 0 评论 -
Vue自定义指令实现拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padd原创 2020-09-17 18:29:24 · 246 阅读 · 0 评论 -
Vue中computed和watch的区别
computed 计算属性1.computed 它是一个计算属性,会计入缓存中,优先从缓存中加载2.只有依赖数据发生改变,才重新计算3.如果一个属性是有多个属性计算而来,这个属性依赖多个属性(也就是多对一或者一对多),一般用computed4.如果computed计算属性是一个函数,那么会触发get()方法,该方法返回computed属性的属性值5.在computed中,每个属性都对应一个get/set()方法,当数据发生改变时,会触发set()上面说了computed会进行缓存,那么它是基于什原创 2020-09-16 19:15:52 · 495 阅读 · 0 评论 -
Vue自定义指令
自定义指令:1.全局自定义Vue.direvtive('指令名',function(){})2.局部自定义指令组件的directives注册局部指令let app = new Vue({ el:'#app', directives:{}})指令钩子函数1.inserted():被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)2.bind():只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作3.update()原创 2020-09-16 09:14:05 · 81 阅读 · 0 评论