vue
vue
great_t
做一个孤独的探索者
展开
-
vue路由配置解析
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。一个简单的完整路由import Vue from 'vue'import Film from '../views/Film.vue'.原创 2021-04-15 00:25:01 · 632 阅读 · 0 评论 -
vue反向代理使用
当vue项目里,前端发送ajax请求后台数据的时候,由于前后端服务器地址的不同,导致请求发生跨域问题,错误如下图:为了解决跨域问题,可在vue项目中设置反向代理,从而保证前端能顺利请求后端数据。反向代理配置如下:在package.json文件同级目录下新建一个vue.config.js,并将如下代码放入vue.config.js中。// vue的配置文件, 修改重启服务器module.exports = { // 对于当前开发服务器配置反向代理 devServer: { pr原创 2021-04-14 22:11:15 · 1350 阅读 · 0 评论 -
vue单页面组件
我们通常使用在js文件里通过vue.component(’’,{})方式,或者在某个组件里定义局部组件的时候,有以下一些弊端:1.不支持css样式编写,需要写内联样式2.在字符串模板中templete:这里编写html代码 没有高亮显示,代码提示等,开发及其不方便3.限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如Babel为了解决上述问题,引进了vue单页面组件,可完美避免上述问题。单页面组件构成页面<!-- 这里编写页面结构html,注意:temp原创 2021-04-12 20:32:08 · 1146 阅读 · 1 评论 -
vue自定义指令directive
自定义指令作用:为了操作底层domvue设计理念就是数据驱动dom,不会针对dom进行操作。自定义指令是作者给预留的方案实际应用-- 可以通过指令知道什么时候dom创建完成, 从而进行 依赖dom的库的初始化工作指令注册自定义指令类似于组件,他也有相应的生命周期,注册方式。指令注册分为两种:局部注册和全局注册全局注册// 使用Vue.directive 进行全局指令注册。跟组件component类似// 这里hello是指令名Vue.directive("hello",{ inser.原创 2021-04-10 17:40:23 · 88 阅读 · 0 评论 -
过滤器filter
使用场景:用于一些常用的文本格式化。使用地方:双花括号插值{{}}{{message | captitalize}}v-bind表达式<img :src="data.img | myImgFilter"/>写法:A. 全局过滤器在js里定义一个全局过滤器,filter()函数有两个参数,参数一:过滤器名(页面html引用过滤器根据这个名字);参数二:回调函数(接受页面通过管道传过来的数据;数据处理完毕后通过return 关键字返到页面上)Vue.filter(原创 2021-04-10 17:03:03 · 82 阅读 · 0 评论 -
vue下的swipper插件
swipper插件里的轮播数据为动态数据的时候,为避免出现Swiper初始化过早从而导致轮播图插件失效情况的发生,可采取以下几种方式进行处理。1. 使用updated生命周期将swipper插件初始化代码放到updated生命周期下。解决问题的同时带来其他两个问题:A. 如果其他状态更新 ,也会导致updated重复执行, 就会导致new Swiper多次初始化。B. 没有复用性<div class="swiper-container kerwin"> <div cl.原创 2021-04-08 00:00:54 · 356 阅读 · 0 评论 -
vue实现元素过渡效果
简单过渡效果实现过渡效果有一个最基本的要求:元素必须有变化的过程,比如是显示/隐藏元素;删除/添加元素;元素移动,定位模式下设置偏移量等等。/* 进场动画 */.kerwin-enter-active { animation: aaa 1.5s;}/* 出场动画 */.kerwin-leave-active { animation: aaa 1.5s reverse;}/* 定义动画的名字和开始到结束的样式 */@keyframes aaa { 0% { opacity原创 2021-04-01 00:09:35 · 672 阅读 · 0 评论 -
slot卡槽
solt卡槽官方定义:Vue 实现了一套内容分发的 API,将 slot 元素作为承载分发内容的出口个人理解:在子组件里使用slot占坑,父组件里定义填坑的内容。这样填坑后就会形成子组件最终的dom结构。Vue.component("child",{ template:` <div> child <slot name="a"></slot> <slot name="b"></slot&.原创 2021-03-31 23:12:57 · 586 阅读 · 1 评论 -
vue组件生命周期
vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化(beforeCreate,created)、挂载(mount,mounted)、更新(beforeUpdate,updated)、销毁(beforeDestory,destoryed),这就是一个组件所谓的生命周期...原创 2021-03-31 19:44:28 · 126 阅读 · 0 评论 -
非父子组件通信
非父子组件通信有以下两种方式:中间人模式 && bus中央总线。<!-- child1 && child2都是组件,并且他们组件之间没有嵌套关系,这种情况下child1和child2需要进行通信,我们称之为非父子组件通信--><div id="box"> <child1></child1> <child2></child2></div>中间人模式两个组件A,B没有办法通信。原创 2021-03-29 23:29:29 · 428 阅读 · 0 评论 -
$ref使用
$ref用来获取组件实例,不通过父子通信,可以获取组件的所有方法及data的变量$ref需要在dom挂载后才能获取到,否则undefined获取原生dom节点<div id="box"> <h2>ref- 获取原生dom节点</h2> <input type="text" ref="myinput"/> <div ref="mydiv">111111111111111111111111</div> ..原创 2021-03-29 22:44:16 · 2977 阅读 · 0 评论 -
vue组件父子通信
组件1. 全局组件和局部组件全局组件的用法,写法如下://全局组件用Vue.component定义Vue.component("kerwin-tabbar",{ template:` <div style="background:red;"> {{myname}} <kerwin-tabbar-a></kerwin-tabbar-a&g原创 2021-03-28 23:51:19 · 175 阅读 · 1 评论 -
全局组件与局部组件
组件之间都是互相隔离的,定义data下属性也是分别在各自的组件里定义。和根组件不同,全局组件和局部组件定义data,都采用下面这种方式。除了data使用和在根组件下有所不同之外,其他所有选项,例如methods,computed等等都和在根组件里使用方法一致。Vue.component("kerwinHeader",{ template:` <section style="background:yellow;"> 页面的导航栏部..原创 2021-03-28 23:27:51 · 236 阅读 · 0 评论