vue笔记
关注
分享
扫一扫
vue笔记
#Hideonbush
这个作者很懒，什么都没留下…
展开
-
axios的使用
1.什么是axios,axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单说就是前端用于发请求的一个框架，详细的介绍和使用可以到官网查看http://www.axios-js.com/zh-cn/docs/axios的安装方式有三种：第一种：npm安装npm install axios第二种：使用browerbower install axios第三种：使用cdn<script src="https://unpkg.com/axios/原创 2020-11-13 14:47:46 · 226 阅读 · 0 评论 -
Vue promise的用法
1.promise是什么，它可以说是异步编程的一种解决方法，就拿传统的ajax发请求来说，单个还好，如果是一个请求回来的数据还要被其他请求调用，不断地嵌套，可想而知，代码看起来是很乱的，promise主要是为了解决这种情景而出现的。2.简单使用，通过new Promise3.结果4…then和.catch都会返回一个Promise对象，我们可以使用Promise的方法，来传出一些数据，只要是调用了resolve都是走then里面的代码块，只要是调用了reject，都会去找到catch的代码块，链式调用原创 2020-11-12 10:56:32 · 9378 阅读 · 2 评论 -
Vue vuex的使用
1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简单来说就是存储和管理各个组件想用的一些公共对象等。2.vux的基本使用1)新建的项目基于脚手架2，打开终端通过命令npm install vuex --save安装vuex2）store相关的js文件3）App.vue4)将store挂载到vue实例上5）运行结果3.vuex有这几个比较核心的概念，State,Getters,Mut原创 2020-11-11 15:20:58 · 275 阅读 · 0 评论 -
Vue vue-router的使用
1.Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌2.vue-router其实就相当于vue的一个插件，vue的插件要想使用，第一先安装，第二使用该插件，第三便可以使用这个插件的功能了3.如下，通过vue脚手架2搭建起来的项目，在创建这个项目时没有安装到vue-router,打开项目的终端先通过命令npm install vue-router --save4.路由基本的使用1）Index.vue<template&原创 2020-11-10 17:47:11 · 228 阅读 · 0 评论 -
Vue slot插槽的基本使用
1.slot意思为插槽，简单地理解，插槽可以理解为其为我们预留了一块空间，我们想插入什么东西就插入什么东西，比如一个app,很多界面都用到了导航栏或者tabbar这种东西，然而每一个界面的导航栏显示的东西内容又不一样，但其实这些都可以用插槽来实现，定义好插槽，使用者插入自己想要的内容再使用即可2.插槽的基本使用，首先是基于2.6.0以下的代码<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2020-11-06 10:36:47 · 1131 阅读 · 0 评论 -
Vue 父子组件的访问方式
1.有时候我们父组件想要直接拿子组件的数据来使用，父组件从子组件拿数据的方式有两种第一种方式：通过this.$children第二种方式：通过this.$refs,要给子组件标签上绑定一个ref2.通过第一种方式来获取子组件数据代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><原创 2020-11-05 16:09:01 · 764 阅读 · 0 评论 -
Vue 父组件与子组件之间的通信
1.我们知道组件其实是相当于一个vue实例，它有自己的data,method，template，components等等的数据，所以它想要拿到别人的数据是要通过一定的方式的，而不是随便就可以拿到别的组件的数据2.官网查得1）父组件通过props可向子组件传递数据2）子组件通过事件向父组件传递数据3.父传子props的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-11-03 18:02:55 · 467 阅读 · 0 评论 -
Vue 组件的基本使用
1.组件，什么是组件，可以这样理解，一个页面有可能包含很多逻辑，很混乱，当我们将这一大坨东西分为很多个小东西，每一个小东西只完成自己的功能，和其他的小东西互不干涉，页面想要使用，只需要引入就行了。2.组件的使用可分为三步：一创建组件构造器，二注册组件，三使用组件3.其实每一个组件就相当于一个vue实例，它也有自己的template,method,data，components这些东西，data必须是一个函数，为什么是一个函数呢？组件式可以多复用的，也就是说，可以在很多地方通过引入标签名的方式来使用组件，原创 2020-11-03 17:15:43 · 278 阅读 · 0 评论 -
Vue 数组方法是否有响应式的效果
1.数组的方法包括增删改查，那么这些对数组的操作，界面上的数据到底是否还是有响应式的效果呢？数组的push,pop，unshift，shift,sort,reverse,splice都是具有响应式的效果，但我们通过this.fruits[2]='c’这种方式修改，就没有达到响应式效果，如果是要修改数组元素的话，可以使用splice或者Vue.set来实现例子<!DOCTYPE html><html lang="en"><head> <meta ch原创 2020-10-30 16:05:41 · 691 阅读 · 0 评论 -
Vue v-on标签的使用
1.v-on标签主要是用于监听客户端的事件，比如鼠标点击，键盘按下抬起等等。2.v-on绑定点击事件例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="content"> <h2>当前数：{{co原创 2020-10-29 15:31:21 · 613 阅读 · 1 评论 -
Vue 计算属性computed
1.什么是计算属性，我们知道在前面学习vue入门程序的时候，一般都是通过mustache语法，从data里拿数据，然后显示，但有时候会出现，一些数据并不可以直接拿来用，而是要经过以一系列的操作后，才能使用，这时候，computed发挥了它的作用，其实method也可以实现，对某些数据进行处理再返回，那为什么要存在computed呢，那是因为computed提供了一个缓存机制，方法每调用一次都会执行一次，而计算属性，在第一次调用时，会执行一次，之后再调用时，不会再执行，数据已经被放到了缓存里面。2.例子&原创 2020-10-29 15:00:43 · 139 阅读 · 0 评论 -
Vue v-bind标签的使用
1.v-bind标签主要用于动态绑定一些属性，比如src,href，class,style,以及向另外一个组件传递props值。2.v-bind动态绑定src和href的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="原创 2020-10-28 16:54:16 · 672 阅读 · 0 评论 -
Vue 一些常用的标签
1.v-once标签，我们知道vue是响应式的，即某个地方数据更改了，界面的数据也会更改，有时候我们只希望界面只渲染一次，不希望界面的数据乱变动，那么就可以使用v-once标签了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id=原创 2020-10-28 15:38:30 · 4003 阅读 · 1 评论 -
Vue 计数器小案例
1.运用methods实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="content"> <h2>计数器案例</h2> <button @click="sub">原创 2020-10-28 14:57:42 · 198 阅读 · 0 评论 -
Vue v-for标签的使用
1.v-for标签作用是遍历数组或者遍历一个对象2.例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="content"> <h2>遍历数组</h2><!-- <u原创 2020-10-28 14:47:12 · 2944 阅读 · 1 评论 -
Vue的入门程序
1.Vue是什么？Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2.要想使用它，那就得引用它，使用方式有三种，一种是cdn引入，还有一种直接去官网直接下载，最后一种是通过npm下载，这里暂且用第二种方式。3.进入到vuejs官网4.到这个地方，选择开发版本，右击，从链接另原创 2020-10-28 14:33:48 · 249 阅读 · 0 评论