hello云胜

技术与生活

0%

发表于

em：相对于自身的font-size。1em = 10font-size。默认font-size=16px

rem: 相对于根元素（即html元素）的font-size。

盒子模型

width和height：设置的是内容的宽高。不包括边框。

水平方向

浏览器水平方向上以下公式必须得到满足

1
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width

margin-left,width,margin-right可以设置为auto。

浏览器会自动调整auto的属性，使等式成立。

其中width默认是auto。那么会自动调整width使等式成立。不需要调节其他的了。

如果width设置了固定值，其他值也没有auto的。浏览器就调整margin-right使等式成立。

所以一般通过

1
width: xxxpx; margin: 0 auto;  来设置水平居中

发表于

基础知识

计算属性：

在{{}}使用时不用加（）。他的本质是属性

原理：get set。省略set，再简写get，就变成我们一般的function写法

computed和methods区别：

computed调用多次，实际只计算了一次。有缓存机制

es6

es5中的var没有if/for等的变量作用域。es5只有function才有作用域

es6的let是有块级作用域了

const是指向的内存地址不能变，但是对象的具体属性可以变

增强写法

对象的增强写法

函数的增强写法

使用``定义字符串，可以换行

箭头函数

箭头函数中的this，是向外层一层层的找，找到的第一个this就是

而function写法中的this，就是window

v-bind绑定

可以动态绑定 style

v-on 事件监听

语法糖 @

传参问题：不传参时，（）可以省略

如果函数需要参数，而你又把（）省略了，那么会把事件event传过去

如果函数需要一个event对象，html中可以使用$event获取浏览器的事件

v-on传参时，如果不加单引号的是变量

v-on的修饰符

.stop 阻止冒泡 如 @click.stop=“onClick”

.prevent 阻止默认事件 如form中的提交按钮有默认的表单提交

.{keyCode|keyAlias} 监听指定按键的点击，

如@keyup 监听所有按键抬起

@keyup.enter 只监听回车

.once 只触发一次

v-if v-else-if v-else

不用加{{}}

如果是切换输入框，默认已经输入的值是不会清除的。

原因是vue的底层处理，虚拟dom。处于性能考虑，会尽可能的复用已经存在的元素。所以input会被复用，输入的值会传递过去。

如果想打破这种复用，可以给元素加上一个key属性

v-show

和v-if的区别是，v-if的元素是元素直接没有，v-show是display：none，所以从效率上说v-show更高效

v-for

in

在遍历对象的过程中，如果只取一个值，那么取到的是value

用（value, key）的格式可以获取key

哪些list方法是响应式的？

push（在最后面追加，可以一次加多个），pop（删除最后一个），shift（删除第一个），unshift(在最前面加元素，可以一次加多个)，splice（删除，插入或替换元素。从第几个元素开始，删除几个元素，再在当前位置加几个元素），sort，reverse

通过索引值修改list的某个元素，不是响应式的，页面不会修改！！！因为vue内部没有监听这个。这种需求可以使用上面的那些方法，或者使用Vue.set()方法

过滤器

在Vue中定义 

1
2
3
4
5
6
7
filters：{

	方法名（param）： {

	}

}

使用 {{ parameter | 过滤器名}}

js 高级函数

for-in index

for-of item

filter:过滤。函数必须返回布尔值

map:

reduce:对list进行汇总。

1
2
3
list.reduce(function(上一次汇总的值，这一次的值){
	函数处理
},0:第一次的初始化值)

递归操作

v-modal 双向绑定

表单绑定。如input的绑定

原理可以看成是v-bind和v-on的组合使用。函数传递event

值绑定的概念，值不一定是写死的。可以动态绑定v-bind

v-modal的修饰符

  1. lazy

    不要实时双向绑定。加lazy后，可以在input失去焦点时绑定

  2. number

    默认v-modal绑定的类型都是String类型

    使用number限制为数字类型

  3. trim

    去除空格

组件化

使用组件的三个步骤

  1. 创建组件构造器

    参数：template

  2. 注册组件

    参数：组件名，上面的组件构造器

  3. 使用组件

    <组件名></组件名>

image-20200627135734115

这种写法在vue2.*基本不会使用了，2.x版本提供了更好用的语法糖，但是这是基础。

语法糖注册组件

image-20200627155005367

不需要使用Vue.extend了

局部组件也一样

image-20200627155101831

模板代码抽离

上面还是在js里写了html代码，很乱。

第一种写法，注意type

image-20200627155650006

第二种写法，template标签。这个好

image-20200627155757158

全局组件和局部组件

在全局的