vue学点笔记一

一、vue组件和插件的区别 vue组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。 插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。 简单来说，组件就是全局通过标签来用的，插件也就是公用方法。 组件 import Rule from '../../components/Rule.vue' export default { components: { Rule, }, data () { return { } } } 插件 export default { install(Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现 // 逻辑... } } } 二、Vue.config.productionTip = true/false; Vue.config.productionTip = true处于开发模式下，Vue提供了许多警告来帮助您解决常见的错误和陷阱。 Vue.config.productionTip = true处于生产模式下，这些提示变得无用，并且使应用程序的有效负载大小膨胀。所以没有这些提示。 三、路由中组件异步加载（按需加载） 在Vue项目中，一般使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如： import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载。 require.ensure() { path:'product', component: r => require.ensure([], () => r(require('../modules/index')), 'Index') } 第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖; 第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它; 第三个参数errorCallback比较好理解，就是处理错误的回调; 第四个参数chunkName则是指定打包的组块名称。 () => import（） { path:'product', component:() => import(/* webpackChunkName: "group-foo" */ './Foo.vue') } /* webpackChunkName: "group-foo" */ 一个特殊的注释语法来提供 chunk name。如果不写chuck,这样做的结果是每个组件都会打包成一个js文件。 四、router和route的区别 router为vueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。 route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等。 五、this.$route.query和this.$route.params的区别 1、this.$route.query //跳转方法 this.$router.push({ path: '/home', query: { id: 123 } }) //路由配置 { path: '/home', name: 'home'//,可以不写name component: Home } //获取参数 this.$route.query.id 2、this.$route.params //跳转方法 this.$router.push({ name: 'home', params: { id: 123 } }) //路由配置 { path: '/home', name: 'home'//,必须写name component: Home } //获取参数 this.$route.params.id this.$route.params方法强制刷新页面，数据会丢失，但是浏览器路径参数是隐藏的 this.$route.query方法刷新页面，数据不会丢失，但是浏览器路径参数是显示的 3、动态路由的参数 //跳转方法 this.$router.push({ path: `/particulars/${id}`, }) //路由配置 { path: '/home/:id', name: 'home', component: Home } //获取参数 this.$route.params.id 这种方法页面刷新数据不会丢失 六、vueRouter中redirect（重定向）和alias（别名）区别 redirect：是直接改变了路径，把url变成了真实的path路径。 alias：URL路径没有被改变，这种情况更友好，让用户知道自己访问的路径。 redirect是我访问a,重定向成b。而alias是我访问b,b就定义在a的路由配置中`` { path:"a", name:"hone", component:Home, alias:"b" }

本文章由javascript技术分享原创和收集