vue配置文件介绍

1. vue.config.js

配置文件 https://cli.vuejs.org/zh/config/#vue-config-js

2. README.md

说明文件

3. package.json

模块依赖

4. node_modules

下载的模块依赖

5. src目录

main.js 全局的js文件
App.vue 第一个入口的vue文件
assets 放入静态资源
components 放入组件

6. public目录

index.html ===> 运行 localhost:8080 访问的页面

7. v-show和v-if的区别

1.v-show和v-if如果都为false的情况
v-show是隐藏（v-show是显示和隐藏盒子）
v-if是删除 （v-if是创建和删除盒子）
2.首次加载页面 ===》开销问题
v-show ==》就算设置了false，这盒子也是存在的
v-if ==》它是不存在的，当我点击设置为true才创建盒子
3.频繁的切换
v-show 显示和隐藏
v-if 创建和删除，不断地创建和删除，开销要大

8. vue中定义数据的方式

1.data的return里定义数据
2.data的return外定义数据合格女

9. 数据流

2.1 我们在data的return中定义数据，本身应该是 this.$data.xxx 可以拿到数据，
但 this.xxx 也可以拿到数据，就证明vue源码中做了这样的操作：把data的所有数据
赋值 给了当前的大对象
2.2 methods定义的方法也要赋值给大对象

10. computed 计算属性

1.了解什么是计算属性
针对于数据进行二次计算（强调其实template部分也可以实现，但是最好把二次计算写在computed，因为直接写字template会让template代码很难维护）
****二次计算methods也可以实现，那么methods和computed的区别？
最大的区别：computed有缓存

2.computed的写法
(1) 普通写法
computed: {
total() {
return this.price * this.num;
},
},
(2) get和set写法
change(){
get(){
return this.str
},
set(val){
this.str = val
}
}

11. 属性绑定的写法 （单向数据流）

  1.单向数据流（v-bind）
     M(js数据)  ===>  V(视图：template) 去使用
     ***注意：如果是单向数据流，视图修改了值，M的值不变（）
  2.写法（简写）
     v-bind:value  ==> :value
     v-bind:src ==> :src

12. vue开发模式

v-bind:xxx ===> 单向绑定
v-model ===> 双向绑定

13. “单向绑定” 和 “双向绑定” 的使用场景

1.单向绑定
纯展示
2.双向绑定
有修改或输入行为
eg：在页面输入内容，在js部分还要获取到

14.生命周期

1.vue2.x的生命周期
创建前、后
beforeCreate
created
挂载前后
beforeMount
mounted
修改前后
beforeUpdate
updated
销毁前后
beforeDestory
destoryed
2.什么时候用哪些生命周期？
created ===> 请求接口
mounted ===> dom操作的时候
updated ===> 观测数据是否更新了
destroyed ===> 关闭【没了】

15. vue2.x请求 ===》 数据渲染到页面

1.在vue项目中，一般使用 axios、fetch 来发送请求
2.使用axios请求接口
注意：在created中发起请求
3.请求跨域的问题
http://testapi.xuexiluxian.cn/api/slider/getSliders（此地址不存在跨域的问题）
3.1 测试出现跨域的问题
4.设置代理解决
vue.config.js
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在"开发环境"下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
devServer: {
proxy: ‘http://localhost:3000’
}

16. 在vue中前端中处理跨域问题，要设置代理

1.devServer.proxy
注意：只在开发阶段生效（生产阶段不生效）
2.开发阶段和生产阶段
开发阶段：写代码的时候（项目还没有上线）
生产阶段：代码写完了（项目要上线了）、
3.vue的环境变量
（1）创建环境变量文件
在vue项目的根目录创建：
.env.development ===> 开发环境
.env.production ===> 生产环境
调用：process.env.VUE_APP_XXX

17.获取数据和dom那些事

created ===> 有data 没有el
mounted ===》 有data 有el

$nextTick:获取更新后的dom（onload完成后获取）想要获取更新后的dom：this.$nextTick
beforeCreate、created、beforeMount，想要获取dom，可以使用$nextTick