vue
泡面为啥不香了
这个作者很懒,什么都没留下…
展开
-
状态管理模式Vuex
Vuex是做什么的官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态,并用相应的规则保证状态以一种可预测的方式发生变化Vuex也集成到Vue的官方测试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能状态管理是什么:可简单看成把需要多个组件共享的变量全部存储在一个对象里面然后将这个对象放在顶层的Vue实例中,让其他组件可以使用那么多个组件就可以共享这个对象中原创 2020-12-07 08:49:56 · 517 阅读 · 1 评论 -
Vue中watch、computed和methods属性
监听文本框数据改变methods属性<div id="app"> <input type="text" v-model="firstname" @keyup="getFullname">+ <input type="text" v-model="lastname" @keyup="getFullname">= <input type="text" v-model="fullname"></div><scri原创 2020-07-31 16:48:07 · 520 阅读 · 0 评论 -
Vue路由简单介绍(二)
设置选中路由高亮点击查看元素可发现 < router-link >(默认渲染为a标签)带有默认的class属性值“router-link-active”,设置链接激活时使用的css类名。这样我们可以通过给出的类来设置被选中的路由的样式,以示区别。如果需要改变class默认值,可通过路由的构造选项 linkActiveClass 来全局配置。var routerObj = new VueRouter({ routes: [{ path: '/',原创 2020-07-30 20:02:15 · 426 阅读 · 0 评论 -
Vue路由简单介绍(一)
什么是路由(route)后端路由:对于普通的网站,所有的超链接都是URL地址,所有URL地址都对应服务器上的相关资源,后端路由的工作就是将URL地址和服务器上的资源进行匹配。前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号,就相当于锚链接中的锚点)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容(也就是说https://www.baidu.com#/login中‘#’后面的内容在请求中都会被忽略),所以,单页面程序中的页面跳转主要用hash原创 2020-07-29 21:53:49 · 574 阅读 · 1 评论 -
Vue组件(二)
组件切换使用 v-if 和 v-else 结合 flag 进行切换,此方法有限制,flag只有true或false两种选项。<div id="app"> <!--用v-if和v-else实现--> <a href="#" @click.prevent="flag=true">登录</a> | <a href="#" @click.prevent="flag=flase">注册</a> <l原创 2020-07-28 22:03:55 · 430 阅读 · 0 评论 -
Vue组件(一)
什么是组件组件(Component)的出现是为了拆分Vue实例中的代码量,封装可重用的代码,能够让我们以不同的组件来划分不同的功能模块。组件化与模块化的不同:模块化:从功能逻辑的角度进行划分,方便代码分层开发,保证每个功能模块职能单一组件化:从页面显示的角度进行划分,前端的组件化,方便组件重用如下图中,将第一个显示框封装成一个组件,后面的框就可以进行复用,只需要改变图标和图片文字。全局组件定义的三种方式:使用Vue.extend配合Vue.component方法var login =原创 2020-07-27 19:22:27 · 457 阅读 · 0 评论 -
Vue中的动画(二)
transition-group实现列表动画在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用transition 需要使用transition-group 。如果要为 v-for 循环创建的元素设置动画,必须为每个元素设置:key属性,否则会报错。< transition-group >的 appear 属性能实现页面刚打开时,元素上移到指定位置的效果(初始渲染的过渡)。< transition-group >不同于 < tr原创 2020-07-26 17:07:49 · 1679 阅读 · 0 评论 -
Vue中的动画(一)
Vue的动画没有css3那么炫酷,只有一些比较简单的动画,如淡入淡出,左右位移等,但其作用还是比较明显的。动画能够提高用户的体验,帮助用户更好的理解页面中的功能。使用过渡类名实现动画在进入/离开的过渡中,会有6个class切换:1、 v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。2、 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间原创 2020-07-25 23:58:50 · 435 阅读 · 0 评论 -
自定义指令及Vue实例的生命周期
如v-model,v-bind,v-for,v-show等指令都是Vue内置的指令,但可以通过自定义指令来达到其他的效果。Vue中所有的指令,在调用的时候,都以 v- 开头,所以自定义指令后调用时前面也要加 v- 。使用 Vue.directive() 定义全局的指令第一个参数为指令的名称(注:在定义时,指令的名称前面,不需要加 v- 前缀),但在调用时,必须在指令名称前加上 v- 前缀来进行调用。第二个参数是一个对象,这个对象有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。常用原创 2020-07-25 01:21:13 · 1323 阅读 · 0 评论