vue 知识点笔记

傻大头
121 阅读4分钟

 指令： 就是一个特殊的标记，用来实现html中没有的一些功能。
* 按需加载
* 一次不加载完所有的文件内容，只加载此刻需要用到的那部分（会提前做拆分）
* 当需要更多内容时，再对用到的内容进行即时加载
* webpack 内配置

[JavaScript]
纯文本查看
复制代码
1
2
3
4
5
6
7
output: {
path: path.join(__dirname, '/../dist'),
filename: 'app.js',
publicPath: defaultSettings.publicPath,
// 指定 chunkFilename 主要就是添加这一句话
chunkFilename: '[name].[chunkhash:5].chunk.js',
},...


* 路由配置

[AppleScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
```javascript
const index = resolve => require.ensure([] , ()=> resolve(require('@/components/index')) , 'index')
//路由
routes: [
{
path: '/',
name: 'index',
component: index
}
]
// 核心方法
require.ensure(dependencies, callback, chunkName)


第二种方法

[JavaScript]
纯文本查看
复制代码
1
const home = () => import('@/comm/home.vue')


* axios

[JavaScript]
纯文本查看
复制代码
1
2
3
4
axios.create({
baseURL: 'http://127.0.0.1:3000',
timeout: 1000
});


组件合并

[JavaScript]
纯文本查看
复制代码
1
2
const home = () => import(/*webpackChunkName: 'goods'*/ '@/comm/home.vue')
const homes = () => import(/*webpackChunkName:'goods'*/'@/comm/homes.vue')


webpack cdn 优化
webpack.base.conf.js
添加

[JavaScript]
纯文本查看
复制代码
1
2
3
4
5
6
external:{
//键代表包的名称
// 值代表全局的Vue ---> <script src="vue.js"> 全局找
vue:'vue'
'vue-loader':'VueRouter'
}


* vue-cli 反向代理

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
```javascript
// config/index.js中的proxyTable
proxyTable: {
//这里是我配置的名字
'/api': {
//这个路径是我代理到本地tp框架里面
target: 'http://picup.xxxx.net',
// 设置https
secure:false,
//开启代理
changeOrigin: true,
//这里重写路径/run就代理到对应地址
//数据库收到的 不带/api
pathRewrite: {
'^/api': ''
}
}
}
get('/api/1/picture?method=upload')


* vue 路由钩子
> 全局钩子

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
console.log('beforeEach')
console.log(to,from)
//
next()
})
//
router.afterEach((to, from) => {
//会在任意路由跳转后执行
console.log('afterEach')
})


> 单个路由钩子

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
//只有beforeEnter，在进入前执行，to参数就是当前路由
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]


> 路由组件钩子

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}


* 动态组件

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
//通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。
<component v-bind:is="which_to_show"></component>
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
components:{
first:{
template:'<div>这是子组件1<div>'
},
second:{
template:'<div>这是子组件2<div>'
},
third:{
template:'<div>这是子组件3<div>'
},
}
})


> keep-alive

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
// 动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
//初始情况下，vm.$children属性中只有一个元素（first组件），
//点击按钮切换后，vm.$children属性中有两个元素，
//再次切换后，则有三个元素（三个子组件都保留在内存中）。
//之后无论如何切换，将一直保持有三个元素。


> actived钩子
> 可以延迟执行当前的组件。
具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。
> 当切换到第二个组件的时候，会先执行activated钩子，会在两秒后显示组件2.起到了延迟加载的作用。


avatar
文章
阅读
粉丝