vue
咸鱼gg
这个作者很懒,什么都没留下…
展开
-
Vue配置代理-解决ajax请求跨域问题
开启服务器 下载并引入axios 在项目路径下下载axios npm i axios 引入:import axios from ‘axios’ 直接请求5000 5001端口会产生跨域问题 用 vue-cli配置代理服务器解决跨域问题 方法一 在vue.config.js中添加如下配置: devServer:{ proxy:"http://localhost:5000" } 说明: 优点:配置简单,请求资源时直接发给前端(8080)即可。 缺点:不能配置多个代理,不能灵活的控制请求是否走原创 2021-09-18 14:31:06 · 296 阅读 · 0 评论 -
Vue之组件自定义事件
干啥的? 父组件给子组件绑定一个自定义事件实现:子给父传递数据 1.事件绑定 方式一: 1.1绑定 子组件Student绑定一个 自定义的atguigu 事件到Student组件VueComponent实例身上,且有一个getStudentName的回调函数 <Student @atguigu="getStudentName" @demo="m1"/> 1.2触发 谁绑定的谁去触发 第一个参数为:自定义事件的名称 要传的参数this.name直接传 如果传的参数多可以放在数组李【k1:v1,原创 2021-09-17 16:59:36 · 69 阅读 · 0 评论 -
Vue之浏览器本地存储-实现搜索历史功能
干什么用的? 一般用来做搜索历史 本地存储 localstorage api: 增:localStorage.setItem(key,value) 删:删除指定key的 localStorage.removeItem(key) 删:删除所有 localStorage.clear() 查:localStorage.getItem(key) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> &原创 2021-09-17 15:51:51 · 398 阅读 · 1 评论 -
Vue之scoped样式
现象: 各个组件里的style样式运行时汇总到一个地方,肯能导致不同组件之间同名冲突 比如Stuudent组件有demo School组件也有demo 如何解决 在style 添加scope 这样这个样式就只能被上面的结构使用 App组件除外 实际开发中 App一般不使用scoped App的样式一般是下面的组件都会使用的 ...原创 2021-09-16 15:28:17 · 117 阅读 · 0 评论 -
Vue之列表渲染 V-for
列表渲染 1.基本列表 v-for指令: 1.用于展示列表数据 2.语法:v-for="(item, index) in xxx" :key=“yyy” 3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少) 4.of in都行 new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003原创 2021-09-16 14:58:00 · 79 阅读 · 0 评论 -
vue之插件
vue之插件 干什么的? 功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 如何使用 定义并暴露 main.js中使用 传参数可以在install方法中接受 ...原创 2021-09-16 14:54:07 · 44 阅读 · 0 评论 -
Vue之混入
67. Vue之mixin mixin(混入) 功能:可以把多个组件共用的配置提取成一个混入对象 提高代码复用 使用方式: 第一步定义混合: 2.1局部引入 <template> <div> <h2 @click="showName">学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> </div> </template> <script> //原创 2021-09-16 14:37:21 · 74 阅读 · 0 评论 -
Vue之props
vue之props 创建一个Studen组件,展示学生的name,age,sex <template> <div class="basic"> <h2>{{msg}}</h2> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> <h2>性别:{{sex}}</h2> </div> </templa原创 2021-09-16 10:00:30 · 99 阅读 · 0 评论 -
Vue之cli 脚手架入门
Vue cli创建vue2 1.配置淘宝加速镜像(加速) npm config set registry https://registry.npm.taobao.org 2.全局安装@vue/cli -g全局 npm install -g @vue/cli 3.打开cmd窗口,切换到你要创建项目的目录,然后使用命令创建项目 vue cerate xxx(项目名称) 创建完成显示如下: 这里选择vue 2后等待创建完成 4.测试成功 创建成功的文件夹用vscode打开,开启一个终端 输入 npm原创 2021-09-16 07:21:23 · 67 阅读 · 0 评论 -
vue之基础入门
vue入门案例hello,world 1.在head标签里引入vue.js <script type="text/javascript" src="../js/vue.js"></script> 2.创建一个容器 vue是是一套用于构建用户界面的渐进式框架,需要一个容器内盛放数据 <div id="root"> <h1>hello,world</h1> </div> 3.创建一个vue实例 思考一下为什原创 2021-09-15 06:36:27 · 71 阅读 · 0 评论