Vue2.0基础
文章平均质量分 81
前端框架Vue,本文章是自己学习B站博主技术胖的视频及视频播客写的笔记
偶尔躲躲乌云_0
精通电脑开关机和刷新,文件的复制删除重命名和新建,对于网上冲浪有着10多年的经验。
展开
-
Vue template模板中无法获取到变量属性值
Vue template模板中无法获取到变量属性值原创 2022-08-09 17:45:42 · 1695 阅读 · 0 评论 -
Vue实战电商系统-七.数据统计
Vue实战电商系统-七.数据统计数据统计1.基本页面布局和路由配置2.安装Echarts并渲染图表3.数据统计1.基本页面布局和路由配置同之前的一样就不说了。2.安装Echarts并渲染图表1.首先在可视化面板中安装运行依赖Echarts。2.接着按照Echarts教程进行布局使用。导入Echarts:import echarts from 'echarts'布局Echarts容器:<template> <div> <!-- 面包屑导航区域 -原创 2021-05-19 10:03:47 · 578 阅读 · 0 评论 -
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理五.分类管理1.新建goods_cate子分支并上传码云2.商品管理-商品分类1.新建文件并配置路由2.页面布局3.获取分类列表数据4.将数据渲染在树形表格控件中3.商品管理-商品列表4.商品管理-分类参数五.分类管理1.新建goods_cate子分支并上传码云git branchgit checkout -b goods_categit push -u origin goods_cate2.商品管理-商品分类1.新建文件并配置路由components/g原创 2021-05-19 10:03:17 · 531 阅读 · 0 评论 -
Vue实战电商系统-四权限管理
Vue实战电商系统-四权限管理四.权限管理1.权限管理-用户列表1.新建分支并推送2.新建rights.vue并配置路由3.权限管理-权限列表的页面布局4.数据获取并渲染5.权限管理业务逻辑分析2.权限管理-角色管理四.权限管理1.权限管理-用户列表1.新建分支并推送在开发一个新功能模块之前,首先要创建一个新分支rights并把它推送到码云上的云端仓库中。首先检查一下当前是否处于主分支master:git branch接着创建一个新分支rights(权限管理)并切换到新分支:git che原创 2021-05-19 10:03:02 · 398 阅读 · 1 评论 -
vue实战
vue实战1.项目概述1.功能模块电商后台管理系统大致可以分为以下几个功能模块:用户登录,退出登录用户管理权限管理角色列表权限列表商品管理商品列表分类列表参数管理订单管理数据管理2.开发模式采用的开发模式是前后端分离的开发模式。其中前端项目是基于Vue技术栈的SPA(单页面应用)项目。前端技术栈主要有:vuevue-routerElement-UIAxiosEcharts后端技术栈主要有:Node.jsExpressJwt(状态保持的原创 2021-05-19 10:02:23 · 1146 阅读 · 0 评论 -
vue+Element-ui快餐店pos系统
vue 2.0项目-快餐店pos系统视频地址:vue 2.0项目-快餐店pos系统1.项目搭建1.新建项目新建一个空文件夹AwesomePos并在VScode中打开。首先安装一下vue-cli:npm install vue-cli -g要验证是否安装成功的话输入:vue -V,如果出现版本号说明安装成功。然后是用脚手架初始化项目(因为项目文件夹已经建好了所以webpack后面不用再跟参数了):vue init webpack然后是进行一些初始化的项目配置:项目名(要小写),项目作者原创 2021-01-29 14:43:14 · 901 阅读 · 0 评论 -
vue-router
学习视频地址:技术胖vue-router视频博客参考:技术胖vue-router视频博客1.Vue-router入门1.安装Vue-routervue-router是一个插件包,所以我们还是需要用npm来进行安装的。npm install vue-router --save-dev如果使用vue-cli新建项目中已经选择安装了vue-router,那这里不需要重复安装了。2.分析router/index.js文件在src/router/index.js文件,这个文件就是路由的核心文件。i原创 2021-01-26 15:57:12 · 147 阅读 · 0 评论 -
Vue-cli
Vue-cli1.准备工作1.概述2.安装3.新建项目2.项目目录结构分析1.准备工作1.概述Vue-cli是vue官方出品的快速构建单页应用的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。2.安装在终端中输入:npm install vue-cli -g即可全局安装vue-cli,安装完了之后可以在终端输入vue -V来检查是否安装成功(注意-V的V是大写的V),如果出现版本号那么久完成了。3.新建项目在终端输入:vue init <templ原创 2020-05-13 23:02:23 · 231 阅读 · 0 评论 -
Vue实例和内置组件
1.实例属性1.Vue.js和JQuery.js一起使用首先去官网下载JQuery.js,然后和引入Vue.js的步骤一样引入JQuery.js。然后输入以下代码验证JQuery.js是否成功引入:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...原创 2020-04-30 13:06:00 · 249 阅读 · 0 评论 -
Vue选项
1.propsData选项 全局扩展的数据传递propsData Option是用在全局扩展的时候传递参数,首先新建一个扩展,然后再扩展的模板中绑定一些属性值:<header></header><script type="text/javascript">var header_a = Vue.extend({ //绑定message和a的值 ...原创 2020-04-26 14:22:42 · 334 阅读 · 0 评论 -
Vue全局API
全局API全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如自定义指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。1.Vue.directive自定义指令关于Vue内部指令的文章可以戳这里????Vue内部指令,当然我们也可以自定义一些指令,自定义它的功能。比如我要自定义一个v-y...原创 2020-04-25 20:45:40 · 497 阅读 · 0 评论 -
Vue内部指令的使用
Vue内部指令1.v-if,v-else2.v-show3.v-for4.v-text,v-html5.v-on6.v-model7.v-bind8.v-pre,v-cloak,v-once1.v-pre2.v-cloak3.v-once1.v-if,v-elsev-if:是vue 的一个内部指令,指令用在我们的html中。v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态...原创 2020-04-25 09:53:12 · 363 阅读 · 0 评论 -
如何让新建一个Vue项目
1.Vue前端框架概述Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整...原创 2020-04-25 09:51:27 · 254 阅读 · 0 评论 -
npm无法识别为命令,live-server启动失败
1.npm无法识别为命令右键VScode以管理员身份运行。2.在终端输入live-server时提示:是因为系统禁止执行脚本,解决方法:以管理员身份运行PowerShell输入set-ExecutionPolicy RemoteSigned,选择系统执行脚本,选择Y或A...原创 2020-04-25 09:37:51 · 1363 阅读 · 4 评论