vue笔记及打包

打工人-

已于 2023-06-30 16:34:29 修改

阅读量292

点赞数

文章标签： vue.js javascript

于 2021-08-30 16:11:08 首次发布

本文链接：https://blog.csdn.net/zt_9773/article/details/119999027

版权

软件:Visual Studio Code
安装的插件:1.Beautify 2.HTML CSS Support 3.HTML Snippets
4.Live HTML Previewer 5.Live Server 6.MTA:SA Lua 7.Vetur
8.npm Intellisense 9.Path Intellisense 10.snippet-creator
11.Vue 2 Snippets 12.webpack 13.Webpack Progress
14.Chinese什么的让软件中文格式

监听属性watch(handler方法immediate属性deep深度监听属性（可以监听字典）)
computed是计算属性的意思（无法监听数据的变化）会根据依赖进行缓存，该计算结果会被缓存起来。依赖不变，computed的值不会重新计算，购物车中，买某个商品，点击数量+-，然后相应的价格也会自动变化，这个可以用computed监听。
多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch是监听的意思

如果一个数据依赖于其他数据，那么把这个数据设计为computed的
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

v-bind缩写 @，一般用于绑定HTML事件，method中方法。是一般哦
v-on缩写：，一般用于设置HTML属性，data中定义的数据。是一般哦

position: fixed; 一般用作固定导航栏用。headnav在content内容一直向下滑动的过程中保持固定

v-if v-show区别
v-if 条件为真会创建元素，条件为假会销毁元素。不会创建
v-show 不管条件是否为真都会创建元素，条件的真假只是控制元素的显示和不显示

生命周期:
beforeCreate：此时vue实例刚刚在内存中创建，Vue中的data和方法都是取不到的，访问都是undefined
created：这个阶段vue实例在内存中已经创建好了，data和methods也能够获取到了，但是模板还没编译(访问不到具体的DOM元素，即无法获取到通过挂载模板生成的DOM）（例如：v-for循环遍历Vue.list无法生成li）。
beforeMount：这个阶段完成了模板的编译，但是还没挂载到页面上，这个阶段页面还没能显示出来。（例如通过v-for生成的html已经生成还没有被挂载到页面上）。
mounted：这个阶段，模板编译好了，也挂载到页面中了，页面也可以显示了。

beforeDestroy：这个阶段处于vue实例被销毁之前，当然，这个阶段vue实例还能用。

Destroy：这个阶段在vue实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，
需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 路由懒加载组件懒加载也采用此方法 import加载相比vue异步懒加载(require搭配resolve加载)区别
// 1：import 是解构过程并且是编译时执行
// 2：require 是赋值过程并且是运行时才执行，也就是异步加载
// 3：require 的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量
const Login = () => import('@/pages/user/login')
接下来在组件中调用Login即可使用

vue中。多个路径对应一个组件即同一组件被多次复用，组件的生命周期函数只运行一次，如果有数据啥的要更新，得做一下监听处理。用watch监听。

watch:{

$route: {

handler: "resetData" # 在methods写的方法名，里面是请求的数据

}

然后在周期函数中调用这个方法：

mounted() {

// mounted只加载一次，刚进此界面时加载。点击此界面的按钮进行相互跳转时watch开始监听，这里watch监控$route即相同组件

// 对应多个路由的情况，从其他界面回到此界面时mounted加载一次，watch不会开启监听，刚好达到效果

this.resetData()

vue 打包问题：
1、如果是打包后直接放在django中，那就是相当于前后端没有分离，所有的js，模板还是通过django调度。只是形式上看着分离了，这时候vue开发环境和生产环境访问我设置的是 IP:端口（开发和生产可能不一样，可能要在dev.env.js和prod.env.js中配置）。

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

WEBSOCKET_HOST: '"ws://localhost:8888"'

})

'use strict'

module.exports = {

NODE_ENV: '"production"',

WEBSOCKET_HOST: '"ws://localhost:8888"'

}

在封装的js中引入

const WEBSOCKET_URL = process.env.WEBSOCKET_HOST

// websocket 连接的接口

export const reqWebsocket = WEBSOCKET_URL + '/ws/'

vue打包后就是生产环境了。。。django配置文件还是要配置一些静态文件啥的。

2、实际项目上线了肯定不能通过IP:端口访问。所以通过nginx。这时候就是真正的前后端分离了，不再由django全权调度。前端8080端口，后端设定，django也不用在配置文件配置静态文件

------------------------------------------------------------------------------------------------------------------------------

关于布局：如果要使用position属性(绝对定位，相对定位和固定定位)。那么
el-header，el-main，el-aside，el-footer可能会相互影响。可能都得同时使用position。
如果不是用position属性，那么就会按照官网显示的那样，高度宽度有默认的，也可以自己设定。
el-main的高度如果不设定则由内容决定。如果下面再搭配el-footer。
那么始终会显示在el-main下面（不管内容多长）。
很多首页比价长的官网就是使用：
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
这种模型。三块都没有使用position属性。层次分明。一层一层往下显示。

如果想header固定不动，内容随之滚动。使用下但都得使用position属性。

<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>