随笔分类 -  VUE.JS

2021/2/27 VUE AXIOS封装
摘要：Axios导入 npm install axios --save Axios封装配置 axios.js import Axios from 'axios' // axios封装 class HttpRequest{ //构造方法，可指定反向代理路劲 constructor(){ } //拦截器、可配 阅读全文
posted @ 2021-02-27 19:11 ping_sen 阅读(146) 评论(0) 推荐(0)
2021/2/20 flex布局
摘要：用于父元素的属性 display:flex 定义父元素的显示类型 flex-direction 用于修改主轴的方向 flex-wrap 用于子元素换行 justify-conent 主轴上子元素的分布方式 align-items 交叉轴上的元素分布方式 用于子元素的属性 flex = flex-gr 阅读全文
posted @ 2021-02-20 21:46 ping_sen 阅读(61) 评论(0) 推荐(0)
2021/2/18 星空背景组件Starfield
摘要：<template> <canvas id="starfield"></canvas> </template> <script> export default { name:"starfield", data(){ return{ canvas:{}, context:{}, stars:[], s 阅读全文
posted @ 2021-02-18 18:25 ping_sen 阅读(151) 评论(0) 推荐(0)
2021/2/1 深入理解组件传值（countup插件实现）
摘要：父组件给子组件传值。 countup实现 <template> <div> <!-- 定义绑定id --> <!-- slot为插槽可以给组件添加指定信息 --> <!-- ref可以获取当前页面也可以获取页面中的dom节点 --> <slot name="left"></slot><span :i 阅读全文
posted @ 2021-02-01 11:13 ping_sen 阅读(191) 评论(0) 推荐(0)
2021/1/31 ajax请求
摘要：1解决跨域问题 设置代理 前端设置代理 后端 添加响应头 axios封装 拦截器 阅读全文
posted @ 2021-01-31 20:19 ping_sen 阅读(69) 评论(0) 推荐(0)
2021/1/26 vue状态管理
摘要：（一）组件传值 组件传值 子组件 <input @input = "handleInput" :value="value"> //绑定handleinput事件，绑定value属性 <script> export default{ /* props:{ value:{ type:[String, N 阅读全文
posted @ 2021-01-26 14:45 ping_sen 阅读(75) 评论(0) 推荐(0)
2021/1/26 vue路由概念总结
摘要：路由详解（一） （1）router-link <router-link> 封装了一个<a>标签，内有一个属性是to属性，可以链接不同页面 <router-link to ="/">home</router-link> <router-link to ='/about'>about</router-l 阅读全文
posted @ 2021-01-26 12:35 ping_sen 阅读(101) 评论(0) 推荐(0)
2021/1/22 vue指令
摘要：VUE指令 v-text指令 <p v-text="msg">msg:</p> <p>msg:{{msg}}</p> 这是根组件 msg:这是根组件 两种效果不一样，第一种将msg 赋值给P标签替换原有内容，第二种为插值表达式 v-html指令 v-html指令能够将数据内有 HTML标签的数据解析 阅读全文
posted @ 2021-01-22 21:38 ping_sen 阅读(154) 评论(0) 推荐(0)
2021/1/22 vuex实现页面通信
摘要：Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要： 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做 阅读全文
posted @ 2021-01-22 19:00 ping_sen 阅读(239) 评论(0) 推荐(0)
2021/1/22 vue路由 GET传值 结合请求数据 编程式导航与hash模式 路由嵌套
摘要：vue路由get传值 1.cmd ，npm 导入vue-router到项目中 2.配置路由 3.配置路由传值的两种方式 { path: '/content/:aid', component: Content }, { path: '/pcontent', component: Pcontent }, 阅读全文
posted @ 2021-01-22 11:53 ping_sen 阅读(144) 评论(0) 推荐(0)
2021/1/21 vue-router配置
摘要：vue路由配置： 1.安装 npm install vue-router --save / cnpm install vue-router --save 2、引入并 Vue.use(VueRouter) (main.js) import VueRouter from 'vue-router' Vue 阅读全文
posted @ 2021-01-21 13:32 ping_sen 阅读(58) 评论(0) 推荐(0)
2021/1/20 vue模块化，vue组件，vue生命周期函数，vue-resource请求数据，Axios 请求数据，Vue父组件给子组件传值，vue子父组件互相取值
摘要：vue模块化 vue把相似功能的方法和数据，统一保存在一个模块中，方便反复调用。 /*定义模块 */ var storage = { set(key,value){ localStorage.setItem(key, JSON.stringify(value)) }, get(key){ retur 阅读全文
posted @ 2021-01-20 22:09 ping_sen 阅读(67) 评论(0) 推荐(0)
vue 双向数据绑定
摘要：双向数据绑定 双向数据绑定 MVVM vue就是一个MVVM的框架 M model V view 在改变数据时同时也会改变视图 <input type="text" v-model="msg" /> <li>{{msg}}</li> 通过v-model引入数据msg，和直接数据绑定，改变input文 阅读全文
posted @ 2021-01-19 23:38 ping_sen 阅读(44) 评论(0) 推荐(0)
vue 属性绑定
摘要：参数绑定 在script中的data()数据中的 数据键值可以通过{{obj}}直接引用 数据迭代 在标签中通过 <li v-for = "item in list" :key= "item">{{item}}</li> 可以对可迭代对象进行迭代输出 引入上一个迭代数据的迭代输出 可以进行迭代嵌套 阅读全文
posted @ 2021-01-19 20:00 ping_sen 阅读(94) 评论(0) 推荐(0)
2021/1/19 vue开发环境搭建
摘要：搭建VUE的开发环境： 1、首先安装node.js 2、搭建vue的开发环境，安装vue的脚手架工具，官方命令行工具 npm install --global vue-cli 3、创建项目 必须在cmd到指定文件夹里面 vue init webpack vue-demo01 cd vue-demo0 阅读全文
posted @ 2021-01-19 10:22 ping_sen 阅读(176) 评论(0) 推荐(0)