vue
vue入门到精通
web前端 zxp
最近不在线,消息暂时无法回复
展开
-
vue 解决跨域的问题 2.x与 3.x版本
2.x打开config/index.js在proxyTable中添写如下代码:proxyTable: { '/api': { //使用 "/api" 来代替 "http://xxx" target: 'http://www.baidu.com',//源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': '' //路径重写 //'^/api': 'http://.原创 2020-07-29 21:15:42 · 308 阅读 · 0 评论 -
vue 中 数据请求的几种方式
使用第三方ajax封装成 promise习惯的库vue-resourceaxios访问本地 json ------------- vue-resource// axios({ //第三方的axios this.$http({ //把axios绑定到Vue的原型 url: './data/user.json' }).then( res => console.log('maxios res', res) ).catch( err => c.原创 2020-07-29 20:47:55 · 1006 阅读 · 0 评论 -
vue 定义一个全局实例 Vue.prototype
定义 与 使用定义:Vue.prototype.$appName = 'My App'使用:this.$appName (任何地方)介绍 ---------- 来自官方文档使用场景:你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用Vue.prototype.$appName = 'My App'这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:n.原创 2020-07-22 17:18:57 · 3394 阅读 · 0 评论 -
vue 生命周期钩子函数
介绍四个阶段created 创建mounted 挂载(加载)updated 更新Destroy 销毁上面的四个阶段,每个阶段分为开始前和开始后,这样就衍生出了8个方法:beforeCreate() 组件实例刚刚被创建 (el 和 data 并未初始 化)created() 组件创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在(完成 data 数据的初始化)beforeMount() 模板编译.原创 2020-07-22 17:03:19 · 213 阅读 · 0 评论 -
vue 插槽 slot (匿名 / 具名 / 作用域插槽)
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块匿名插槽不用设置名字 name ,所以叫匿名插槽将 子组件元素包裹的数据传递给子元素又叫 默认插槽// 父组件----------------------------------------------------<template> &l..原创 2020-07-18 10:49:12 · 614 阅读 · 0 评论 -
vue单文件组件是什么?
概括单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用大大缩短vue文件的长度和页面复杂度样子内容视图区域 <template></template>脚本区域 <script></script>样式区域 <style></style>...原创 2020-07-03 19:51:56 · 1607 阅读 · 1 评论 -
vue 实现表单多选 --- 并且获取其中的值
说明使用 v-model 指令 结合 name / value 使用需要你的 data 里面的数据类型为 数组代码说明为什么会是 v-model.number ?这是将它的值固定为 数字类型,否则你获取到的就是字符串<div id="root"> <input type="checkbox" v-model.number="hobby" name="hobby" value="1">学习 <input type="checkbox".原创 2020-06-18 18:46:54 · 2344 阅读 · 0 评论 -
vue 实现表单单选 --- 并且获取其中的值
说明使用 v-model 指令 结合 name / value 进行使用注意:一定要有 value ,这个值才是决定你选的什么代码展示<div id="root"> <input type="radio" v-model="sex" name="sex" value="1">男 //绑定数据 sex // 单选按钮名字一定要一样 <input type="radio" v-model="sex" name="sex" value="2"&.原创 2020-06-18 18:36:47 · 3015 阅读 · 1 评论 -
vue 实现表单下拉框 --- 并且获取其中的值
说明使用到了 v-model 指令开始使用获取下拉表单中的值原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化(关键) <option value="1">一---1</option> <option value.原创 2020-06-18 18:26:37 · 3611 阅读 · 1 评论 -
vue watch监听基本使用
使用说明使用:可以监听模型数据的改变,当绑定到监听上的模型数据改变了 那么监听就可以触发,来完成具体的功能注意:监听watch在初始化的时候不会执行,只有当数据改变之后才会运行语法:要和el,data,methods同级的位置来进行编写 Watch:{ 你要监听的数据( newval(新数据),oldval(旧数据) ){ 你要处理的逻辑 } }简单使用//-----------------------------ht.原创 2020-06-11 12:35:28 · 526 阅读 · 0 评论 -
vue 获取本地图片路径(动态引入 / 静态引入)
开篇首先,我们直接 img src = “xxx” 就可以获取图片,但是我们需要的不是直接写在上面的 地址而是从 data 数据当中获取到的地址此方法有别于 从数据库中获取的数据一、首先我们在 img 当中引用<template> <div> <img :src="arr.url"> </div></template>记住这里是 :src里面的是我数据给传递过来的数据二、设置数据 data()&l.原创 2020-05-10 22:21:10 · 28172 阅读 · 1 评论 -
vue的双向数据绑定原理
原理vue双向数据绑定是通过 数据劫持 于 发布者-订阅者模式 的方式来进行实现的数据劫持:就是在我们访问或者是设置对象的属性的时候,会触发Object.defineProperty()函数来进行劫持(拦截)的,返回(get)设置(set)的两个对象的方法来操纵我们对于数据的反应 ⬇⬇⬇ var user={ name:"xixi" } /...原创 2020-04-23 22:58:29 · 158 阅读 · 0 评论 -
vue 的第一堂课 ➡➡➡ vue起步(hello world)
初学者的第一堂课在此之前,了解一下 vue 的基础概念会对学习 vue 有很大的帮助 ➡➡➡ vue基础概念vue是一套用于构建用户界面的 渐进式 的 自底层向上增量开发 的 mvvm框架mvvm框架M:Model模型 数据V:View 视图 用户可以看见的界面VM:ViewModel 视图模型 就是视图和模型之前的桥梁,负责监听v或者m的修改 可以让我们更加关心业务不用对d...原创 2020-04-23 21:53:22 · 168 阅读 · 0 评论 -
vue重要概念(学习 vue 的必修课)
为什么会说只有掌握了概念才能在工作中更好的与他人沟通?其一 你看在工作中你的上司给你的项目中需要说需要用到xx方法,应该xx做。如果你只会写代码的话,在与同事沟通的时候就会产生很大的阻碍,在谈啥啥不知道的时候你就会知道有多憋屈,明明… …其二 只有掌握了基本概念才能吃透vue,才能走的更远其三 面试需求了解vue的基本概念vue是目前前端开发中最流行一个 mvvm框架vue是一...原创 2020-04-23 21:35:26 · 855 阅读 · 0 评论 -
axios 拦截器
作用拦截请求拦截响应拦截请求axios.interceptors.request.use(回调函数)完整展示:axios.interceptors.request.use((config)=>{ config.url = "/ele"+config.url;// config.url -->/ele/login token return co...原创 2020-04-06 22:19:46 · 267 阅读 · 0 评论 -
vue的助攻ElementUi 基础介绍、下载、使用步骤
介绍背景:饿了么团队开发的官网:https://element.eleme.cn/#/zh-CN介绍:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端(PC端)组件库它帮你封装好了一些组件,可以直接使用组件,就是对html 标签的一个拓展里面的属性不需要可以去记使用步骤安装cnpm install element-ui -S安装...原创 2020-04-01 20:55:22 · 520 阅读 · 0 评论 -
使用 vue 来获取其他网站的数据八步走
开始前的准备安装 vue 项目安装 vuex 插件安装 axios内容仅供学习使用1. 第一步创建一个页面用于存放并展示你获取的数据写入基础信息:<template> <div> </div></template>-----------------------------------------------...原创 2020-04-01 13:11:58 · 4877 阅读 · 0 评论 -
vuex 属性 actions 进阶问题
》》点此进入声明调用基础文章《《调用<div><input type="button" @click="$store.dispatch('listMore')" value="加载更多"></div>声明:new vuex.Store({ actions:{ listMore(context){ //它其实会默认传...原创 2020-03-31 23:18:47 · 255 阅读 · 0 评论 -
axios 介绍、下载、使用
基本介绍axios 是封装的一个用于调用接口的模块支持 get、put、delete、post不支持 jsonp它已经专门封装好了调用接口的模块,可以直接用,不需要封装 下载cnpm install axios -S-D 是只在开发环境中使用-S不仅在开发发环境当中使用,在生产环境中也要使用 引入import axios from “axios”;会自动...原创 2020-03-31 19:05:10 · 613 阅读 · 0 评论 -
vue项目文件中的 main.js
1. 干什么的?是初始化vue实例并使用需要的插件并且将你的内容渲染到主页面上2. 初始内容介绍import Vue from 'vue' // 引入VUE核心库import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件Vue.config.productionTip = false; // 是否要在生产环境当中给...原创 2020-03-31 17:47:28 · 18836 阅读 · 0 评论 -
vuex属性 state、mutations、actions之间的关系
他们的作用1. state:数据状态------------------------------------- 仓库当中的商品2. mutations:函数,同步操作。更改state---------------- 工人。用来操作商品3. actions:函数,异步操作。通过调用mutations来更改数据--- 老板,发送命令4. getters:计算属性5. module...原创 2020-03-31 14:28:23 · 1288 阅读 · 0 评论 -
vuex 声明与调取数据(全)
目录前景提要提前布局在main.js里引入的 store 里的index.js数据的声明数据的调取前景提要vuex基础入门由五部构成最重要的是前三个,只要你把前三个学好了,你的 vuex就算学成了第4和第5是为前三个做服务的 1. state:数据状态------------------------------------- 仓库当中的商品 2....原创 2020-03-31 13:57:33 · 506 阅读 · 0 评论 -
vuex基础入门
前景提要vue的基本特点:双向绑定虚拟 dom组件化,模块化组件化----》数据传值:父子,子父,非父子。单向数据流。ref如果说我组件里面的数据比较复杂,组件之间的来回传值,来回传容易出错,并且很费劲介绍vuex 读:vue 叉vuex是什么?是一个对数据进行集中式管理的工具帮助我们解决了什么问题?数据传值繁琐问题实现了数据的共享。数据:定义的DAT...原创 2020-03-31 11:55:56 · 1587 阅读 · 0 评论 -
vue路由守卫 之 内置守卫
基础知识路由守卫:有些资料上叫路由拦截或者路由的钩子(函数)当我进到到哪个阶段的时候会自动触发举个例子路由的守卫就相当于看门的老大爷,你进出都要检查,符合了要求才能进出路由的三大守卫全局守卫: beforeEach: 全局前置守卫 afterEach: 全局后置守卫 beforeResolve:全局解析守卫。 组件内部守卫:...原创 2020-03-30 22:04:38 · 384 阅读 · 0 评论 -
vue当中的 $router 和 $route 仅一 " r " 只差,它们有什么区别
区别区别大了$route:具体的路由针对某一个路由像咱们接受属性的时候,用的 $route ,它的传参给某一个传$router:路由器是一个器皿,器皿里面是包含这个路由的针对多个路由下面有一个 push(),我可以用它来实现一个跳转/********************在你写入的页面******************/if(i===1){ this....原创 2020-03-30 14:00:45 · 330 阅读 · 0 评论 -
vue router-link 跳转路由传值
传值原理当你点击进入某个页面的链接的时候,给地址栏传一个参数然后当你进入到对应的网页以后,再从地址栏获取对应的信息实现过程前提声明:我的这个链接再 App.vue 里面,这个 App.vue 里面的内容是渲染到index.html 里面的,所以就能在主页面看到对用的信息to 是到那个路由给的地址对应的链接接受参数的代码是写在 我的要进入的那个页面里面的有对应的页面...原创 2020-03-30 13:33:29 · 841 阅读 · 0 评论 -
vue的路由模式 history 和 hash
前言vue的路由模式(mode)分为两种:url modehistory: 放置到生产环境当中时,需要在服务器上额外进行重定向配置。可以从你访问的 url 就可以看的出来hash:上线不需要额外配置。...原创 2020-03-30 12:21:20 · 842 阅读 · 0 评论 -
比较常用的路由还有哪些配置?(学习路由必备知识)
首先你需要了解路由是什么 -----文章目录前言重定向alias 别名redirect 重定向前言你应该知道如何创建路由 https://blog.csdn.net/qq_44163269/article/details/105150962你应该知道路由给提供的组件router-view 和 router-link是干什么的你在地址里面输入/xxx 展示你...原创 2020-03-30 09:18:14 · 313 阅读 · 0 评论 -
vue 路由的内置组件 router-link 介绍以及如何使用
目录前言它在哪?如何使用它里面的内容 to 介绍前言它是干嘛的?实现你路由的切换就像你以前写网页,你是不是写了分页,然后在主页上还有一个进入分页的 a 标签它就和这个功能类似它在哪?这里展示的主页面当中的 router-link所以它在 App.vue 里面(为什么主页面写在 App里,不是应该写在 index.html里面吗?no no no,这里是将...原创 2020-03-29 22:08:12 · 2262 阅读 · 0 评论 -
vue 路由的内置组件 router-view 详细介绍(有图有真相)
介绍当你的地址符合我的路由要求的时候,会把路由的组件在 你的界面中呈现,而这个界面实在 App.vue里面当你打开 App.vue就会在里面发现这两个组件这两个是 vue 给你提供的两个 vue 内置组件功能介绍router-link 实现路由之间的跳转router-view 当你的路由path 与访问的地址相符时,会将指定的组件替换该 router-view...原创 2020-03-29 21:24:04 · 56685 阅读 · 13 评论 -
vue服务在开启时 ➡自动进入服务⬅ 并且地址栏中输入 127.0.0.1 可以进入到服务
前言我们都知道在vue 项目开启的时候,他会给你一个地址,而你只有在服务器中输入它给的地址才能进入到相应的服务而且 vue 服务在开启的时候并不会自动进入到服务就像这样:那么如何才能让自己的服务自动打开并且输入127就能进入呢?步骤1:在 vue 项目的根目录下创建一个 vue.config.js 文件(右击新建文件)步骤2:在文件中写入内容module.exp...原创 2020-03-29 20:52:02 · 1374 阅读 · 0 评论 -
vue 组件引入的方式
介绍组件的引入就是能让我们使用里面内容引入的是一个文件,它里面通常时你的页面展示内容引入有两种方式:第一种:引入赋值第二种:内部直接引入import(文件路径)...原创 2020-03-27 22:58:12 · 681 阅读 · 0 评论 -
vue-router 路由器超详细基础介绍
目录介绍安装具体内容介绍router内的index.js介绍1. 介绍路由器:它是一个器皿,就是一个容器比如酒瓶,它里面放的是酒路由它里面放的是路由根据你的访问地址来决定你要使用的组件单页面应用:SPA应用,就是你的项目,我的这个项目是单页面,也就是说我的这个项目只有一个页面单页面也就是说我可以实现多页面的功能,但是我这里面就是一个页面根据你的路由来实...原创 2020-03-27 22:50:00 · 1124 阅读 · 0 评论 -
vue项目中的文件夹都是什么(小白必看)
在此之前你已经安装好了项目vue.js脚手架 @vue/cli 手把手教你安装配置这是没有安装任何工具为前提的最基础教程(都有工具 简介图 在文章底部)这里我没有安装任何工具,初始界面就是这样的开始介绍 publicpublic (翻译为 公共 的意思)里面存放主页面信息 (单页面应用)单页面应用:我的这个项目只有这一个页面,当我要切换内容的时候,它都是在这一...原创 2020-03-27 13:48:11 · 16595 阅读 · 1 评论 -
如何开启 vue 项目
在读此文章再此之前默认你已经安装了 vue 项目vue项目 脚手架@vue/cli安装运行项目cmd 运行 vue create serve运行的目录要在你的项目文件夹下比如我有一个项目 one那我就要双击进入 one 项目,在这个目录下运行展示:回车运行如果地址错误:浏览器打开项目在浏览器的地址栏输入 上图蓝字 的地址第一个是你的本地服务地址(...原创 2020-03-27 12:36:00 · 3942 阅读 · 1 评论 -
vue.js 的数据渲染 render
render 函数是干嘛的? (点击进入vue官方介绍)简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就...原创 2020-03-26 22:47:07 · 342 阅读 · 0 评论 -
vue.js脚手架 @vue/cli 手把手教你安装配置
1. 下载npm install @vue/cli -g或cnpm install @vue/cli -gcmd 运行,在哪个文件夹下安装无所谓,因为要安装到全局下你 npm 安装在哪它就安装到哪查看是否下载完成:vue -V2. 开始配置(创建项目架构)1.创建:vue create 项目的名字(项目不允许大写)你把你项目放在哪里,就在那个文件夹运行...原创 2020-03-26 21:41:54 · 812 阅读 · 0 评论 -
vue.js中的 el 绑定元素的这个可以不写吗?($mount)
el作用当我们刚接触 vue 的时候第一个接触的就是 el:"…"它用来和我们操作的元素进行绑定那么如果我们不绑定呢?你不绑定的话这个new Vue() 就使用不到,不会报错那如果我就是不想写这个 el 还执行这个Vue实例呢?那就必须给这个Vue实例绑定一个 $mountconst btns = document.querySelector("button"); ...原创 2020-03-24 22:20:17 · 1133 阅读 · 0 评论 -
vue.js组件之间非父子传值:通过bus
传值的几种方式父子(向下)传值:通过属性子父(向上)传值:通过自定义事件非父子传值:通过bus.(非父子传值的其中一种方式)非父子传值 通过bus也被称为公共汽车目的:通过子组件发布消息,使父级的订阅者收到子组件发布的消息父级是接受不到的,就像纸质版的报纸,你发布总有个地区限制,比如 河南日报 只在河南发布一样,不会往其他地区流通一样,而 bus 就是将 河南日报提升一...原创 2020-03-24 21:16:13 · 167 阅读 · 0 评论 -
vue.js的发布者与订阅者
介绍就像一个微信公众号,它会定时推送内容,而订阅它的所有用户就会收到这个推送的内容$emit - 发布者$on — 声明订阅者$once 订阅者只订阅一次消息(比如我订阅了一个公众号,它只给我推送了一个内容,我就把它取消订阅了,后续不会再收到)$off 取消订阅(所有的订阅者只接受一次消息)代码具体介绍/*---------------------------html...原创 2020-03-24 20:39:01 · 1859 阅读 · 0 评论