vue笔记2

原创 63966249 随笔 个人工作经验 126阅读 2018-12-17 17:59:00 举报

现在是理解,不理解百度继续深入理解


Vue.use(.....); // 使用/注册

render 函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来
https://blog.csdn.net/baidu_38492440/article/details/76407865
https://baijiahao.baidu.com/s?id=1603797081408586727&wfr=spider&for=pc

ref $ref http://www.cnblogs.com/zhangruiqi/p/9412948.html
父调子:如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过$ref可能获取到在子组件里定义的属性和方法。

如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。

传递数据: 父=》子 在子中通过v-bind传入一个值,在子组件中,通过props接收,即可完成数据的传递
子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件


Watch

https://blog.csdn.net/wandoumm/article/details/80259908
https://blog.csdn.net/wangxiaoxiaosen/article/details/78487089

watch 的一个特点是,最初绑定的时候是不会执行的, 想要一开始就让他最初绑定的时候就执行
绑定一个handler方法

deep属性,是否深度监听

注销watch,防止内置溢出,平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁


VueX
多个视图依赖于同一个状态可以用到
https://segmentfault.com/a/1190000015782272
https://segmentfault.com/a/1190000014798001
https://www.cnblogs.com/dreamsboy/p/6820299.html

vuex 不仅仅是拿来存数据的。它是与vue深度结合的组件状态集中管理模式
除了你 思维中的 “存数据” 外,还包含对于数据的处理“mutation”,处理数据的事件“action”,
衍生数据“getter”等等,是一整套的状态管理方案。

通俗一点讲
Vuex 的思想是 当我们在页面上点击一个按钮,它会处发(dispatch)一个action,
action 随后会执行(commit)一个mutation, mutation 立即会改变state,?
state 改变以后,我们的页面会state 获取数据,页面发生了变化。
Store 对象,包含了我们谈到的所有内容,action, state, mutation,所以是核心了
state初始的数据状态,getters基于state数据的二次包装后 mutation改变状态,数据发生变化,actions操作mutation的行为

this.$store 在vue的组件中获取 vuex的实例。

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('方法名',值)

commit:同步操作,写法:this.$store.commit('方法名',值)

state:用于数据的存储,是store中的唯一数据源,this.$store.state 获取我们在vuex中声明的全局变量的值

getters:如vue中的计算属性computed一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算

mutations:类似函数,改变操作state数据的唯一途径,且不能用于处理异步事件(重点!!!)

actions:类似于mutation,用于用来操作 Mutation 的动作来改变状态,而不直接变更状态,可以包含任意异步操作,(把mutation变为异步的)

modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护,把你的vuex分成多个子模块

辅助函数 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
https://www.jianshu.com/p/6e253340952e
https://www.cnblogs.com/jiangchengbiao/p/9334014.html

基本操作:
声明state (在里面定义初始属性值) =》实例化的Vuex.Store =》Vuex.Store里面扔入刚才声明的变量state

实际上做完上面的三个步骤后,你已经可以用this.store.state.属性名 在任何一个组件里面获取定义的值了,

但这不是理想的获取方式;vuex官方API提供了一个getters,和vue计算属性computed一样,来

实时监听state值的变化(最新状态),并把它也仍进Vuex.Store里面

光有定义的state的初始值,不改变它不是我们想要的需求,接下来要说的就是mutations了,

mutattions也是一个对象,这个对象里面可以放改变state的初始值的方法,具体的用法就是

给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变,

同样的定义好之后也把这个mutations扔进Vuex.Store里面

这时候你完全可以用 this.store.commit(′方法名′)以及 this.store.commit(′方法名′, 值)在别的组件里面进行改变值了,

但这不是理想的改变值的方式;因为在Vuex中,mutations里面的方法都是同步事务,

意思就是说:比如这里的一个this.store.commit('方法名', 值)方法,两个组件里用执行得到的值,每次都是一样的,这样肯定不是理想的需求

