Vue
文章平均质量分 58
Vue从0开始学习,学习视频来源于B站,搜索:2019年最全最新Vue、Vuejs教程,从入门到精通。作者
ilovecoding。所写内容来自视频讲解以及个人理解,仅代表个人观点,如有错误,欢迎指正
旧梦半岛
这个作者很懒,什么都没留下…
展开
-
Vue中使用websocket
Vue中使用websocket转载 2023-01-28 11:34:23 · 346 阅读 · 0 评论 -
前端面试笔记
如何让一个div垂直水平居中:css方法:父盒子设置:display:table-cell; text-align:center; vertical-align:center;div设置:display:inline-block; vertical-align:center;使用css3的transform:父盒子设置:display:relative;div设置:transform:translate(-50%,-50%); position:absolute; top:50原创 2021-03-12 11:43:36 · 580 阅读 · 0 评论 -
Node学习06:express框架与vue结合使用,无法保存session内容解决方案
express框架与vue结合使用,无法保存session内容解决方案问题重现:使用express框架编写后端接口时,使用中间件判断用户是否登录,将登录信息保存至session中,登陆成功时该接口session能够获取到,访问其他界面时,界面遭受拦截,并且无法获取保存的session信息:登录接口,当登陆成功保存用户信息至session中// 登陆router.post('/login', async (req, res) => { let arr = [req.body.usern原创 2021-03-05 17:16:05 · 597 阅读 · 0 评论 -
Vue学习31_vue-awesome-swiper使用过程遇到的坑以及解决方案
vue-awesome-swiper使用过程遇到的坑以及解决方案第一个坑:根据vue-awesome-swiper官方文档对vue-awesome-swiper进行了引用:import 'swiper/css/swiper.css'启动项目时:提示无法找到该文件:找不到原本的截图,此处提示错误应该是找不到import 'swiper/css/swiper.css’文件原因:文件夹目录结构发生了变化:还有另一种可能是,在新版中引用的不是该文件,而是通过:import 'swiper/sw原创 2020-11-28 19:12:12 · 572 阅读 · 0 评论 -
Vue学习30_Vue中使用axios
Vue中使用axiosaxios的功能特点:-在浏览器中发送XmlHttpRequests请求;-在node.js中发送http请求;-支持Promise API-拦截请求和相应;-转换请求和相应数据;axios的安装:npm install axios --saveaxios的基本使用:-导入 import axios from ’axios-使用:axios({ url:'http://123.207.32.32:8000/home/multidata', methods:'ge原创 2020-10-27 09:22:45 · 294 阅读 · 0 评论 -
Vue学习29_Vue中Devtools的安装以及vuex的几个核心概念
Vue状态管理的属性在使用vue时,vue为我们提供了一个浏览器插件Devtools,用于跟踪vue的操作,为我们使用vue进行开发时提供了极大的便利,安装方式有两种:一种是在谷歌浏览器的网上商店进行安装,点击浏览器右上角的菜单,更多工具,拓展程序,进去里面进行安装,我在安装时遇到了一个问题就是谷歌的网上商店进不去,所以这里采用另一种安装方式:附安装教程:https://blog.csdn.net/yizufengdou/article/details/103985709在最后一步拖拽时可能会提无法使原创 2020-10-26 12:36:00 · 280 阅读 · 0 评论 -
Vue学习28_Vue的状态管理vuex
Vue的状态管理vuexVuex:Vuex是一个专门为vue.js应用程序开发的状态管理模式,状态管理可以理解成把需要多个组件共享的变量全部存储在一个对象里;什么样的变量需要存放在vuex:比如说用户的登陆状态、用户名称、头像、地理位置;比如说商品的收藏,购物车的物品;vuex的基本使用:单页面状态管理:state中的数据在view中显示,view中的数据又可以执行一些actions,actions的执行又可以改变state中的数据,这样叫做单页面状态管理。示例代码:<templat原创 2020-10-25 18:00:07 · 121 阅读 · 0 评论 -
Vue学习27_使用vue-router实现简易的路由跳转
使用vue-router实现简易的路由跳转原创 2020-10-25 11:33:58 · 348 阅读 · 0 评论 -
Vue学习26_Vue-cli的认知(暂空,后续将根据项目经验进行总结)
Vue-cli的认知原创 2020-10-25 11:18:58 · 121 阅读 · 0 评论 -
Vue学习25_Vue的异步操作Promise
Vue的异步操作Promise原创 2020-10-25 09:52:59 · 1621 阅读 · 1 评论 -
Vue学习24_Vue中ES6的模块化实现
Vue中ES6的模块化实现模块化导出:示例代码:let name = '小明'let age = 18let flag = trueif (flag) { console.log(name);}function sum(num1, num2) { return num1 + num2}export { flag, sum}// 导出函数export function result(num1, num2) { return num1 *原创 2020-10-25 09:33:58 · 310 阅读 · 0 评论 -
Vue学习23_Vue插槽slot的使用
Vue插槽slot的使用在组件开发过程中,我们有时候需要对组件预留出一个位置,根据需要往其中插入某些内容,倘若将组件写死,内容固定,不利用我们对组件的重复使用,Vue中引入了插槽的概念,使得我们能够在组建开发中,为组件预留出位置,在需要使用时根据需求插入不同的组件。插槽的基本使用示例代码: <div id="app"> <div> <cpn> <button>按钮<原创 2020-10-24 17:36:21 · 330 阅读 · 0 评论 -
Vue学习22_Vue父子组件的数据访问
Vue父子组件的数据访问父组件访问子组件:$ childern/$ refs示例代码: <div id="app"> <mycpn ref="ref1"></mycpn> <mycpn ref="ref2"></mycpn> <mycpn ref="ref3"></mycpn> <button type="button" @click="b原创 2020-10-24 17:22:13 · 134 阅读 · 0 评论 -
Vue学习21_Vue父子组件的数据传递案例(v-model双向绑定父子组件数据)
Vue父子组件的数据传递案例(v-model双向绑定父子组件数据)示例代码: <div id="app"> <mynpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change" /> </div> <template id="npn"> <div> <p原创 2020-10-24 17:12:35 · 172 阅读 · 0 评论 -
Vue学习20_Vue父子组件的数据传递
Vue父子组件的数据传递父组件向子组件传递数据(props):在组件开发中,我们有时候需要在子组件中访问父组件的数据,因此则需要用到props属性进行父组件向子组件传递数据:**示例代码:**其中需要在props对象中对父组件传递的数据进行限制,比如限定类型,限定默认值等,在使用父组件数据时,需要利用v-bind动态绑定props的值,令其等于父组件的数据名称,以此来达到使用父组件数据的目的 <div id="app"> <mycpn></myc原创 2020-10-24 17:09:55 · 149 阅读 · 0 评论 -
Vue学习19_Vue组件数据的存放及为什么组件的data必须是一个函数
Vue组件数据的存放组件中的数据存放于data(){}函数中,并且必须是一个函数!我们都知道,在Vue实例中,有一个属性data用于存放数据,我们可以将所需要的数据存放在data属性中,在实例中,data是一个属性,它可以是一个对象,对象中存放着我们所需要的数据,但是为什么在组件中,数据存放的data必须是一个函数呢?示例代码: <div id="app"> <!-- 使用组件 --> <mycpn></mycpn&原创 2020-10-24 16:53:36 · 375 阅读 · 0 评论 -
Vue学习18_Vue组件的语法糖与组件的分离写法
Vue组件的语法糖与组件的分离写法Vue组件的语法糖:在Vue中,传统的组件使用需要分三步进行,分别是创建组件构造器,注册组件与使用组件,但是如果使用一个组件都要使用这三部分,并且在Vue的组件开发中,使用组件是经常需要做的事情,每一次都使用这三部,未免有些太复杂,因此Vue提供了组件的语法糖写法,简化了使用组件的步骤。在这里,分别使用组件的语法糖注册全局组件与局部组件: <div id="app"> <cpn1></cpn1>原创 2020-10-24 16:44:51 · 156 阅读 · 0 评论 -
Vue学习17_Vue的全局组件与局部组件/父组件与子组件
Vue的全局组件与局部组件在Vue的组件中,我们有时候希望一个组件能够在全局中进行使用,而有的组件则希望在特定的实例中才能进行使用,因此Vue为我们提供了一种全局组件与局部组件的概念:全局组件与局部组件:示例代码: <div id="app"> <my_cpn></my_cpn> <my-cpn></my-cpn> </div> <script>原创 2020-10-24 16:25:53 · 205 阅读 · 0 评论 -
Vue学习16_Vue组件的基础使用步骤
Vue组件的基础使用步骤使用Vue组件大致可以分为三个步骤创建组件构造器:示例代码: // 创建组件构造器对象 const myComponent = Vue.extend({ // ES6语法``定义字符串,允许换行 template: ` <div> <p>头部导航</p>原创 2020-10-24 16:08:18 · 207 阅读 · 0 评论 -
Vue学习15_Vue中v-model的使用
Vue中v-model的使用在Vue中,我们有时候需要对数据进行双向绑定,所谓的双向绑定的意思就是在Vue的data中定义的变量的值,当改变data中变量的值时,通过Mustache语法获取的值也发生改变,当童Mustache获取的值发生改变时,data的值也随之改变v-model的基本使用:示例代码:将data中的变量与输入框的值进行双向绑定: <div id="app"> <input type="text" v-model="message">原创 2020-10-24 15:41:01 · 572 阅读 · 0 评论 -
Vue学习14_Vue高阶函数的使用
Vue高阶函数的使用filter函数:filter函数的回调函数必须是一个boolean值,当返回一个true值时,函数内部会自动将这次回调的n加入到新的数组中,当返回一个false值时,回调函数会将这一次的n过滤掉,个人理解为filter函数相当于一个过滤器,只有满足条件的n才会被留下示例代码:从数组中筛选小于100的数,保留到新的数组中 <script> // 定义一个数组 const str = [12, 20, 100, 23, 67, 4原创 2020-10-24 14:40:29 · 1858 阅读 · 0 评论 -
Vue学习13_Vue实现简易的图书购物车
Vue实现简单的图书商城利用vue实现简单的图书商城系统,包括点击对应的书本数量,数量增加,点击减少按钮,数量减少,加个也随着书本数量的变化而变化,当点击移除按钮时,书本从购物车中移除,当所有书本都被移除时,显示购物车为空信息提示:HTML代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2020-10-23 17:39:42 · 2453 阅读 · 1 评论 -
Vue学习12_Vue中数组的常用方法
数组的常用方法push方法:push方法可以往数组最后面追加元素,既可以追加一个元素,也可以同时追加多个元素示例代码:使用push可以分别在数组最后追加元素,追加的元素可以是一个也可以是多个<div id="app"> <ul> <li v-for="letter in letters"> {{letter}} </li> <原创 2020-10-23 17:16:45 · 790 阅读 · 2 评论 -
Vue学习11_Vue的遍历循环
Vue的遍历循环v-for遍历数组:我们有时候需要对数组进行遍历,在vue中,v-for为我们提供了一种遍历数组的方式:我们既可以只遍历数组的值,也可以通过v-for遍历数组的下标值:示例代码: <div id="app"> <!-- 遍历未使用索引值 --> <p v-for="book in books">{{book}}</p> <!-- 遍历中使用索引值 -->原创 2020-10-23 16:22:21 · 672 阅读 · 3 评论 -
Vue学习10_Vue实现简易的切换登录方式
Vue实现简易的切换登录方式示例代码: <div id="app"> <!-- 这里涉及到Vue的虚拟Dom,在输入框输入的内容点击切换时,输入框内容还在,要想不复用,可以加个key,key一样复用,不一样不复用 --> <!-- 为v-if设置flag值,当其为true时显示账号登陆 --> <span v-if="flag"> <label for="username原创 2020-10-22 16:25:01 · 852 阅读 · 0 评论 -
Vue学习09_Vue的条件判断
Vue的条件判断v-if的基本使用: 有时候我们需要控制标签内容的显隐,在满足某些条件时,显示标签,某些时候又要隐藏标签,因此就可以引入v-if,为其设置一个boolean值,以此来控制标签的显隐:示例代码: <div id="app"> <h3 v-if="isShow">{{message}}</h3> </div> <script> const app = new Vue({原创 2020-10-22 16:06:34 · 348 阅读 · 0 评论 -
Vue学习09_v-on的修饰符
v-on的修饰符stop:stop修饰符的使用是为了解决事件冒泡问题:示例代码:在div块级标签内定义一个按钮,并且为div和按钮都添加了点击的事件监听: <!-- 事件冒泡,当按钮被点击时,div也会被点击 --> <div @click="divClick"> div内容 <button @click="btnClick">按钮</button> <原创 2020-10-22 15:41:36 · 185 阅读 · 0 评论 -
Vue学习08_事件监听及参数传递
事件监听在vue中,我们有时候需要对浏览器事件进行事件监听,比如当鼠标点击某一个按钮时,触发某种事件,这时,Vue为我们提供了方便快捷的方式v-on:v-on的基本使用示例代码:定义两个按钮,点击对应的按钮,对数据进行相应的增加和减少: <div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> &l原创 2020-10-22 15:04:49 · 905 阅读 · 0 评论 -
阶段性知识点总结,往后将细写
一段时间以来的学习内容这一段时间以来,学习的东西太多来不及整理,先给出目录,后续将会对这一阶段所学内容进行整理:阶段学习目录表截图:ES6的学习:包括箭头函数的使用,块级作用域以及对象的增强写法vue的基础操作,包括v-for,v-on,v-once,v-cloak利用v-bind动态绑定属性vue的计算属性vue的事件监听:vue的条件判断:vue的循环遍历:利用之前所学知识点进行了一个图书购物车的小案例实现:vue高阶函数的使用:filter、map,reduce原创 2020-10-20 16:58:55 · 141 阅读 · 0 评论 -
Vue学习07_ES6语法
ES6语法没有块级作用域引起的问题:在这里,我们设置了5个按钮,希望点击按钮时,在控制台打印出对应的按钮编号:示例代码: <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> &原创 2020-09-27 11:12:12 · 139 阅读 · 0 评论 -
Vue学习06_计算属性
计算属性当我们有时候需要对要展示的数据进行处理时,比如输入姓氏与名称,例如:张三丰,接收到的数据有两个,姓氏:张,以及名:三丰,按照之前的mustache语法写也是可以写,但是比较复杂,也可以写一个函数来获取两个数据的组合,但是这里都显得很复杂,因此,Vue引入计算属性这一东西:计算属性的基础用法示例代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">原创 2020-09-26 20:00:38 · 189 阅读 · 0 评论 -
Vue学习05_动态绑定style属性
动态绑定style属性v-bind不仅可以动态绑定class属性,还可以绑定style属性:v-bind动态绑定属性(对象方法) 示例代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2020-09-26 19:15:06 · 473 阅读 · 0 评论 -
Vue学习04_动态绑定class属性
绑定属性v-bind:动态绑定属性原创 2020-09-26 16:20:17 · 649 阅读 · 0 评论 -
Vue学习03_插值操作
插值操作Mustache也叫胡子语法,简单来说就是两个大括号{{}},中间放置我们要显示的变量:示例代码: <div id="app"> <h2>{{message}}</h2> <p>{{'姓名:' + name +',性别:' + sex + ',年龄:' + age}}</p> <p v-once>{{'姓名:' + name +',性别:' + sex + ',年龄原创 2020-09-26 10:01:23 · 194 阅读 · 0 评论 -
Vue学习02_创建第一个Vue项目
创建第一个Vue项目在这里,使用到的编译器软件为Vscode:首先在软件的项目目录(在这里我得目录是VueProject)里面新建两个文件夹:js与demo其中js用于存放vue的js文件夹,demo用于存放所编写的程序代码:下载vuejs文件:进入vue官网:https://vuejs.org/v2/guide/installation.html进行下载,右键开发版,点击链接另存为:将其保存到js文件夹之中:创建网页:在demo文件夹内创建我们的第一个vue网页项目demo01原创 2020-09-25 14:24:51 · 190 阅读 · 0 评论 -
Vue学习01_Vue环境的搭建与第一个项目的创建
Vue环境的搭建首先先检查下自身电脑的node与npm版本,没有就去下载:然后下载vue:通过命令行npm install -g vue-cli进行下载:在这里你可能遇到这样的问题,提示你某文件已经存在,根据提示进入c盘文件夹,然后将vue文件删除即可:继续执行命令行npm install -g vue-cli即可下载成功:创建vue项目:创建vue项目的命令为:vue init webpack myProject,其中myProject是你的项目名称:在这里,我得项目名称取名为myvu原创 2020-09-24 17:45:49 · 138 阅读 · 0 评论