Luemmy-CSDN博客

原创 el-table 跨行/跨列的写法

一. el-table 跨行/跨列的写法<el-table> :span-method="objectSpanMethod"</el-table>// 隐藏第一行的所有列也就是 orderList[0]objectSpanMethod ({ rowIndex, columnIndex }) { if (rowIndex === 0) { return { rowspan: 0, colsp

2021-06-09 16:29:46 2242

原创 Vue: 差值表达式简单的写法

十. 差值表达式简单的写法<template slot-scope="scope"> <div> <span class="orderDetail__nameParent__total"> ￥ {{ (scope.row.number*scope.row.promotePrice).toFixed(2) }} </span> </div></template><template

2021-06-09 16:24:30 749

原创 AJAX: Axios以各种方式发送AJAX请求的写法

各种方式包括: GET请求, POST表单请求, POST以JSON方式请求function getAxiosParameter (url, params, type) { // 如果 accessToken 是 null, Flag = false const flag = !!store.state.common.accessToken // 判断有无令牌的标记 const accessToken = store.state.common.accessToken // 令牌

2021-06-09 16:12:34 180

原创 Vue: sessionStorage(全局, 用来向浏览器存储/读取 key/val)

1. sessionStorage 里面存储的数据, 在浏览器关闭的时候消失; 如果想浏览器关闭后也不消失, 需要使用 localStorage 存储2. 一般, localStorage 用于做记住密码功能3. sessionStorage 或 localStorage, 只能存储字符串, 如果需要存储对象/数组, 需要先用4. JSON.stringify() 变成字符串; 接取的时候用 JSON.parse()存储数据的方法handleSettlement () { sessio

2021-06-09 16:11:27 524

原创 Vue: 关于arguments

因为arguments 本身是方法里面自带的参数, 所以不能重新定义arguments<template slot-scope="scope"> <el-input-number style="width: 110px" v-model="scope.row.number" @change="handleChange(scope.row.id, arguments)" :min="1" :max="50"

2021-06-09 16:10:48 1781

原创 Vue: Promise的异步请求

在孙子组件里面传数据<template> <div class="grandson"> <h5>子级</h5> <button @click="grandsonHello">sayHello</button> </div></template><script> export default { name: 'Grandson', // 组件名.

2021-06-09 16:09:10 273

原创 Vue: $dispatch 与 $broadcast 和 eventBus (全局方法)

[src/main.js]4.1 向上通知 $dispatch// 向上通知Vue.prototype.$dispatch = function (eventName, value) { let parent = this.$parent while (parent) { parent.$emit(eventName, value) parent = parent.$parent }}从下向上通知: 把孙子级组件里面的数据传送到爷爷级组件里面的方式在子级组件里面

2021-06-09 16:07:16 357

原创 Vue: 关于store的应用与方法

1. 建立项目基础公共状态[src/store/common/common.js]export default { namespaced: true, // 命名空间 state: { // 数据存放 clientId: 'c1', // 客户端ID clientSecret: 'vY9W55NuXM9hoDlx', // 客户端对称秘钥 username: sessionStorage.getItem('username'), // 用户名 userId: s

2021-06-09 16:06:22 231

原创 Vue: 关于组件与插槽

需求: 假设说, 大多数时候只会用到第一个组件, 偶尔会用到第二个同部位组件第一步:建立常用组件1 和不常用组件2<template> <div class="bottomFooter"> <hr/> <div>我是底部</div> </div></template><script>export default { name: 'bottomFooter', // 组件名称

2021-06-09 16:05:26 163

原创 Vue: 关于路由跳转

一. 关于路由跳转1. 点击按钮触发, 返回上一层<template> <div class="goodsShow"> <h2>商品列表页</h2> <button @click="goBackToDescend">返回上一层</button> </div> </div></template><script>export default {

2021-06-09 16:03:50 72

原创 Vue: Axios和Vuex模块化的综合应用

Axios和Vuex模块化的综合应用第一步: 建一个mock --> json文件用来提供假数据[public/mock/cartList.json][ { "id": 1, "name": "巧克力", "price": 6, "unit": "块", "type": ["德芙", "费列罗"] }, { "id": 2, "name": "牛奶", "price": 10, "unit": "袋",

2021-05-23 16:14:25 177

原创 vuex: 状态管理/模块化/mutations常量

一. vuex状态管理/模块化/mutations常量[views/demo.vue]<template> <div class="demo"> <h1>vuex状态管理</h1> <p>{{count}}</p> <p>{{count1}}</p> <p>{{count2}}</p> <p>{{rootCount}}</p

2021-05-23 16:07:08 339

原创 vue-cli: 组件生命周期(组件的钩子函数)

一. 组件的钩子函数(组件生命周期)[生命周期表]<template> <div class="dome"> <h1>组件的钩子函数(生命周期)</h1> <div id="msg">{{ msg }}</div> <button @click="modify">修改</button> </div></template><script&gt

2021-05-23 16:06:35 367

原创 vue-cli: 路由与路由钩子函数

一. 路由与路由钩子函数组件部分[html]<template> <div class="dome"> <h1>路由 vue-router</h1> {{ $route.fullPath }} <div> <button @click="changPage">通过js切换路由</button> </div> <router-vi

2021-05-23 16:06:01 164

原创 vue-cli: v-model双向绑定的用法

一. 双向绑定v-model<template> <div> <h1>双向绑定v-model</h1> <input type="text" v-model="text"> <div>{{ text }}</div> <textarea v-model="content" rows="4" cols="30"></textarea> <div>

2021-05-23 16:05:10 198

原创 vue-cli: 计算属性与侦听属性

一. 计算属性与侦听属性<template> <div> <h1>计算属性和侦听属性</h1>  <div> {{ type + ':' + msg }} </div>  <div>{{ ty

2021-05-23 16:04:24 176

原创 vue-cli: 子组件与父组件通信、组件插槽slot(内容分发)、动态组件

一. 子组件与父组件通信父组件向子组件传递参数, 子组件修改内容后, 向父组件返回内容<template> <div class="demo"><!--

2021-05-20 18:43:49 221

原创 vue-cli: @开头的事件修饰符的用法

一. 事件修饰符点击子组件, 也会认为点击了父组件, 即冒泡行为<template> <div> <h1>事件修饰符</h1> <div @click="fatherClick"> 父级 <div @click="subClick1">子级1</div>  <div @click.sto

2021-05-20 18:36:10 221

原创 vue-cli: v-on事件绑定的用法

一. v-on事件绑定<template> <div> <h1>v-on 事件的绑定</h1> <div>{{number}}</div>  <button v-on:click="add">加1</button>  <button @click="reduce">减1<

2021-05-20 18:32:14 183

原创 vue-cli: v-for遍历数组的用法

一. v-for格式: v-for=“xx in data” :key=“index”需要绑定唯一的keyin可以换成of当没有id的时候, 就要写成[v-for="(item, index) in data" :key=“index”]当有id的时候, 就可以写成[v-for=“item in data” :key=“item.id”]随机生成六位数 --> 生成随机数 Math.random() --> 取小数点后六位的一个数 .toFixed(6) --> 把0.替换成

2021-05-20 18:28:56 1594 1

原创 vue-cli: v-if条件判断的用法

一. v-iftemplate(占位符)元素不会渲染到dom中<template> <div> <h1>v-if条件判断</h1>  <div v-if="isShow">isShow为true的时候才显示</div> <div v-else-if="isElse">isElse为true的时候才显示</div> <div

2021-05-20 18:26:09 442

原创 vue-cli: 绑定class和style

二. 绑定class和style<template> <div>  <div :class="classA">绑定class</div>  <div :class="[classA, classB]">通过数组绑定多个class</div> <!-- 通过对象的方式来绑定cla

2021-05-20 18:20:28 234

原创 vue-cli: v-bind绑定数据的用法

一. 绑定数据v-bind花括号{{ }}绑定数据花括号{{ }}里面可以写表达式v-bind绑定属性绑定动态属性<template> <div class="about"> <h1>数据绑定v-bind</h1>  <p>{{ msg }}</p>  <di

2021-05-20 18:12:48 334

原创 vue-cli: 使用Vue-cli创建项目

一. Vue-cli 总体框架每次启动之前, 都要开启左下角的[npm], 双击里面的[serve]!之后点击第一个[Local]的链接二. Vue-cli 配置目录文件讲解1. node_modules library root (项目依赖包)[node_modules] 里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法打开命令工具，进入项目目录，输入npm install [依赖包名称]，回车在两种情况下我们会自己去安装依赖：项目运行缺少该依赖包安装插件

2021-05-20 17:57:14 768

原创 VueJs: VueJs的基础用法和本地应用与练习

一. 基础1.1 简介JavaScript框架简化Dom操作响应式数据驱动1.2 Vue程序开发导入开发版本的Vus.js创建Vue实例对象, 设置[el]属性和[data]属性使用简洁的[模板语法]把数据渲染到页面上1.3 el (挂载点)[el]是用来设置Vue实例挂载(管理)的元素Vue会管理el选择[命中的元素]及其内部的[后代元素]可以使用其他的选择器, 但是建议使用ID选择器可以使用其他的双标签, 不能使用HTML和BODY语法:<

2021-05-20 14:02:31 188

Xu190131的博客