
vue系列
vue学习(一)ES6常用语法vue学习(二)Vue常用指令vue小练习--音乐播放器vue学习(三)组件传值vue学习(四)插槽vue学习(五)生命周期 的钩子函数vue学习(六)异步组件加载vue学习(七)refs的使用vue学习(八)nextTick[异步更新队列]的使用和应用vue学习(九)对象变更检测注意事项vue学习(十...
2024-01-10
vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值unshift() 往数组最前面添加一个元素,成功返回当前数组的长度 splice() 有三个参数,第一个是想要删除的元素的下...
2024-01-10
vue(七)
给文件夹取别名通过import导入的时候可以直接应用别名而通过非import的方式引入的时候,要在别名前面加一个"~"PromisePromise是ES6的新增内容通过setTimeout模拟异步请求一秒钟后打印Hello WorldPromise的简单体会通过promise可以将回调地狱转化为链式编程,结构更清晰,代码更优雅Promise讲解Promise的三...
2024-01-10
vue入门一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> .box{ ...
2024-01-10
vue简易记事本开发详解
本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下css代码#todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center;}.content { margin:0px 100px;}.todo { margin: 10px; text-align: left; background-color:green;}.btn { float: right;...
2024-01-10
vue的工作机制
Vue工作机制:1、 new Vue()的时候执行了一个init函数2、 $mount,在main.js中3、 Compile含有编译器的话就执行,没有的话就不执行,字符串写的模板需要编译,直接用template标签写的就不用编译器,平时使用的没有编译器,vue.js里边有编译器4、 Render函数,渲染函数,上边的template转换成了render函数,所以...
2024-01-10
vue体验
#################################安装:1,安装node.js :Javascript运行环境,其中的npm就是Node.js下的包管理器。2,命令行安装cnpm :npm install -g cnpm --registry=https://registry.npm.taobao.org3,命令行vue的脚手架vue-cli:npm install -g vue-cli4,vscode软件安装:5,vscode中安装插件:Vetur插件脚手架使用:1,创建vue项...
2024-01-10
vue备用
handleCheck (item) { if (item.isChecked) { this.checkData.push(item.id) this.checkData = _.uniqWith(this.checkData, _.isEqual) } else { this.checkData = _.remove(this.checkData, i => i !== item.id) } },<template slot=...
2024-01-10
vue实现手风琴效果
本文实例为大家分享了vue实现手风琴效果的具体代码,供大家参考,具体内容如下利用鼠标移入移出事件实现内容出现隐藏用到的知识点:1.@mouseover 鼠标移入事件2.@mouseout 鼠标移出事件3.v-if 条件渲染<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"...
2024-01-10
vue开发规范
https://juejin.im/post/5ada9b586fb9a07aaf34c746https://juejin.im/post/5b67e49551882508603d1431#heading-29...
2024-01-10
Vuex实现简单购物车
本文实例为大家分享了Vuex实现简单购物车的具体代码,供大家参考,具体内容如下文件结构App.vue<template> <div id="app"> <h3>Shopping Cart Demo</h3> <hr> <h4>Products:</h4> <ProductList /> <hr> <h4>My Cart</h4> <ShoppingCart /> </div></template><script>import ProductList from '@/components/ProductLis...
2024-01-10
vuex购物车收藏实现
原文链接: vuex 购物车 收藏实现使用vuex 存放收藏的商品实现在列表页可以收藏,在收藏也可以查看图标下载,可以选择颜色,大小和格式http://www.iconfont.cn/vuex 管理状态,提供添加和删除操作,以及判断某一商品是否已经被收藏import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { list: []}...
2024-01-10
Vuex实现简单购物车
本文实例为大家分享了Vuex实现简单购物车的具体代码,供大家参考,具体内容如下文件结构App.vue<template> <div id="app"> <h3>Shopping Cart Demo</h3> <hr> <h4>Products:</h4> <ProductList /> <hr> <h4>My Cart</h4> <ShoppingCart /> </div></template><script>import ProductList from '@/components/ProductLis...
2024-01-10
未定义vuex 3状态变量
我试图设置使用Vue的2.5.2和3.0.1 Vuex,我无法摆脱的唯一的应用程序是这样的警告:未定义vuex 3状态变量[Vue warn]: Error in render: "TypeError: _vm.product is undefined"产品只是和产品,储存在刚刚创建的Vue实例后执行的下一行之后被填满Vuex状态的数组元素:vm.$store.dispatch('getProducts') 在我的部分,我得到的产物...
2024-01-10
vue装载了vuex,没有反应
vue 安装了vuex,设置好了。使用的时候报错。有没有知道如何解决的?望指教一下,谢谢回答不要使用this.$store了。import store from "./store"store.commit("xxx",{...})看代码看到的问题是setTimeout里的this指向不对。...
2024-01-10
vuex { }能执行吗
在函数内,突然出现一个大括号,这是种什么写法,为什么要用大括号刚才看了,所有的assert都加了大括号,这是为啥,有什么作用----------------------------找到答案了回答:我的猜测,不对勿喷。这里有没有{}没有是一样的(如果你不纠结let, const这样的块作用域变量的问题的话)。一般这种情况的出现,可能是使用了一些面向多场景的构建方式,比如上述代码的源码可能是这样的:...
2024-03-08
Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue提供了vuex。本文将详细介绍Vue状态管理vuex引入 当访问数据对象时,一个 Vue 实例只是简单的代理访问。所以,如果有一处需要被多个实例间共享的状态,可以简单地通...
2024-01-10

Vue状态管理:vuex基础
还是像以前一样用一个简单的案例来解释vuex首先,新建一个模板demo1 vue init webpack-simple demo我们需要两个组件:一个输入组件和一个显示组件在src文件夹中新建一个components文件夹,添加一个showInfo.vue1 <template>2 <h1>{{ msg }}</h1>3 </template>4 5 <script>6 export default {7 props: ['msg']8 }9 </script>然后,...
2024-01-10
vuex实现简单的购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下文件目录如下:购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox"> <shop-cart /> ...
2024-01-10
vue2版本代码在vue3中应该是怎样写呢?
<span slot="footer" class="dialog- footer"> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span>这段代码在vue2下不会报错,但是在vue3中 slot的写法变成了v-slot,由于我刚学不久还不会改写求帮忙改写一下。整体...
2024-02-07
Vue2 第三天学习
个人小总结:1年多没有写博客,感觉很多知识点生疏了,虽然工作上能解决问题,但是当别人问到某个知识点的时候,还是迷迷糊糊的,所以坚持写博客是硬道理的,因为大脑不可能把所有的知识点记住,有可能某一天忘了,但是我们工作上还是会使用,只是理论忘了,所以写博客的好处是可以把之...
2024-01-10
vue2 全局变量的设置方法
最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量。1、全局变量专用模块就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。全局变量专用模块 Global.vue<script type="text/javascript">const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B...
2024-01-10
vue2 开发总结
vue-cli学习资料:http://m.php.cn/article/394750.html 或https://www.cnblogs.com/zhanglin123/p/9270051.htmlvue-cli 实践案例 : https://blog.csdn.net/yuanyuanispeak/article/details/735305231、vue插件全局都用(toast 插件 示例):https://www.jb51.net/article/121120.htm 或 https://bl...
2024-01-10
vue2弹窗打开没有加载状态?
<template> <div id="app"> <el-dialog :visible.sync="isVisible"> <template slot="title"> <div> <span>图片查看</span> </div> </template> <div v-loading="img...
2024-02-06
vue2 核心概念
一、vue变量所有的 vue变量 ,必须在data:中有注册(哪怕内容是空,相当于声明这个是变量,是vue变量而不是js变量)。这里的变量也可以运算。(注意:所有的框架一定要注意js变量和框架的变量,js变量和框架的变量是可以相互转换,获取的。框架的变量有这个框架变量的定义方法,如东信公司...
2024-01-10
vue总结2
一.过滤器content | 过滤器 ,vue没提供过滤器 ,可自己定义;组件内过滤器就是options中的一个filters属性(一个对象),多个key就是多个过滤器名,多个value就是过滤器方法体;全局:范围大,权利小; 组件内:当过滤器名相同时权力大,范围小; 如图 :二.获取DOM元素created(){} :组件创建后,数据已...
2024-01-10
vue2上传多个文件?
<template> <el-upload actions="#" :http-request="uploadFile" :mulitiple="true" :auto-upload="true" :file-list="fileList" :on-change="handleChange" :show-file-list="false"...
2024-03-10
Vue2 第一天学习
个人小总结:1年多没有写博客,感觉很多知识点生疏了,虽然工作上能解决问题,但是当别人问到某个知识点的时候,还是迷迷糊糊的,所以坚持写博客是硬道理的,因为大脑不可能把所有的知识点记住,有可能某一天忘了,但是我们工作上还是会使用,只是理论忘了,所以写博客的好处是可以把之...
2024-01-10
vue2.x的初始化
其实,vue2.x的模板安装完之后就初始化了,故本文将围绕着模板剖析下初始化的主要流程。首先,打开项目的主目录下的index.html文件,顺藤摸瓜,就会找到该项目的入口js主文件(/src/main.js)。然后,进入 /src/main.js 文件,如下图所示:故,从上图可知main.js的主要结构,还可以找到项目的 主组件...
2024-01-10
