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

n e x t T i c k : 获取更新后的 d o m ( o n l o a d 完成后获取)想要获取更新后的 d o m : t h i s . nextTick: 获取更新后的dom(onload完成后获取) 想要获取更新后的dom:this. nextTick:获取更新后的domonload完成后获取)想要获取更新后的domthis.nextTick
beforeCreate、created、beforeMount,想要获取dom,可以使用$nextTick

Logo

前往低代码交流专区

更多推荐