- 博客(13)
- 收藏
- 关注
RSS订阅原创 vue-day13
vue-day131-stylus动态样式语言stylus是一个动态的css样式语言1.1-安装编译环境stylus-loader最新版本和目前vue-cli-2.x不兼容, 所以需要降低stylus-loader的版本npm i stylus stylus-loader@2.0.0 -D1.2-语法特点stylus中摒弃了{} : ;通过缩进来表示包含关系后缀名为.styl1.3-vue项目中启用stylus在组件中的style标签上添加lang="stylus
2021-01-21 10:29:24
123
原创 vue-day12
vue-day121-数据可视化1.1-echarts数据报表一个基于HTML5中canvas的图表库1.1.1-安装npm i echarts -S1.1.2-使用<template> <!--图表渲染的容器: 一定要指定高度--> <div id="container"></div></template><script>// 1-导入echartsimport * as echarts fr
2021-01-19 12:15:54
121
原创 vue-day11
vue-day111-管理员管理1.1-管理员编辑&删除pages/admin/List.vue<template> <div> <el-table :data="adminList" style="width: 100%"> <el-table-column prop="id" label="id" min-width="80"></el-table-column> <el-table
2021-01-14 08:59:15
118
原创 vue-day10
vue项目-day021-项目基础文件1.1-element封装/utils/element.js// 全部导入import Vue from 'vue';import element from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';// 注册Vue.use(element);// 封装一个成功提示Vue.prototype.$success=function(message){ this.$
2021-01-13 15:49:24
116
原创 vue-day09
vue-day091-UI组件库element-ui1.1-安装npm i element-ui -S1.2-使用1.2.1-完整引入main.jsimport Vue from 'vue';// 1.导入核心包import ElementUI from 'element-ui';// 2-导入样式表import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';// 3-注册插件Vue.u
2021-01-12 11:27:54
117
原创 vue-day08
vue-day081-vue-cli脚手架项目中实现跨域请求1.1-跨域请求数据解决方案jsonp在服务端设置特定的响应头服务器代理1.2-配置代理服务器[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmRYF5x3-1610335442579)(media\代理跨域原理.png)]打开/config/index.js配置文件, 做如下修改(13行左右)proxyTable: { // /api/brandList =>
2021-01-11 11:24:05
121
原创 vue-day07
vue-day071-路由1.1-嵌套路由定义路由规则router/index.js// 3-定义路由规则const routes=[ // 嵌套路由 { path:'/login', component:Login, children:[ { path:'/login/enterprise', component: Enterpris
2021-01-09 14:16:45
74
原创 vue-day06
vue-day061-路由1.1-路由的概念作用: 维护页面访问路径和对应页面组件之间的关系1.2-路由的安装npm i vue-router -S1.3-路由的基本使用流程导入// 1-导入路由模块import Vue from 'vue';import Router from 'vue-router';注册插件// 2-注册插件Vue.use(Router);定义路由规则数组// 导入页面组件import Home from '../pages/Ho
2021-01-08 09:08:45
115
原创 vue-day05
vue-day051-父组件向子组件通信通过子自定义属性的方式实现父组件向子组件传递数据1.1-步骤在父组件中, 找到子组件的调用标签, 通过自定义属性的方式将父组件中的数据传递给子组件<List v-bind:dataList="list"/>export default { data() { return { list:[ { id:2, title:'军事新闻', co
2021-01-07 09:43:37
74
原创 vue-day04
vue-day041-组件组件就是页面中的一些功能模块的封装1.1-组成部分结构样式行为1.2-分类1.2.1-全局组件在任何地方都可以使用注册Vue.component('组件名称',{ // 组件的模板: 必须有一个唯一的根标签 template:` <div> <h1>{{msg}}</h1> </div> `, // 组件的数据 data:function(){
2021-01-06 09:50:27
70
原创 vue-day03
vue-day031-MVVM设计模式M(Model): 数据层, 处理数据V(View): 视图层, 展示操作界面VM(View Model): 视图模型层, 链接视图层和数据层中间纽带, 将数据层的数据交给视图层渲染, 将视图层的操作同步到数据层[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hI62SKdv-1609757116959)(media\mvvm.jpg)]2-watch侦听器本质: 特殊的函数作用: 监视data中的某个数据的改变, 从
2021-01-04 18:45:15
74
原创 vue-day02
vue-day021-事件处理1.1-事件对象无需给事件处理函数传递参数在事件处理函数定义的位置, 直接通过形参接收事件对象即可<input type="text" @keyup="change" />new Vue({ el: '#app', methods:{ change(e) { console.log(e.target.value); } }})需要给事件处理函数传递参数
2020-12-22 22:55:18
74
原创 vue-day01
vue-day011-阶段学习目标vue框架react框架2-vue框架介绍2.0-框架和库的区别js库: js库就是对某个功能的封装, 小而巧, 对项目的侵入性不是特别大, 我们需要主动调用库文件所提供的功能代码实现特定业务功能框架: 大而全, 对整个项目的侵入性比较大, 框架的功能更完善, 会提供项目最基本的目录结构, 我们只需要将对应的代码放在框架约定的文件或者目录中, 框架在特定的时间会调用我们的代码2.1-特点入门门槛比较低数据驱动视图更新vue中不建议操作dom
2020-12-21 23:15:06
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人