![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue部分
在写Vue和看文档中出现的问题或知识点
小芹儿
php网站开发,前端
展开
-
34--vue 双向绑定
用v-model 进行绑定点击链接原创 2020-08-17 14:24:34 · 142 阅读 · 0 评论 -
33--vue面试题
vue面试题1vue面试题2原创 2020-08-14 15:59:44 · 134 阅读 · 0 评论 -
32--vue cli脚手架介绍
Vue-cli是Vue的脚手架工具主要作用:目录结构、本地调试、代码部署、热加载、单元测试vue-cli脚手架工具就是为我们搭建了开发所需要的环境,为我们省去了很多精力。详见:cli主要介绍原创 2020-08-14 15:04:50 · 104 阅读 · 0 评论 -
31--px、em、rem、rpx 用法 与 区别
点击该链接即内容转载 2020-08-13 15:29:37 · 197 阅读 · 0 评论 -
30--微信小程序 和 vue的区别
1、条件渲染vue使用 v-if v-else-if v-else 指令,如下: <div v-if="color=='red'">red<div> <div v-else-if="color=='orange'">orange<div> <div v-else>yellow<div>wx使用 wx:if wx:elif wx:else 指令,如下: <view wx:if="{{color=='red'}}">red&l转载 2020-08-13 15:28:02 · 94 阅读 · 0 评论 -
29--store.js vuex状态管理模式
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。比如token,登录后共享token,改变haslogin登录状态。import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { hasLogin: false,原创 2020-08-03 21:02:09 · 161 阅读 · 0 评论 -
28--学生 填写签到码页面 foreach
<template> <div> <div class="top"> <i @click="back" class="cubeic-back"></i> <span>{{classname}} {{coursename}}</span> <cube-button :primary='true' :outline='true' :inline='true' @click="q.原创 2020-07-04 18:26:35 · 213 阅读 · 0 评论 -
27--修改姓名,change页面(跳页传值)
router.js传值 { path: '/student/changename/:name', component: ChangeName, props: true, meta: { title: '更改姓名' } },我的页面:<template> <div class="page"> <div> <cell-item label='学号' :value="number" :arrow='true' :url=..原创 2020-07-04 18:15:33 · 302 阅读 · 0 评论 -
26--学生签到 学生验证码签到(6)foreach
<template> <div> <div class="top"> <i @click="back" class="cubeic-back"></i> <span>{{classname}} {{coursename}}</span> <cube-button :primary='true' :outline='true' :inline='true' @click="q.原创 2020-06-14 15:52:17 · 332 阅读 · 0 评论 -
26--学生签到 管理员页面功能(5) foreach
<template> <div> <div class="top"> <i @click="back" class="cubeic-back"></i> <span>签到码:{{yzm}}</span> <cube-button v-if="isFinised" :disabled="!isFinised" :primary='true' :outline='true' :inline...原创 2020-06-14 15:47:00 · 349 阅读 · 0 评论 -
26--人工签到 代码实现(4) foreach、push
页面布局:<template> <div class="page"> <div class="top"> <i class="cubeic-back" @click="back"></i> <span>手工签到</span> <span class="top-btn" @click="select">{{select_text}}</span> </div>原创 2020-06-14 14:33:49 · 418 阅读 · 4 评论 -
26--人工签到(3)
页面实现:1、把在该班课的学生通过后台都显示出来,默认state为已出勤,设置考勤状态等有值后才显示可用状态2、多选和取消转换3、选择一个学生设置考勤状态不是禁用状态4、设置考勤状态5、选择状态后自动跳到上面,并显示状态6、返回时显示弹窗是否保存本次手工登记结果...原创 2020-06-14 13:40:12 · 161 阅读 · 0 评论 -
26--签到首页 删除操作(2)
长按删除操作:start: function(index) { // 延时器 清除 click 超过那个时间再弹出来 clearTimeout(this.timer) this.timer = setTimeout(() => { this.popupmenu() }, 800) this.currentIndex = index this.index = index }, myclick: function() { console.log('click me'原创 2020-06-14 13:08:49 · 274 阅读 · 0 评论 -
26--签到首页(1) foreach
页面布局样式<template> <div> <div class="fanhui"> <i class="cubeic-back" @click="back"></i> </div> <div class="top"> <div>签到</div> </div> <div class="page-hd"> <div class=.原创 2020-06-14 09:56:32 · 229 阅读 · 0 评论 -
25--单项选择select
实现效果:对于 Select 选择组件,你需要传入 options 定义各个选项,选择的结果则绑定在 v-model 上。<cube-select v-model="banji" :options="banji_options" @input='banji_select'></cube-select>定义data: banji: '', kecheng: '', banji_options: [], kecheng_options: []选中的值:banji原创 2020-06-13 11:52:10 · 256 阅读 · 2 评论 -
24--页面分组显示数据(以班级为分组依据) map、foreach、push
实现效果:页面返回的数据:前端对数据进行处理<template> <div class="page"> <template v-for="(group,title) in list"> <div class="group"> <div class="title">{{title}}</div> <div v-for="item in group" :key="item.ccid">原创 2020-06-10 23:07:50 · 265 阅读 · 0 评论 -
23--左滑按钮(编辑,删除)、添加功能
<template> <div class="swipe-wrapper"> <cube-scroll> <cube-swipe> <transition-group name="swipe" tag="ul"> <li class="swipe-item-wrapper" v-for="(data,index) in list" :key="data.item.value"> <...原创 2020-06-09 23:31:52 · 279 阅读 · 1 评论 -
22-- php redis 存入hash表
首先,先了解一下redis:REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Hash), 列表(list), 集合(sets) 和 有序集合(sorted sets)原创 2020-06-09 09:31:54 · 573 阅读 · 1 评论 -
21--页面跳转传值 放入缓存
传ccid,ccid为key,:key=“item.ccid” ,跳页传ccid,在点击后面加上item.ccid。<template> <div class="page"> <template v-for="(group,title) in list"> <div class="group"> <div class="title">{{title}}</div> <div v-for="item i原创 2020-06-07 21:25:57 · 181 阅读 · 1 评论 -
20--长按事件操作 编辑-删除 map、push
<template> <div> <div v-for="(item,index) in list" :key="item.value"> <div class="row" :class="{active:index==currentIndex}" @touchstart.prevent="start(index)" @touchend.prevent="end"> <div class="left">{{item.course原创 2020-06-07 19:41:48 · 374 阅读 · 1 评论 -
19--显示年月日时间戳、时分秒时间戳、星期几时间戳、年月日格式
common.js//显示年月日时间戳const timestampToYmd = timestamp =>{ let data = new Date(timestamp * 1000) let year = data.getFullYear() let month = data.getMonth()+1 let day = data.getDate() return [year,month,day].map(formatNumber).join('-')}//时间戳 ->时分原创 2020-06-07 18:03:37 · 522 阅读 · 1 评论 -
18--request.js(封装axios)请求服务器
request.js响应,比如token无效和服务器错误,会弹窗提示import Vue from 'vue'import axios from 'axios'import Qs from 'qs'// 引入内置的组件import {Dialog} from 'cube-ui'Vue.use(Dialog)import {Toast} from 'cube-ui'Vue.use(Toast)const baseUrl = process.env.NODE_ENV === 'product原创 2020-06-07 17:36:51 · 703 阅读 · 0 评论 -
17--vue 登录页面 账号密码提交验证validator + 跳转方式
跳转方式:this.$router.replace(’/schoolmanager’).catch(res => {})this.$router.go(-1)常用的两种处理数据的方式:one: const p1 = this.$refs.validator0.validate() p1.then(res => { if (this.valid) { sessionStorage.setItem('number', this.new_number) .原创 2020-05-13 23:15:15 · 678 阅读 · 0 评论 -
16--vue嵌套路由、引入图片+插槽部分
一、嵌套路由// 班级管理员的组件const ClassBanke = () => import('./components/classmanager/BanKe.vue')const ClassIndex = () => import('./components/classmanager/Index.vue')const ClassMyinfo = () => import('./components/classmanager/MyInfo.vue')页面跳转 要传参数 一定原创 2020-05-13 22:32:12 · 885 阅读 · 0 评论 -
15--vue自写组件:我的信息页(模板),404页面
1、首先在components下面建一个目录CellItem.vue(注意要两个字母大写)如图:2、组件要实现的效果:3、讲一下代码的含义吧~~外层使用 li 标签来写,click事件是跳转事件;要记得methods方法要在data方法的后面!下面就是有一个img可以引入图片(下面一篇博客讲图片的引入和插槽),v-if判断是否出现,props可以传递静态或动态的值。<template> <li class="cell-item" @click="go"> <i原创 2020-05-13 21:39:53 · 3098 阅读 · 0 评论 -
14--vue导航守卫,路由元信息
routes 配置中的每个路由对象为 路由记录;定义路由的时候可以配置 meta 字段:(router.js)const routes = [{ path: '/', component: TheLogin, meta:{ title:'登录' } }, { path: '/register2', name: 'reg', component: TheRegister2, meta:{ title:'注册' } }]每个守卫方法接收三个参数:原创 2020-05-12 16:18:38 · 116 阅读 · 0 评论 -
13--vue用cube-ui框架写注册页面
下载滴滴cube ui 框架: vue add cube-ui在组件部分建一个register文件夹,以TheStudent.vue为例建好后,要在App.vue里引入并写进模板:<template> <div id="app"> <the-student></the-student> </div>&l...原创 2020-05-08 00:02:43 · 538 阅读 · 15 评论 -
12--vue安装运行的那些事儿(入门重要)
1、安装脚手架cli和node在安装vue-cli前,要确认自己的电脑是否安装了node和npm查询命令:node -v 查询node版本 , npm -v 查询npm版本安装命令:cnpm install -g @vue/clinode.js的网址:https://nodejs.org/zh-cn/download/点击它下载~下载淘宝npm镜像:(因为npm...原创 2020-05-07 23:32:46 · 137 阅读 · 0 评论 -
11--修饰符.lazy .number .trim
1、lazyv-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新<template> <div> <p>.lazy修饰符</p> <input type="text" v-model.lazy="val"> <p&...原创 2020-05-06 23:58:20 · 248 阅读 · 0 评论 -
10--click事件,阻止事件冒泡
1、click事件methods方法控制台输出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title>cli...原创 2020-05-06 23:34:10 · 811 阅读 · 0 评论 -
9--实例生命周期钩子实例方法$watch
$watch用法:观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。注意:在变更 (不是替换) 对象或数组...原创 2020-04-29 00:04:25 · 128 阅读 · 0 评论 -
8--vue实现购物车数字加减的功能
按钮点击事件用v-on:click 简写为 @click功能实现最小减到0,最大不限,sub{ [key: string]: Function }方法注意一定要加一个[key: string]字符串。注意:不应该使用箭头函数来定义 method 函数 (例如 plus: ()...原创 2020-04-28 23:34:12 · 1981 阅读 · 0 评论 -
7--vue数组取出为偶数的数(filter),输出数组乘2后的新数组(map),数组数据累加、求平均数(reduce))
原始循环找偶数首先,用最原始的方法把偶数的数挑出来,是这样的:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <tit...原创 2020-04-28 22:54:17 · 1729 阅读 · 0 评论 -
6--动态地切换 class
动态切换class我们可以传给 v-bind:class 一个对象,以动态地切换 class:<div id="app"> <span :class="myclass">{{score}}</span></div>active 这个 class 存在与否将取决于myclass写入的值为true还是false。var app=new Vu...原创 2020-04-28 22:17:46 · 235 阅读 · 0 评论 -
5--vue实现中文的姓和名分开显示
直接上代码——<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title></title> <...原创 2020-04-28 22:05:25 · 578 阅读 · 1 评论 -
4--模板语法中三元表达式、字符串倒叙输出方法
一、三元运算判断&按钮禁启用功能介绍:成绩为60分以下的字体为红色,其他的为绿色代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></s...原创 2020-04-28 21:55:30 · 1334 阅读 · 0 评论 -
2--vue的v-for循环数据+排序
首先,要实现如下表格:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title></tit...原创 2020-04-27 13:51:53 · 1382 阅读 · 0 评论 -
3--js.sort()方法字符串和数字排序
字符串的排序 var arr = ['a', 'c', 'd', 'b'] arr.sort() console.log(arr) //或console.log(arr.sort());控制台输出: [“a”, “b”, “c”, “d”]w3school的javascript查找下面是 创建新数组的一个方法。 var arr=new Array() arr[0]=12, a...原创 2020-04-27 12:48:10 · 3784 阅读 · 0 评论 -
1--vue介绍和引入js
一:vue是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。二:引入js方法1:vue生产版本的js引入vue...原创 2020-04-27 10:30:32 · 131 阅读 · 0 评论