您现在的位置是:首页 > 正文

vue多功能学习笔记

2024-04-01 03:06:48阅读 2

一、过滤器的使用
①:下面是使用,| 是后面是传参数给他的方法在这里插入图片描述
这里注册方法
在这里插入图片描述

二、对象转换成数组
在这里插入图片描述三、使用mixin写ui库
在这里插入图片描述
在这里插入图片描述
四、响应式布局技巧
在这里插入图片描述
①:em、rem 的再次理解:
在这里插入图片描述
**em:**看上面图,如果直接使用em来设置字体大小,是会在父级的fontsize的基础上的几倍,2em就是2倍的父级的fontsize,因为父级没有设置,所以就获取默认的16px
rem:rem是根据根元素html标签的font-size的大小来设置倍数的,所以一般会把html的font-size等于62.5%,这样 1rem = 10px, 这样根据设计稿来就会非常方便计算

②:媒体查询:其实就是在相应宽度写相应的代码w
在这里插入图片描述
③:练习项目
可以根据不同的窗口引入不同的css
在这里插入图片描述
下面公共样式

 /* 下面是公共样式 */
html {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* 设置10px为1rem */
  font-size: 62.5%;   
}

/* 设置margin */
body {
  margin: 0;
}

/* 设置盒子大小为盒子的纯大小 */
* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #333;
}

/* ul三大设置 */
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 去掉margin */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: normal;
}
/* 默认设置照片宽度为父级宽度 */
img {
  width: 100%;
}


/* 清楚浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

对于手机端进行js操控

if (document.documentElement.clientWidth <= 414) {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
}

window.addEventListener('resize', function () {
  if (document.documentElement.clientWidth <= 414) {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px'; 
  } else {
    if (document.documentElement.style.fontSize !== '62.5%') {
      document.documentElement.style.fontSize = '62.5%';
    }
  }

五、自定义指令
①:注册自定义指令的对象里面会有两个方法,一开始进去就执行bind方法,当视图发生改变的时候,就会执行update方法
在这里插入图片描述
然后上面圈出来的参数其实就是,使用自定义指令的时候,第一个参数是当前节点,第二个是传进来的参数
在这里插入图片描述

②:自定义指令注册
在这里插入图片描述

使用多class的写法
在这里插入图片描述

事件代理的使用:就是让父级去代理子元素的点击事件之类的
其实过程就是在点击的时候,获取e。target里面的内容
在这里插入图片描述

vue.observable 就是相当于创建一个小store

在这里插入图片描述
引入来使用就可以在一个模块的组件中去共享一些属性:

import { store, mutations } from '../store'

获取vue版本
在这里插入图片描述

网站文章

  • kubeadml 安装 k8s

    kubeadml 安装 k8s

    4、部署 Kubernetes Node,将节点加入Kubernetes集群中。5、部署 Dashboard Web 页面,可视化查看Kubernetes资源。1、在所有节点上安装Docker和kubeadm。6、部署 Harbor 私有仓库,存放镜像资源。2、部署Kubernetes Master。3、部署容器网络插件。

    2024-04-01 03:06:40
  • 【数据结构】 平衡二叉数(AVL树)

    【数据结构】 平衡二叉数(AVL树)

    案例给你一个数列{1,2,3,4,5,6},要求创建一颗二叉排序树(BST), 并分析问题所在.问题分析:左子树全部为空,从形式上看,更像一个单链表. 插入速度没有影响 查询速度明显降低(因为需要依次比较), 不能发挥BST的优势,因为每次还需要比较左子树,其查询速度比单链表还慢 1)解决方案:平衡二叉树(AVL) 定义平衡二叉树也叫平衡二叉搜索树(Self-bala...

    2024-04-01 03:06:33
  • Linux基础命令---comm

    comm      逐行比较两个已经排序过的文件。结果以3列显示:第1列显示只在file1出现的内容,第2列显示只在file2出现的内容,第3列显示同时出现的内容。      此命令的适用范围:RedHat、RHEL、Ubuntu、CentOS、SUSE、openSUSE、Fedora。 1、语法      comm [OPTION]... FILE1 FILE2  2...

    2024-04-01 03:05:52
  • 《数据库系统概论》 第十章 数据库恢复技术 热门推荐

    《数据库系统概论》 第十章 数据库恢复技术 热门推荐

    事务是一系列的数据库操作,是数据库应用程序的基本逻辑单元。事务处理(transaction processing)技术主要包括数据库恢复技术和并发控制技术。 10.1 事务的基本概念 事务:是用户定义的一个数据库操作序列,是一个不可分割的工作单位(原子性) 一般的,一个程序中被包含多个事务。如果用户没有显式的定义事务,则DBMS自动划分事务。 事务一般以BEGIN TRANSACTION...

    2024-04-01 03:05:45
  • Win10搭建Pyspark2.4.4+Pycharm开发环境(亲测可用)

    Win10搭建Pyspark2.4.4+Pycharm开发环境(亲测可用)

    Win10搭建Pyspark2.4.4+Pycharm开发环境(亲测可用),包含常见问题及解决方法

    2024-04-01 03:05:38
  • The web services enumeration components are not available

    The web services enumeration components are not available

    The web services enumeration components are not available Error Message:The web services enumeration components are not available. You need to reinstall Visual Stu...

    2024-04-01 03:05:30
  • 【华为机试 Python实现】HJ37 统计每个月兔子的总数

    有一种兔子,从出生后第3个月起每个月都生一只兔子,小兔子长到第三个月后每个月又生一只兔子。例子:假设一只兔子第3个月出生,那么它第5个月开始会每个月生一只兔子。 一月的时候有一只兔子,假如兔子都不死,问第n个月的兔子总数为多少?数据范围: 输入满足 1≤n≤31输入描述: 输入一个int型整数表示第n个月输出描述: 输出对应的兔子总数输入: 3输出: 2......

    2024-04-01 03:04:50
  • Hibernate对象生命周期

    hibernate对象生命周期对象三种状态  hibernate对象三种状态:1、瞬时态transient   new了一个对象,此时对象就是瞬时态   瞬时态对象和数据库记录没有对关系,和session没有关系。    2、持久态persistent   瞬时态对象执行save变化持久层   持久态对象和数据库记录存在对应关系,和session

    2024-04-01 03:04:43
  • 也谈一下Activiti工作流节点的自由跳转

    最近在搞openwebflow的工作流节点自由跳转功能,在网上看了一些资料,感觉不是很好,总结原因如下:直接手动调用SqlSession的操作,感觉会漏掉一些重要的初始化操作(如:启动新节点之后加载其...

    2024-04-01 03:04:35
  • 巨杉数据库再夺“广州独角兽”称号

    巨杉数据库再夺“广州独角兽”称号

    2019年6月14日,由广州市科学技术局指导、广州市科技创新企业协会、《快公司FastCompany》联合主办的2018年独角兽创新企业颁牌暨2019广州“发现独角兽”创新企业项目启动仪式在广东迎宾馆顺利举办。 巨杉数据库再获“独角兽”企业称号。2018年12月,广州市科创企业协会公示了 “独角兽”创新企业榜单遴选结果。榜单涵盖40家企业,覆盖大数据、云计算、信息技术、物联网、生物...

    2024-04-01 03:03:54