![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
清欢Viki
别人欣赏的永远是你骄傲的样子。
展开
-
vue基础语法
1.双向数据绑定(v-model)<input type="text" ref="name" v-on:keyup="changeName"> //html使用refchangeName:function(){ this.name = this.$refs.name.value;}//js调用refs或者<input type="text" ref="...原创 2019-07-08 21:30:11 · 85 阅读 · 0 评论 -
vue-cli 3.x版本启动项目后端口号不是8080的问题
概述使用vue-cli 3.x版本启动项目后端口号不是8080而是一个随机的五位数解决方案进入项目目录后输入npm install portfinder@1.0.21后再运行原创 2019-08-19 18:15:40 · 1714 阅读 · 0 评论 -
vue路由(router)与resource
背景传统的路由均需要刷新网页跳转,vue-router则不用,大大提高了路由效率 vue-resource是请求数据的插件方法vue-router1.安装npm install npm install vue-router --save-dev2.引用main.js中import VueResouce from "vue-resource"Vue.use(V...原创 2019-07-10 23:11:46 · 817 阅读 · 0 评论 -
vue生命周期
总览vue的生命周期可简单的从上边这张图了解,红圆角矩形就是生命周期函数相应方法的主要任务:beforeCreate ---组件实例化之前执行 ---一般加载动画created ---组件实例化之后,但页面未显示 ---一般获取接口数据,结束动画加载brforeMount ---组件挂载之前,页面未显示,虚拟Dom已经配置,编译el,templatemounte...原创 2019-07-10 21:03:32 · 98 阅读 · 0 评论 -
vue子组件向父组件传值
背景vue实现数据交互之子组件向父组件传值,这里通过点击事件改变父组件的值方法子组件User.vue //点击hello users后改变父组件title<template> <div class="users"> <h1 v-on:click="change">hello users</h1> <...原创 2019-07-10 20:31:28 · 709 阅读 · 0 评论 -
vue父组件向子组件传值
背景vue要进行数据交互,若父组件要向子组件传值要怎么办那方法父组件的标签引用时,添加v-bind,子组件的props接收注册父组件App.vue<template> <div id="app"> <users v-bind:users="users"></users> //v-bind传值 </div...原创 2019-07-10 19:51:07 · 193 阅读 · 0 评论 -
vue组件样式
背景使用嵌套组件时,样式往往会覆盖,即子组件的样式会覆盖App.vue的样式比如App.vue的h1标签的颜色是红色,User.vue的h1是绿色,但运行时,都变成了绿色怎样使组件的样式只作用于本组件那方法在style标签中添加scopedUsers.vue<template> <div class="users"> <h...原创 2019-07-09 21:14:07 · 844 阅读 · 0 评论 -
vue组件嵌套
背景我们知道创建脚手架项目后,index.html是入口地址,调用App.vue,想要在App.vue调用其他组件该怎么办呐方法1.在component创建自己的组件,这里创建User.vue<template> <div class="users"> <ul> <li v-for="name in names"&...原创 2019-07-09 20:39:32 · 1771 阅读 · 0 评论 -
vue-cli 3.x安装及项目创建
前提环境node.jsnpm可通过node -vnpm -v查看是否安装安装过程1.安装淘宝镜像,使用npm速度更快npm install -g cnpm --registry=https://registry.npm.taobao.org2.安装vue-clicnpm install -g @vue/cli查看是否安装成功vue --ve...原创 2019-07-09 19:52:04 · 418 阅读 · 0 评论 -
Vue3.x axios跨域请求的问题
描述一般请求的url地址与项目所在地址不一致便会触发跨域请求,若没有跨域措施,一般会抛出No 'Access-Control-Allow-Origin' 错误解决方案解决方案就是更改配置文件 vue.config.js,在devServer 下配置proxydevServer: { proxy: { '/api': { target: '...原创 2019-09-07 17:12:12 · 1758 阅读 · 1 评论