- 博客(21)
- 问答 (1)
- 收藏
- 关注
RSS订阅
2原创 作用域插槽使用-使用笔记
自我理解父子组件使用data数据时，之前我都是在子组件定义data数据，在子组件中进行使用；在父组件中定义的data数据，在父组件中进行使用；使用作用域插槽可以将子组件的数据通过插槽给传递给父组件，在父组件中进行类型展示要点子组件中使用1.子组件存在data数据// 子组件child-cpndata () { return { dataList: ['tsz', 'swk', 'zbj', 'shs'] }}2.子组件需要有插槽slot<h2>我是子组件标
2022-05-28 23:28:07
255
原创 Vue兄弟组件之间传递参数笔记
参考很多大佬的自己记一下笔记1.创建一个js文件eventBus.js// 导入vueimport Vue from 'vue';// 导出一个vue实例export default new Vue();2.创建兄弟组件Cpn1发射数据<template> <div class="cpn1"> <h2>{{ message }}</h2> </div></template><script>
2022-04-28 18:45:06
1467
原创 大数据轮播图排行组件样式封装
大数据轮播图带图标排行组件封装1.请求接口数据或者在data中定义数据模拟data () { return { // 数据存放 dataList: [ { name: '消防安全'， value: 238 }, { name: '养老问题'， value: 238 }, { name: '宠物问题'， value: 238
2022-04-28 08:46:00
541
原创 VUE中简单使用ECharts笔记
1.安装npm install echarts --save2.在vue中创建盒子，设置id属性<div id="myChart"></div>3.style中设置宽高<style> #myChart { width: 400px; height: 400px; background-color: #1890ff; }</style>4.script中配置首先在methods中定义方法// 4.1初始化e
2022-04-11 21:51:37
838
原创 网络请求数据渲染基本用法总结
参考视频-哔站coderwhy老师步骤1.安装axiosnpm install --save axios2.封装实例// 导入axiosimport axios from 'axios';// 封装实例export function request(config) { // 创建实例 const instance = axios.create({ baseURL: '公共接口', timeout: 5000 }); // 请求拦截 instance.
2022-03-31 09:03:22
242
原创 Better-Scroll在VUE中的使用笔记
官方网站：https://better-scroll.github.io/docs/zh-CN/优点：可以丝滑的滚动移动端的页面，让页面有弹簧效果，下拉刷新，上拉加载丝滑过渡安装npm install --save better-scroll引入import BetterScroll from 'better-scroll';要点// 1.父元素需要设置高度// 2.只能控制父亲的第一个子元素// 3.一定注意需要使用鼠标左键上下拖动看效果，特别注意不能使用鼠标滚轮看效果，因为它看不出
2022-03-17 17:34:16
656
原创 CSS文本样式控制显示行数，多出省略号展示
两行展示多出省略号展示p { display: -webkit-box; // 超出隐藏 overflow: hidden; white-space: normal !important; // 多出省略 text-overflow: ellipsis; word-wrap: break-word; // 展示行数 -webkit-line-clamp: 2; -webkit-box-orient: vertical;}段落文字样式左右对齐最后一行左对齐p
2022-03-15 15:18:55
722
原创 项目创建时初始化CSS样式笔记
Normalize.css/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjus
2022-03-13 18:01:43
161
原创 Axios笔记
作用：网络请求数据安装npm install --save axios引入(需要使用到axios的文件引入)import axios from 'axios';1.基本使用axios({ url: 'http://123.207.32.32:8000/home/multidata'}).then(res => { console.log(res.data);});2.定义公共// 公共定义axios.defaults.baseURL = 'http://123.20
2022-03-12 10:44:23
587
原创 Vuex-actions：异步操作
作用：异步操作写在actions中，自身无法修改state中的数据，只能提交方法给mutations，通过mutations修改state中的数据需要通过dispatch提交异步actions中接收异步，内部有一个参数context相当于store，可以通过context.commit提交同步mutations中接收同步，在对state中的数据进行修改// state中定义一些初始数据用来举例state: { // 定义一个数字 count: 0, // 定义一个对象 code
2022-03-09 12:02:20
3043
原创 Vuex-mutations：同步操作
作用：修改vuex中的state，只可以通过mutations修改需要通过commit提交同步方法(1.只提交方法，参考实例1；2.携带参数提交，参考实例2)同步方法中第一个默认参数是state，可以通过state.xx拿取state中已经定义好的数据// state中定义一些初始数据用来举例state: { // 定义一个数字 count: 0, // 定义一个对象 coderyg: { name: 'coderyg', age: 25, height:
2022-03-09 10:08:40
1252
原创 Vue-Router参数传递
作用：点击路由跳转携带参数方法一：通过动态路由传递参数，当前活跃路由页面获取参数通过(this.$route.params.动态参数)获取// 1. index.js配置路由映射{ path: "/user/:userId", component: User}// 2. App.vue// 2.1 router-link标签使用<router-link :to="'/user/' + userId">link标签</router-link>// 2.2 普
2022-03-04 14:47:25
448
原创 Vue-Router动态路由
作用：动态拼接一些路径语法：/user/:userId(:XX表示可以动态拼接，路径可以渲染成/user/zhangsan或者/user/lisi等等)1.通过router-link渲染的跳转页面通过动态绑定to属性后面跟着动态路由来跳转页面(:to="’/about/’+info")Router-Index.jsimport Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);const About
2022-03-04 11:58:36
5936
原创 Vue-Router中的keep-alive使用（自我理解）
参考：coderwhy老师视频作用保持之前页面所选展示内容不被默认内容替换（比如在首页有两个按钮，一个是首页新闻，一个是首页消息，默认展示新闻页面，当点击消息页面后，需要跳转到关于页面，再次点击首页是仍然需要展示之前点击的消息页面内容，而不是一开始默认的新闻内容，这时就需要使用keep-alive来保护跳转前的路由状态不被销毁）理解构思需要先通过脚手架创建项目（vue create routerkeepalive）在Home.vue内部有两个子页面HomeNews.vue和HomeMessage
2022-03-03 16:54:59
3948
空空如也
CSS中想要给文字设置渐变样式
2022-04-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人