好在vuex官方API还提供了一个actions,这个actions也是个对象变量,最大的作用就是里面的Action方法 可以包含任意异步操作,

这里面的方法是用来异步触发mutations里面的方法,actions里面自定义的函数接收一个context参数和要变化的形参,

context与store实例具有相同的方法和属性,所以它可以执行context.commit(' '),然后也不要忘了把它也扔进Vuex.Store里面

而在外部组件里进行全局执行actions里面方法的时候,你只需要用执行

this.$store.dispatch('方法名')或this.$store.dispatch('方法名',值) 值:要变化的实参 这样就可以全局改变值了

至此就可以做到一呼百应的全局响应状态改变了


Vue-Router
https://www.cnblogs.com/goloving/p/9147551.html
https://www.cnblogs.com/padding1015/p/7884861.html
https://segmentfault.com/a/1190000011123089

<router-view/> https://router.vuejs.org/zh/api/#router-view

路由规则配置里面包含:
path: 到时候地址栏会显示的路径

component: 组件的名字,这个路由对应跳转到的组件

name: 通过一个名称来标识一个路由

Redirect: 通过各种方法将各种网络请求重新定个方向转到其它位置,用于网站调整或网页被移到一个新地址

children: 嵌套路由(一个数组),在原路由的基础上增加一个 children,并且我们还需要在原来的组件上添加< router-view >来渲染 chlidren 里面的路由

meta:{title: 'xxx', icon: 'xxxx', content: 'xxx'等等}路由元信息,可以动态设置

hidden: vue-admin路由规则有用到,可以去看看

除了使用 <router-link> 创建 a 标签来定义导航链接, 我们还可以借助 router 的实例方法编程式导航

编程式导航:这主要应用到按钮点击。当点击按钮的时候,跳转另一个组件, 这只能用代码,调用rourter.push() 方法。
这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL,
当们把router 注入到根实例中后,组件中通过 this.$router 可以获取到router, 所以在组件中使用

字符串:this.$router.push("home"), 就可以跳转到home界面

对象:this.$router.push("{ path: 'home' }"),

命名的路由:this.$router.push("{ name: 'user', params: { userId: 123 }}"),

带查询参数:变成 /register?plan=private:this.$router.push("{ path: 'register', query: { plan: 'private' }}"),

router.replace(location)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

在浏览器记录中前进一步,等同于 history.forward(), router.go(1)

后退一步记录,等同于 history.back(), router.go(-1)

前进 3 步记录 、router.go(3)

如果 history 记录不够用,那就默默地失败呗、 router.go(-100),router.go(100)

针对权限管理前端可以用addRoutes去控制,详情百度深入

导航守卫
列如:beforeEach 在跳转之前执行,路由跳转前做一些验证,比如登录验证(未登录去登录页)
afterEach 在跳转之后判断,afterEach函数不用传next()函数

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的),否则为false,终止导航。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

滚动行为 scrollBehavior

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动


发请求插件axios
https://www.cnblogs.com/jiangxifanzhouyudu/p/9102908.html

第三方使用

Vue使用NProgress 瘦身导航栏

Cookie的使用(js-cookie插件)https://www.jianshu.com/p/6e1bacd35f59

调试:chrome插件Vue.js devtools

Element UI 隐藏组件 滚动条el-scrollbar(自行百度)https://blog.csdn.net/zhouweihua138/article/details/80077311


项目换肤

项目仓库在这:https://github.com/ElementUI/theme-preview
实现其实很暴力:

1先把默认主题文件中涉及到颜色的 CSS 值替换成关键词:https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
2根据用户选择的主题色生成一系列对应的颜色值:https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
3把关键词再换回刚刚生成的相应的颜色值:https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
4直接在页面上加 style 标签,把生成的样式填进去:https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211

后台项目可以看看vue-admin或者iview-admin

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复