Vue
文章平均质量分 65
大数据时代
数据是组成色彩斑斓的生活元素!
展开
-
Vue学习笔记之认识vue-router、安装路由和它的应用及技巧
认识vue-router1、概念:vue-router是vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。在使用 vue-router 时,我们需要做的就是把路由映射到各个组件,vue-router 会把各个组件渲染到正确的地方。在vue-router的单页面应用中,页面的路径的改变就是组件的切换。2、安装环境:cnpm install vue-router --save3、环境配置:第一步:导入路由对象,并且调用Vue.use(VueRouter)第二步原创 2020-12-13 14:03:33 · 223 阅读 · 0 评论 -
Vue学习笔记之了解SPA及URL的hash、HTML5的history知识
了解SPA:单页富应用程序概念:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成。速度:更好的用户体验,让用户在web app感受native app的速度和流畅。路由:通过前端路由进行地址映射,在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会原创 2020-12-06 22:16:01 · 261 阅读 · 0 评论 -
Vue学习笔记之Vue CLI脚手架的介绍和安装-CLI3的介绍
Vue CLI3以上版本的:vue create my-project1、安装选项(初始选项可以配置个人的选项):2、选择所需配置:选择好后,回车确认选项3、选择对应的配置单独生成文件还是直接放在package.json里面4、是否把上面手动选择的项目保存为一个第一步中的安装选项?并选择用什么命令来管理项目所需的环境(提示hao的配置保存在什么地方:Preset hao saved in C:\Users\Administrator\.vuerc):下次安装时,则多出一个原创 2020-12-03 21:23:44 · 205 阅读 · 0 评论 -
Vue学习笔记之Vue CLI脚手架的介绍和安装-CLI2的介绍
1、概念:CLI(Command-Line Interface),命令行界面,俗称脚手架。通过配套的图形化界面创建、开发和管理你的项目。Vue CLI 完全是可配置的,无需 eject。这样你的项目就可以长期保持更新了。使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。2、环境安装(需要node、webpack的环境支撑):cnpm install -g @vue/cli 进行全局安装即可官网介绍:通过cnpm install -g @vue/cli 命令安装完后,用原创 2020-11-30 23:09:29 · 226 阅读 · 0 评论 -
Vue学习笔记之Webpack搭建本地服务器及配置文件的分离
1、webpack提供了一个可选的本地开发服务器(修改的文件先存储在内存中),这个本地开发服务器基于node.js搭建的,内部使用express框架,可以实现我们想要的浏览器自动刷新显示我们修改后的结果,就避免了我们每次修改了代码都要执行npm run build进行打包动作,界面上才会更新我们修改的东西。2、环境安装:cnpm install webpack-dev-server@2.9.1 --save-dev3、配置环境属性:contentBase:为哪一个文件夹提供本地服务器,默认是原创 2020-11-07 22:01:36 · 966 阅读 · 1 评论 -
Vue学习笔记之Webpack的plugin的应用
1、概念:插件,它是对webpack本身的扩展,是一个扩展器,让webpack变得更加好用。2、版权声明插件:BannerPlugin,但这个是webpack是自带的,所以可以不需要进行安装,在项目配置文件直接引用一下即可:const webpack = require(‘webpack’)然后重新打包项目,在生成的js文件中增加一行版权申明:3、打包HTML的插件:我们的目录结构中,index.html文件是在项目的根目录下的,在打包文件dist中是没有这个文件的,所以我们需要将ind原创 2020-09-06 22:19:07 · 381 阅读 · 0 评论 -
Vue学习笔记之Webpack环境中集成Vuejs的配置过程与使用
1、安装依赖Vue包:cnpm install vue --savePS:不是安装开发时依赖,所以不需要加上-dev默认会安装最新版本的vue包。2、使用vue进行开发:在main.js应用vue语言进行开发// 引用vueimport Vue from 'vue'// 使用vueconst app = new Vue({el: '#app',data: {message: 'Hello Webpack'}})然后在index.HTML..原创 2020-08-23 19:12:15 · 193 阅读 · 0 评论 -
Vue学习笔记之Es6转ES5的babel应用
1、由于目前ES6还不能很好的支持目前常见的浏览器,所以在打包的时候将ES6的代码转换为ES5,转换时可以通过babel进行转换;2、官网说明:3、环境配置,为了更好地匹配项目环境,我这边安装的是7的版本:cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015可以使用 options 属性 来给 loader 传递选项:4、重新编译后,发现编译后的js文件中,没有了ES6中的const,全部通过E原创 2020-08-12 22:36:02 · 3838 阅读 · 0 评论 -
Vue学习笔记之Webpack中css、less、图片等文件处理
一、webpack中使用css文件:loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件。安装loader:官网介绍:安装: cnpm install --save-dev css-loaderloader配置:然后再进行打包动作:npm run buildPS:css-loader只负责将css文件进行加载,所以还需要style-loader负责将样式添加到DOM中,让css文件起作用,通过cnpm install styl原创 2020-08-09 18:54:15 · 11970 阅读 · 77 评论 -
Vue学习笔记之Webpack的使用
一、webpack的使用:项目结构:src:源码dist:打包后的文件,用于发布的文件(bundle.js就是打包后的文件,然后在index.html引用即可)同cmd进行项目打包:打包完,在项目dist目录下就会生成一个打包文件bundle.js文件,在运行页调用此js文件,运行结果:PS:只需打包入口函数(只打包main.js),其他依赖类会自动打包有两种开发模式CommonJS、ES6两种模块化开发:ES6:引用:重新打包后运行情况:原创 2020-08-02 19:51:40 · 7313 阅读 · 39 评论 -
Vue学习笔记之Webpack简介及安装
1、概念:webpack是一个现代的JavaScript应用的静态模块打包工具(前端模块化打包工具)。让我们可以进行模块化开发,并且会帮助我们处理模块之间的依赖关系。2、webpack的安装:-g是全局安装(还有局部安装),@3.6.0 指定版本PS:必须依赖Node.js环境,npm命令管理各种依赖包。npm install -g cnpm --registry=http://registry.npm.taobao.org 安装淘宝镜像,再通过cnpm来安装。然后通过 cn原创 2020-07-26 13:53:49 · 4513 阅读 · 61 评论 -
Vue学习笔记之初识模块化开发
1、ES6模块化的实现<script src="aaa.js" type="module"></script>模块化开发声明:type="module" 是为了防止各模块直接变量或方法的冲突,每一个模块都有自己的空间导出:export对象导出方式及内容有:导入:import对应的导入方式:export default:在应用的时候,可以修改对应的名称,即是在导入的时候自己进行命名,这时在导出的时候需要用default的属性:引用原创 2020-07-25 17:18:56 · 4007 阅读 · 73 评论 -
Vue学习笔记之组件化的高级应用:插槽slot的使用
1、插槽slot的使用:slot,插槽,可以理解为我们现实生活中类似电脑USB的插槽,插入的东西不用,则功能就不一样。所以组件用插槽是为了封装的组件更加具有扩展性,让使用者来决定组件内部使用什么功能。插槽的使用规则:抽取共性,保留不同,即为将共性抽取到组件中,将不同暴露为插槽。同时插槽里面可以个默认值:在引用组件的时候,没有说明使用什么的时候,就会显示此默认值:2、具名插槽的使用:具名,其实就可以理解为给插槽起一个唯一的标识名称,类似key的属性,在使用的时候通过name来指定替换哪原创 2020-07-12 22:45:54 · 2976 阅读 · 52 评论 -
Vue学习笔记之父子组件通信以及经典案例
父组件、子组件直接的访问方式:1、父组件访问子组件可以用$childern 或者$refs$childern 的用法:当父组件引用多个子组件的时候,就会生成多个对应的对象:$childern可以访问子组件中的方法、data等数据但$childern一般在开发中比较少用,用$refs比较常用,因为$refs是可以通过key来绝对定位到对应的子组件,这种方法在实际开发中比较常用。$refs是一个对象类型,默认是一个空对象,在引用的时候通过ref = key 值来生成一个实例对象:原创 2020-05-31 21:48:10 · 3042 阅读 · 44 评论 -
Vue学习笔记之组件的应用
Vue组件的应用:1、基础使用:第一步创建组件,第二步注册组件,第三步使用组件。在注册组件是需要用到template的属性。全局组件和局部组件组件的嵌套(父子组件):注意先后顺序,先声明,后面才能用2、组件的语法糖:直接在声明的时候直接进行组件的构造,省去了extend()的步骤// 2、注册组件Vue.component('cpn1', {template: `<div></div>`})组件分离写法:通过id来定位使用哪原创 2020-05-28 19:30:42 · 3554 阅读 · 41 评论 -
Vue学习笔记之图书采购界面小案例
一、案例要求:功能:点击购买数量的加号、减号进行数量的增减;移除数据;合计总价格等,具体功能界面如下:二、案例结构:Index.html 界面main.js 功能处理代码style.css 样式三、代码实现(功能比较简单,就直接上代码了)Index.html 界面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2020-05-25 20:35:19 · 2991 阅读 · 16 评论 -
Vue学习笔记之函数、高阶函数、v-model的应用
一、哪些函数是响应式的:1.push 在后面追加数据5.sort() 排序6.reverse() 顺序翻转 abcd ----> dcba红框中的方式修改数组中的数据时,界面没有响应式的效果二、高阶函数:对数组的操作1、filter函数,返回布尔值返回值是true,则返回当前的值;如果返回值是false,则不返回当前值。循环判断数据里面的数据,直到完成;2、map函数,对数组里面的值进行处理后,返回相应的值。循环判断数据里面的数据,直到完成。3、r.原创 2020-05-24 10:41:05 · 4926 阅读 · 35 评论 -
Vue学习笔记之v-for、v-bind、v-on、v-if的语法
定义变量:let—>定义变量 而 const—>定义常理vue.js 编程范式:声明式编程语法:v-for = "item in moves" 循环“moves”数组里面的值,然后赋值给itemv-bind :动态绑定计算函数中 for 的三种写法计算与函数的区分:for循环的时候,性能就区分开来了v-on :如果该方法不需要额外的参数,那么该方法的()可以不添加此括号。但是注意,如果该方法本身只有一个参数,那么会默认将...原创 2020-05-17 11:40:44 · 1806 阅读 · 30 评论 -
Vue学习笔记之开篇
背景:由于决策支持系统的高级客户对界面的要求越来越高,普通的数据可视化开发软件不能很好的满足客户对UI的要求,为了能更好的展示数据的魅力,今天开始学习Vue.js的开发,以下是我在学习Vue过程中的学习笔记,只为记录,方便自己重复复习。我是从最基础的知识点学起,学习的资料是某视频网站在2019年12月份发布一套学习视频,个人感觉老师讲解非常不错。开发工具选用IDEA。今天主要是学...原创 2020-05-03 18:49:45 · 892 阅读 · 0 评论