Vue学习中的一些小问题解析

语法问题解决：

1、Vue.config.productionTip = false;
- 阻止启动生产消息，在开发环境下，Vue会提供大量的警告等，但生产环境下不会。常用作指令
2、Vue.prototype.$http = Axios;
- 这是使用axios的一种方式

this.$http.get('/user?ID=123456')
    .then(function(response){
        console.log(response);
    })
    .catch(function (error){
        console.log(error);
    })

3、Vue.use(Element)解析：
- 1、Vue的插件是一个对象，就像Element
- 2、插件对象必须有install字段
- 3、install字段是一个函数
- 4、初始化插件对象需要通过Vue.use()
- 5、Vue.use()调用必须在new Vue之前
- 6、同一个插件多次使用Vue.use()也只会被运行一次
4、Vue.prototype.$xx解析
- 1、构造函数、实例、原型（prototype）
- 2、Vue.prototype.$xx只是js中函数原型的特例：函数原型上属性/方法。在函数实例化后，可以在任意实例上读取。
- 3、参考博客
5、 $的含义：
- $是Vue所有实例中都可用的属性的一个简单约定。这样可以避免和已被定义的数据、方法、计算属性产生冲突。
6、Progress进度条
- 可以用Element-ui中的进度条（progress）组件代替。
7、beforeEach((to, from, next) => {})解析：
- 1、在vue-router路由设置好后，在main.js中配置一个全局前置钩子函数：router.beforeEach()，作用是在每次路由切换时调用
- 2、三个参数：to from next
  - 2.1 to ：Route：即将要进入的目标的路由对象
  - 2.2 from ：Router：当前导航要离开的路由
  - 2.3 next ：Function：函数结束后要进行的动作
- 3、官方参考
8、afterEach((to, from) =>{})解析：
- 1、全局后置钩子
9、完整的导航解析流程：
- 1、导航被触发
- 2、在失活的组件里调用离开守卫
- 3、调用全局的beforeEach守卫
- 4、在重用的组件里调用beforeRouteUpdate守卫
- 5、在路由配置里调用beforeEnter
- 6、解析异步路由组件
- 7、在被激活的组件里调用beforeRouterEnter
- 8、调用全局的 beforeResolve 守卫 (2.5+)。
- 9、导航被确认。
- 10、调用全局的 afterEach 钩子。
- 11、触发 DOM 更新。
- 12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
10、new Vue({})解析：
- 1、实例化Vue
- 2、隐式实例化，无需实例变量
11、router路由导入、设置的几种方式
- 1、例如：

import Login from '@/components/login'

2、例如：

import Login from './components/login.vue'

3、例如

const Login = resolve => require(['../components/login'], resolve)

4、三种在设置路由的时候（export default new Router({}）相同，后用到children命令。
12、router中的redirect命令：用于重定向，与path联合使用

routes:[
    path:'',
    redirect:'/login'
]

13、
- 路由渲染
14、
15、Vuex组件间通信
- 1、在src/vuex/文件夹下，包含:
  - store.js //存在状态
  - actions.js
  - getter.js
  - modules文件夹
16、查看vuex官网学习更多相关知识！
17、Promise((resolve, reject) => {})解析
- 1、是异步编程的一种解决方案，比回调函数和事件更合理。ES6原生提供了Promise对象。
- 2、Promise简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）
- 3、Promise对象的特点：
  - 3.1 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled（已成功）、rejected（已失败）。
  - 3.2 一旦状态改变，就不会再变，任何时候都可以得到这个结果。pending --> fulfilled; pending --> rejected
- 4、两个参数：
  - resolv：是一个JS引擎提供的函数，不需要自己部署，作用：将Promise对象状态从“未成功”变为“成功”
  - reject也是一个JS引擎提供的函数，作用：将Promise状态从“未成功”变为“失败”
- 5、参考文档
18、学习axios文档
- axios.create({})//创建一个axios实例
19、response()和require()
- 官方参考
- 参考博客

总结：

成为一名Vue行家，需要牢牢掌握：
Vue.js //核心
Vuex //组件间通信
Vue-router //路由设置
Axios //网络操作
Element-ui //一个或若干基于Vue的组件库
前端知识：
- JavaScript
- HTML5
- ECMAScript6
- CSS
- Node.js

此为目前学习Vue的一点小补充，感谢是该是要前端基础扎实，特别是ES6.

来源：https://blog.csdn.net/yuwuTaTa/article/details/99546876

标签

vue

路由

vue路由

科技新闻