![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小慈
这个作者很懒,什么都没留下…
展开
-
常用的webstore和vscode插件
Webstore插件Chinese中文语言包One dark theme主题Rainbow brackets彩虹括号Translation翻译WeChat mini program supportVscode插件小程序开发助手Atom one dark themeChineseEasy less:生成.less文件的同时,生成.wxss文件安装easy less插件,设置,搜索框输入settings.json,点击进入settings.json文件:Auto rename t原创 2022-02-06 16:41:55 · 502 阅读 · 0 评论 -
如何使用vue?
第一步:安装node环境(安装node后,自带了npm管理器)从node.js官网下载安装包解压缩安装包配置环境变量:右键我的电脑,属性——高级系统设置——环境变量——系统变量——点击path——新建——复制node所在的路径进去——确定在ndm中查看node和npm的版本号第二步:安装vuenpm install vue -g 全局安装vue第三步:安装vue-clinpm install -g @vue/cli 全局安装脚手架查看脚手架版本号第四步:打开原创 2022-02-06 13:09:18 · 1448 阅读 · 1 评论 -
电商后台管理系统功能分析vue+element ui
一、登录页面① 通过el-form表单绑定data中的数据:LoginFrom:{username:’’, password: ‘’}② 登录按钮功能实现:- 通过this.refs.refname来获取el−form表单对象,再通过表单的validate()方法来对整个表单进行校验−验证不通过,直接return−验证通过,发送请求。−把服务器返回的数据token保存到sessionStorage中,然后通过this.refs.refname来获取el-form表单对象,再通过表单的validate原创 2022-01-05 22:40:20 · 961 阅读 · 0 评论 -
什么是vue.$nextTick()
nextTick(): 数据发生更新,更改的DOM渲染完毕之后,会自动调用nextTick()函数中的回调函数使用场景一:点击+new Tag按钮,按钮变成input,并且使input自动获取焦点① 在el-input标签中绑定了ref② 在el-button按钮的showInput事件中,需要通过this.refs.refname来获取input标签。点击+newTag按钮之后,虽然inputVisible=true,但input元素可能还没有渲染出来,然而ref要在dom渲染完成后才会有,此时调原创 2022-01-01 23:38:43 · 249 阅读 · 0 评论 -
vue的生命周期函数
生命周期函数:在某个时刻会自动执行的函数① beforeCreated():在vue组件(实例)初始化之后,vue实例创建完成之前执行。此时vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。② created():在vue组件(实例)创建完毕后立即调用。此时挂载阶段还没有开始,$el属性目前还不能用。this.data已经可以访问,监听器、事件、方法也配置好了,此时,可以发送网络请求,接收数据赋值到data中了。③ beforeMounted():在挂载开始之前调用。原创 2022-01-01 21:19:09 · 547 阅读 · 0 评论 -
vue中子组件向父组件传递数据
子组件Child向父组件Father传递数据一、子组件中,点击按钮触发btnClick事件时,通过this.$emit传递自定义事件itemClick和item二、在父组件中,通过(@自定义事件名称)来接收子组件传递过来的自定义事件和参数三、页面显示(点击热门推荐按钮,打印出热门推荐。点击电脑办公,打印出电脑办公)...原创 2022-01-01 19:46:17 · 695 阅读 · 0 评论 -
vue中父组件向子组件传递数据
子组件Child要使用父组件Father中的数据:name一、在父组件中,需要在引用子组件时绑定数据二、在子组件中,通过props属性获取父组件中传过来的数据原创 2022-01-01 19:13:37 · 219 阅读 · 0 评论 -
插槽的使用
一、插槽的基本使用① 在子组件Child预留一个插槽slot,插槽中有一个默认的button,当父组件引用子组件时无指定,就会显示默认的button,如果父组件中引用子组件时,有指定内容,指定的内容就会替换掉整个slot标签② 在父组件引用子组件,子组件标签里的内容会替换子组件中的slot标签③ 页面显示:...原创 2021-12-31 13:07:46 · 2826 阅读 · 0 评论 -
什么是前端模块化?
使用原始的JavaScript代码,当多个程序员在不同的js文件中命名了同名的变量或函数,会互相影响。可以使用闭包来解决,但闭包没法实现代码的复用:当你在1.js文件中在闭包里定义了一个函数sum(),2.js文件里无法使用这个函数。这种代码的编写方式对js文件的依赖顺序几乎是强制性的但是当js文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较麻烦的事情。一、自己的模块化方法来解决以上问题:1.js文件中导出要用到的数据2.js文件中导入要用的数据二、常见的模块化规范前端模块化开发原创 2021-11-27 14:44:13 · 461 阅读 · 0 评论 -
什么是Webpack?
webpack是一个静态模块打包工具。我们可以使用一些模块化的方案:AMD、CMD、CommonJS、ES6。但必须有底层代码进行支撑。作用一:webpack里就有底层代码可以支撑我们进行模块化开发,并且会帮助我们处理模块之间的依赖关系。作用二:浏览器不能识别例如less,es6,typescript等等语法,webpack可以在打包的过程中,把这些转换成浏览器可以识别的css,es5,JavaScript等等操作。...原创 2021-11-27 14:53:37 · 816 阅读 · 0 评论 -
webpack和node和npm的关系
1. webpack为了正常的运行,必须依赖node环境。所以安装webpack首先要安装node,node自带了软件包管理工具npm2.node为了正常执行很多代码,必须包含很多依赖的包,而npm就是用来管理这些依赖的包的工具。...原创 2021-11-27 22:54:04 · 290 阅读 · 0 评论 -
什么是loader和plugin?
1.loader是webpack中一个非常核心的概念。2. webpack用来做什么呢? 1. 在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。 2.但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成 ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。 **对于原创 2021-11-29 10:22:35 · 928 阅读 · 0 评论 -
vue项目上线的步骤
一、通过node创建web服务器① 创建一个文件夹vue_shop_server,通过webstore打开② 在webstore的终端运行 npm init 来初始化一个包管理工具,生成package.json文件③ 运行 npm i express -s 安装express包④ 把vue-shop项目中打包好的dist文件夹复制一份到vue_shop_server文件夹中⑤ 在vue_shop_server中创建一个app.js文件⑥ 导入express,通过 express 快速创建 w原创 2021-12-28 14:02:04 · 3105 阅读 · 0 评论 -
vue项目完成后如何实现项目优化?
一、为开发模式与发布模式指定不同的打包入口vue ui创建的项目,隐藏了webpack配置,可以在src根目录新建一个vue.config.js配置文件。在配置文件中向外导出配置对象。2.默认情况下,vue项目的开发模式和发布模式,共用一个打包的入口文件即(src/main.js)。可以使用configureWebpack或chainWebpack来定义webpack的打包配置把main.js文件改为main-dev.js。 复制一份main.js改为main-prod.js二、通过ext原创 2021-12-27 22:33:12 · 983 阅读 · 0 评论 -
vue中的ref
一、vue中可以通过ref来获取标签1. 在要获取的标签中绑定ref2. 通过this.$refs.refname来获取标签结果如下:原创 2021-12-14 23:16:09 · 834 阅读 · 0 评论 -
localStorage和sessionStorage的区别
定义localStorage:本地储存,它的生命周期是永久的,除非客户自己清除掉sessionStorage:会话储存,生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那通过它储存的数据也会被清空localStorage和sessionStorage都保存在客户端,只能储存字符串类型使用setItem(key, value) —— 保存数据,以键值对的方式存储信息getItem(key) ——获取数据,将键值传入,即可获取到对应的value值removeItem(key) ——原创 2021-12-10 11:13:02 · 180 阅读 · 0 评论 -
如何在vue中使用axios?
一、在ui中新增axios依赖二、在入口文件main.js中导入三、在vue组件中发送数据请求原创 2021-12-10 10:11:35 · 2825 阅读 · 0 评论 -
什么是Vue CLI(脚手架)?
1.如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。2.CLI是什么意思?1.CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.2.Vue CLI是一个官方发布 vue.js 项目脚手架3.使用 vue-cli 可以快速搭建Vue原创 2021-11-29 19:27:20 · 629 阅读 · 0 评论