- 博客(27)
- 收藏
- 关注
RSS订阅原创 VUE使用echast.js
<template><div><div id="main" style="width: 600px;height:400px;"></div></div></template><script>import * as echarts from 'echarts' //引入echarts，否则会出现找不到echartsexport default { data(){ return{
2020-12-23 16:40:36
209
原创 2020/12/10自学项目问题总结
2020/12/10自学项目问题总结axios的实例化，post后台传参的问题解决代码：1.配置axios实例化import axios from 'axios'export function request(config){ const instance = axios.create({ baseURL:'http://localhost:8080', timeout:5000 }) return instance(config)}get实例方法，以及拿到数据后执
2020-12-10 15:42:00
89
转载 flex弹性布局
flex弹性布局书写格式容器属性1.flex-direction2.flex-wrap3.flex-flow4.justify-content5.align-items6.align-contentflex-direction.box { flex-direction: row | row-reverse | column | column-reverse;}row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主
2020-12-09 10:38:48
64
原创 只在关闭浏览器时清除localStorage的方法
只在关闭浏览器时清除localStorage的方法 window.onbeforeunload = function () { if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) { var storage = window.localStorage; //方法
2020-12-07 16:34:36
3102
原创 axios VUE跨域问题
1.创建vue.config.js文件2.写入代码module.exports = { devServer: { open: true, proxy: { '/index.php': { target: 'http://www.userup.com',//要代理的本地api地址，也可以换成线上测试地址 changeOrigin: true//允许跨域
2020-12-02 20:56:07
99
原创 22-动态路由
22-动态路由动态路由和静态路由的区别其实差不多，首先创建user.vue 然后用export default 导出。在计算函数那里的是获取当前活跃的路由状态<template> <div> <h2>用户界面</h2> <p>用户相关信息</p> <h2>{{userid}}</h2> </div></template><script> ex
2020-11-24 11:56:13
95
1
原创 21-router-link的补充（转换成其他，如按钮）
21-router-link的补充（转换成其他，如按钮）<template> <div id="app"> <router-link to="/home" tag="button">首页</router-link><br /> <router-link to="/about" tag="div">关于</router-link> <router-view></router-view&
2020-11-23 17:04:27
630
原创 20-前端路由相关配置
20-前端路由相关配置第一步在router创建路由index.js文件,并且进行路由的配置//配置相关路由的信息import VueRouter from 'vue-router'import Vue from 'vue'import Home from '../components/Home.vue'import About from '../components/About.vue'//1.通过vue.use(插件),安装插件Vue.use(VueRouter)//2.创建路由对象
2020-11-23 15:34:26
290
原创 19-作用域插槽的使用
19-作用域插槽的使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn></cpn> &
2020-11-19 16:54:17
55
原创 18-具名插槽
18-具名插槽<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn> <span slot='l
2020-11-19 16:32:49
96
原创 17-插槽的基本使用 slot
17-插槽的基本使用 slot<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app"> <cpn> <s
2020-11-19 16:16:00
55
原创 16-父访问子组件
16-父访问子组件父访问子组价有两种方法，一是children 另一种是refs，但是我们在平常开发中，使用最多的是refs，但是我们在平常开发中，使用最多的是refs，但是我们在平常开发中，使用最多的是refs，因为refs使用方便，则refs使用方便，则refs使用方便，则children的最大用处就是访问全体的子组件.为什么没有子访问父呢？因为子直接访问父，会出现很多问题，一般我们会直接使用子传父。<!DOCTYPE html><html> <head>
2020-11-19 15:33:12
90
2
原创 15-子传父（自定义组件，this.$emit(方法,需要传递的参数)）
15-子传父（自定义组件）<!DOCTYPE html><html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 使用V-ON调用方法 --&g
2020-11-18 16:17:23
283
原创 14-父子组件通讯，父传子（props）
14-父子组件通讯，父传子（props）<!DOCTYPE html><html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn :cmovies
2020-11-17 17:37:45
174
原创 13-组件中使用文本插值
13-组件中使用文本插值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn>
2020-11-17 15:15:29
109
原创 12-组件分离式写法（配合语法糖）
12-组件分离式写法（配合语法糖）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn
2020-11-17 14:39:20
82
原创 11-父子组件注册
11-父子组件注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app1"> <cpn2></cpn2>
2020-11-17 11:54:51
94
原创 10-VUE局部组件全局组件的语法糖简易方式
10-VUE局部组件全局组件的语法糖简易方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn1>&l
2020-11-17 11:04:35
84
原创 9-VUE局部组件的注册
9-VUE局部组件的注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn&g
2020-11-17 11:03:06
60
原创 8-VUE全局组件的注册
8-VUE全局组件的注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <!-- 3、使用组件 -->
2020-11-17 11:02:08
42
原创 7-VUE基础项目练习(购物车)
VUE基础项目练习(购物车)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="./js/vue.min.js"></script> <title></title> </head> <body> <div id="app"> <div v-if="books.le
2020-11-16 17:09:09
233
原创 VUE初阶段学习基础指令2——属性绑定
VUE初阶段学习基础指令2——属性绑定<div id="app"> <button v-bind:class="setclass" v-bind:title="text">按钮</button> <!-- 用于设置DOM的节点属性 --> </div> <script> var app = new Vue({ el:"#app", data(){ return{ setclass:"chass
2020-11-16 17:05:58
54
原创 VUE初阶段学习基础指令1——插值文本绑定
VUE初阶段学习基础指令1——插值文本绑定 <div id="app"> <div v-html="textt"></div> </div> <script> var app = new Vue({ el:'#app', data (){ return{ textt:"dsadasda" } } }) </script> ![在这里插入图片描述](https://
2020-11-16 17:05:49
53
原创 VUE初阶段学习基础指令3——事件绑定
VUE初阶段学习基础指令3——事件绑定<div id="app"> <div v-bind:id="id1" v-bind:style="{width:width,height:height,background:color}" v-html="age"></div> <div></div> <div></div> <button @click="changestyle">按钮</butt
2020-11-16 17:05:40
42
原创 VUE初阶段学习基础指令4——双向绑定
VUE初阶段学习基础指令4——双向绑定<div id="app"> <input type="text" v-model="shige" /><br /> {{shige}}<br /> <input id="ca" type="checkbox" value="唱歌" v-model="aihao"> <label for="ca">唱歌</label> <input id="cb"
2020-11-16 17:05:31
39
原创 VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用
VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用<div id="app"> <h1 v-if="order === 0">标题0 v-if</h1> <h1 v-else-if ="order===1">标题1 v-else-if</h1> <h1 v-else-if="order===2">标题2 v-else</h1> <h1 v-else-if="order===3"&g
2020-11-16 17:05:23
53
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人