vue及前端学习笔记-CFANZ编程社区

使用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>

也可以配合volecity.js使用js动画

    <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新增属性，浏览器支持不好