VUE相关
文章平均质量分 84
VUE基础语法详解,以及VUE开发的微商城 从项目搭建,到实现轮播图,商品的一级二级分类等功能实现。步骤详细,适合新手跟着做项目
攻城狮·建哥
全栈开发工程师以及IT教育从业者。
展开
-
【VUE基础】综合练习-实现Tab-Bar
使用新建一个项目工程(使用)。在文件夹assest下新建css/base.css,用于初始化css将tabbar抽离成组件在components下新建tabbar文件夹,新建和,组件是在组件中抽取出来的,可以传入图片和文字(比如首页),所有需要使用插槽代替。TabBar弄一个slot插槽用于插入TabBarItem组件(可能插入多个).TabBarItem组件中插入2个插槽一个用于插入图片一个用于插入文字。在MainTabBar组件中加入另外2个组件。最后在app.vue中导入Main原创 2022-10-20 10:32:46 · 942 阅读 · 0 评论 -
【VUE基础】Axios的封装
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。原创 2022-10-20 10:24:28 · 235 阅读 · 0 评论 -
【VUE基础】Vuex
是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。其实最简单理解为,在我们写Vue组件中,一个页面多个组件之间想要通信数据,那你可以使用路由-》管理的是组件流动Vuex-》管理的是数据流动没有Vuex之前,组件数据来源。原创 2022-10-20 09:35:06 · 842 阅读 · 0 评论 -
【VUE基础】Promise
Promise是ES6中的特性。什么是异步操作?网络请求中,对端服务器处理需要时间,信息传递过程需要时间,不像我们本地调用一个js加法函数一样,直接获得1+1=2的结果。这里网络请求不是同步的有时延,不能立即得到结果。如何处理异步事件?对于网络请求这种,一般会使用回调函数,在服务端传给我数据成功后,调用回调函数。例如ajax调用。如果碰到嵌套网络请求,例如第一次网络请求成功后回调函数再次发送网络请求,这种代码就会让人很难受。原创 2022-10-19 16:14:11 · 1521 阅读 · 0 评论 -
【VUE基础】Vue-Router
路由就是通过互联的网络把信息从源地址传送到目的地的活动路由提供了两种机制:路由和传送。原创 2022-10-18 21:50:23 · 954 阅读 · 0 评论 -
【VUE基础】VueCLI
在项目根目录下新建一个。原创 2022-10-15 22:10:20 · 1260 阅读 · 0 评论 -
【VUE基础】webpack
loader是webpack中一个非常核心的概念。webpack可以将js、图片、css处理打包,但是对于webpack本身是不能处理css、图片、ES6转ES5等。此时就需要webpack的扩展,使用对应的loader就可以。loader使用步骤一:通过npm安装需要使用的loader步骤二:通过webpack.config.js中的modules关键字下进行配置大部分loader可以在webpack的官网找到对应的配置。原创 2022-10-13 22:23:12 · 1925 阅读 · 0 评论 -
【VUE基础】前端模块化
随着前端项目越来越大,团队人数越来越多,多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目,小明定义一个aaa.js,小张定义了一个bbb.js。aaa.js此时小明的sum是没有问题的。bbb.js此时小明和小红各自用各自的flag你变量没问题。但是此时小明又创建了一个mmm.js在index.html页面导入这些js文件此时小明知道自己在aaa.js中定义的flag是true,认为打印没有问题,但是不知道小红的bbb.js中也定义了flag为true。原创 2022-10-12 15:28:04 · 247 阅读 · 0 评论 -
【VUE基础】Vue实例的生命周期
beforecreate : 可以在这加个loading事件created :在这结束loading,还做一些初始数据的获取,实现函数自-执行mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情beforeDestroy: 你确认删除XX吗?destroyed :当前组件已被删除,清空相关内容。原创 2022-10-12 13:59:45 · 287 阅读 · 0 评论 -
【VUE基础】组件化高级
我们在使用组件的时候有时候希望,在组件内部定制化内容,例如京东这样。这两个都是导航栏,组件的思想是可以复用的,把这个导航栏看做一个组件。这个组件都可以分成三个部分,左边中间右边,如果可以分割组件,就可以定制化组件内容了。上述代码结果如图所示 具名插槽,就是可以让插槽按指定的顺序填充,而没有具名的插槽是按照你填充的顺序排列的,而具名插槽可以自定义排列。3. 编译的作用域 前面说过组件都有自己的作用域,自己组件的作用在自己组件内。结果如下 父组件替换插槽的标签,但是内容是由原创 2022-09-28 17:05:26 · 110 阅读 · 0 评论 -
【VUE基础】组件化开发
简单的组件示例 组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 创建的 Vue 根实例中,把这个组件作为自定义元素来使用: 。中是组件的DOM元素内容。 像使用html标签一样使用。 组件的注册方式有两种,一种是全局组件一种是局部组件。2.1 全局组件 全局组件,可以在多个vue实例中使用,类似于全局变量。 使用方式注册,直接使用调用。是全局组件的名字,是定义的组件对象。 局部组件,只能在当前vue实例挂载的对象中使用,类似于局部变量,有块级原创 2022-09-23 10:42:35 · 241 阅读 · 0 评论 -
【VUE基础】v-model
=""原创 2022-09-19 21:54:47 · 122 阅读 · 0 评论 -
【VUE基础】综合练习一——购物车商品数量的增加减少
综合前面的知识,需要通过一个小demo来串联起知识。如图所示:点击“+”按钮,总价增加,点击“-”按钮总价减少,点击移除,移除当列。原创 2022-09-13 19:41:09 · 1335 阅读 · 0 评论 -
【VUE基础】循环遍历
循环遍历原创 2022-09-07 21:38:38 · 3648 阅读 · 0 评论 -
【VUE基础】条件判断
v-if用于条件判断,判断Dom元素是否显示。原创 2022-09-07 21:37:41 · 436 阅读 · 0 评论 -
【VUE基础】事件监听
在前面的计数器案例中使用了v-on:click监听单击事件。 使用v-on:click给button绑定监听事件以及回调函数,@是的语法糖,也就是简写也可以使用@click。方法一般是需要写方法名加上(),在@click中可以省掉,如上述的。原创 2022-09-06 09:54:26 · 217 阅读 · 0 评论 -
【VUE基础】计算属性与侦听器
!计算属性的基本使用原创 2022-09-05 10:01:24 · 59 阅读 · 0 评论 -
【VUE基础】动态绑定属性
某些时候我们并不想将变量放在标签内容中,像这样是将变量h2标签括起来,类似js的innerHTML。但是我们期望将变量写在如下位置,想这样导入图片是希望动态获取图片的链接,此时的imgURL并非变量而是字符串imgURL,如果要将其生效为变量,需要使用到一个标签,像这样,而且这里也不能使用Mustache语法,类似,这也是错误的。 此时vue对象中定义的变量和变量可以动态的绑定到img标签的src属性和a标签的href属性。由于用的很多,vue对他有一个语法糖的优化写法也就是,此时修改imgURL变原创 2022-09-02 16:44:01 · 3118 阅读 · 0 评论 -
【VUE基础】插值操作
mustache是胡须的意思,因为{{}}像胡须,又叫大括号语法。 在vue对象挂载的dom元素中,{{}}不仅可以直接写变量,还可以写简单表达式。原创 2022-09-01 09:32:17 · 403 阅读 · 0 评论 -
【VUE基础】第一个VUE程序-HelloVue
如何开始学习Vue,当然是写一个最简单的demo,直接上代码。此处通过cdn获取vuejs。 vue是声明式编程,区别于jquery的命令式编程。原创 2022-08-31 15:21:08 · 441 阅读 · 0 评论 -
【VUE基础】-ES6补充说明
变量在什么范围内可用,类似Java的全局变量和局部变量的概念,全局变量,全局都可用,局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念,使用var声明的变量就是全局的。{ 上述代码中{}外的可以获取到name值并打印出来,用var声明赋值的变量是全局变量,没有块级作用域。...原创 2022-08-30 13:49:58 · 89 阅读 · 0 评论 -
使用Animate.css时动画不生效的问题
在使用Animate.css的时候发现动画并不生效,原因就在于(可能)操作系统上禁用了动画win10系统按win + q(win10)或win + r,搜索%windir%\system32\SystemPropertiesPerformance.exe,开启这个性能选项窗口后勾选窗口内的动画控件和元素...原创 2022-03-07 22:33:01 · 3467 阅读 · 0 评论 -
解决vscode国内下载速度慢
将官网下载链接中的域名部分替换到国内服务器1、点击下载2、出现以下下载任务后点击右上角三个点3、点击下载内容4、复制链接5、修改链接地址中的域名部分,改成国内镜像域名地址 :vscode.cdn.azure.cn修改之后:然后直接回车下载。...原创 2022-02-20 17:27:32 · 470 阅读 · 0 评论