vue多功能学习笔记

一、过滤器的使用
①：下面是使用，| 是后面是传参数给他的方法
这里注册方法

二、对象转换成数组
三、使用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版本