- 使用in关键字可以校验某个对象下是否存在某个属性
- JavaScript 只有64位的浮点数，具体的范围是 [-2^53 ~ 2^53]，整数也使用浮点数表示
- 在最外层声明的变量，实际上是变成了 window 对象的一个属性
- 定义常量
var define = function(name, value) {
Object.defineProperty(window, name, {
value: value,
writable: false,
});
};
- ==判断时，如果数据类型不一致，会先转换再比较
- 通过给数组的 length 属性重新赋值，也可以达到清空数组的效果
- 插值表达式要用v-cloak避免直接显示，v-text没有该问题
- 计算属性自带缓存，数据没变，就不重新算
- v-if和v-show的区别是，条件false时，v-show存在dom上，但是display为none。v-if不会存在在dom上，v-show性能好
- v-if、v-else、v-else-if必须挨着
- 避免vue复用dom，可以在元素标签加key属性，不一样的key不会复用
- 变异方法触发页面渲染
- <template>标签不会在dom上留下标签
- Vue.set方法触发渲染(像对象中增加属性)
- is属性，在table标签里只允许出现tr标签，因此如果要用自定义标签，就要<tr is="自定义标签">
- 根组件的data是个对象，子组件data是个函数返回一个对象
- 通过ref引用子组件对象或者原生标签的dom对象
- 数据流只能从父组件到子组件，子组件想改父组件数据通过触发事件
- :属性值代表js表达式
- props属性复杂写法：
props: {
lfz: {
type: String,
required: false,
default: 'default',
validator: function (value) {
return value.length > 0
}
}
}
- 子组件标签上绑定的事件是自定义事件(就是emit出来的事件)，html标签上才能绑定原生事件；除非加个native，比如@click.native
- 子组件用slot可以显示父组件的text传入的内容(没有显示slot的text)，也可以传递属性给父组件
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
<slot v-for="item in list" :item=item>默认</slot>
- component代表动态组件，通过is属性确定绑定哪个子组件
- v-once的组件代表只会被生成一次，避免频繁创建
- 被transition标签包围的标签在显示和隐藏时会有过渡的动画效果，配合animate css库使用
<transition name="css-fade" appear appear-acvive-class="animated swing" enter-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">哈哈哈</div>
</transition>
<transition name="js-fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @before-leave="handleBeforeLeave">
<div v-show="show">哈哈哈js</div>
</transition>
- transition-group标签用于对列表的显示和隐藏的效果，被包围的标签必须有key
- 使用自定义组件，通过slot封装动画效果
Vue.component('fade', {
props:['show'],
template: `
<transition mode="in-out" name="css-fade" appear appear-acvive-class="animated swing"
enter-active-class="animated swing"
leave-active-class="animated shake">
<slot v-if="show"></slot>
</transition>
`,
});
- reset.css和border.css，解决移动端click300ms问题，npm install fastclick --save
- npm run build 打包的dist文件夹是真正要使用的
- 设置路径和开发时的后端服务器，node通过proxy代理到真正的后端服务器，避免跨域
module.exports = {
devServer: {
proxy: 'http://localhost:8888'
},
publicPath: '/',
runtimeCompiler: true
}
- 安装浏览器插件vue-devtools
- relative作为absoluted的父容器，父容器的overflow hidden会对absolute生效，并且absolute的z index和top的边界以父容器为准
下面的方式都可以用display flex代替
- 水平居中的实现方式
- 父容器text-align center，子元素是行内元素，display inline或inline-block，因为inline会让高度宽度失效，所以用inline-block较多。优点是浏览器兼容性好。缺点是是text-align有继承性，会导致子元素中的行内元素也是居中
- 子元素设置display table/block;margin 0 auto。优点是不用管父容器，只设置子元素。缺点是子元素脱离文档流，导致margin无效就不会居中了，脱离文档流的情况有绝对定位，fixed定位，浮动
- 父容器开启定位，子元素绝对定位，left 50%;transform translateX(-50%)。优点是父容器是否脱离文档流不会影响子元素居中。缺点是transform是css3新增属性，浏览器支持不好
- 父容器display flex使用浮动布局解决
- 垂直居中的实现方式
- 父元素display table-cell;vertical-align middle。优点是浏览器兼容好。缺点是vertical-align有继承性，会导致其他子元素中的元素也是垂直居中
- 父容器开启定位，子元素绝对定位，top 50%;transform translateY(-50%)。优点是父容器是否脱离文档流不会影响子元素居中。缺点是transform是css3新增属性，浏览器支持不好
WechatIMG1_gaitubao_277x600.jpg
网友评论