标签: Vue

21 篇文章

二十一.Vue解决跨域问题
1.问题描述 由于前后端分离开发,所以肯定会遇到跨域问题,一是开发环境中,二是生产环境中。 2.解决开发环境跨域 配置代理 vue.config.js里的proxy:"http://127.0.0.1:8080" 3.解决生产环境跨域 配置URL前缀 main.js里的axios.defaults.baseURL = '/ols_project/'…
二十.接口调用
接口调用方式 原生ajax 基于jQuery的ajax fetch axios async 和 await 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程 异步模式…
十九.使用Vue脚手架
1.Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 1. 安装3.x版本的Vue脚手架: npm install -g @vue/cli 2. 基于3.x版本的脚手架创建Vue项目: 1. 使用命令创建Vue项目 命令:vue create my-project 选择Manually select features(选择特性以创建项目…
十八.Webpack中使用Vue
1.Webpack中使用Vue 运行cnpm i vue -S将vue安装为运行依赖; 导入vue import Vue from 'vue' 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供像网页中那样的使用方式; 方式…
十七.Webpack的使用
网页中引入的静态资源多了以后有什么问题??? 网页加载速度慢, 因为 我们要发起很多的二次请求; 要处理错综复杂的依赖关系 如何解决上述两个问题 合并、压缩、精灵图、图片的Base64编码 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系; 什么是webpack? webpack 是前端的一个项目构建工…
十六.Vue监控数据
vue-监控数据 方式一:@keyup <input type="text" v-model="firstname" @keyup="getFullname"> methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } } 方式二:…
十五.Vue路由
什么是路由 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现; 在单页面应用程序中,这种通过…
十四.组件案例-评论列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
十三.Vue父子组件传值
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { templa…
十二.Vue组件
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便U…