vue笔记

vue2.5

vue for循环推荐使用for of循环，更接近原生javascript

template是占位符，在循环过程中不会渲染出来，相当于react的Fragement

vue修改对象可以直接改变对象的引用来修改数据，达到修改界面的效果，也可以使用set或object.assign达到

数组的七种变异方法：push() pop() shift() unshift() splice() sort() reverse() 会触发视图更新 还可以改变数组的引用达到？

父子组件传值：props传值，传数字类型并须使用v-bind:num=“123”,否则就变成·字符串

props参数校验

props: {
 cpntent: {
   type: String,
	require: true,
	default: 'haha',
	validator: (value) => return value.length > 3
 }
}

非父子组件传值

• 总线机制(观察者模式) 一般挂到vue的原型脸上vue.prototype.bus =…,使用时用this.bus=…
• vuex
• provide/inject
• $attrs/$listeners
• props $emit/$on
• 父组件：v-bing:content.async = ‘’’, 子组件调用this.$emit(‘update:content’, value) 实现子组件修改props

v-once指令：将组建放在内存，不在重新生成，提高效率

vue入场动画 appear，在界面杀心或第一次出现是显示动画

transition里面添加type="transition"以过渡效果时长为总时长

:duration=“1000s” 自定义时长 :duration="{enter:5000,leave:1000}"

动态组件：

解决移动端一像素边框问题，显示成2像素或3像素边框 [解决办法](‘https://www.cnblogs.com/cckui/p/9267534.html](https://www.cnblogs.com/cckui/p/9267534.html’)

fastclick: 移动端点击事件

view-awsome-swiper 轮播图插件

31.25vw?

flex布局

单行多出文字显示。。。
text-overflow: eclipse
overflow:hidden
word-space: nowrap

父组件flex布局，子组件添加上个后，不能再行末显示三个点，在父元素下添加min-width:0;

better-scroll 插件实现字母联动

css overflow: inherit

递归组件（组件必须要有名称(name)）组件使用组件名称

babel-polyfill插件解决promise兼容性问题

vue官网可以查看vue官方推荐的插件

nodejs

不存在跨域：使用cookie跟session:

存在跨域：使用token;

git

• git status: 查看当前文档情况
• git add . :将修改文件添加
• git commit -m ‘内容’： 提交内容
• git push: 推送到远程
• git checkout -b login: 创建分支
• git branch: 查看当前项目分支
• git merge login: 合并分支
• git push -u origin login: 将login分支的代码推送到远程分支(第一次)
• git checkout login;//切换当前分支

vue-cli

vue-cli-service build --report: 生成项目打包报告

通过UI面板查看

vue router的meta属性：组件通过$route.showFooter

{ path： ‘/’, component: Login, meta: {showFooter: true}}

vue-cli2跨域

config/index.js
proxyTable: {
    '/api': {//匹配所有已‘/api'开头的请求陆经
        target: 'http://localhost: 4000',//代理目标地址
        changeOrigin: true,//支持跨域
        pathRewirte: {//重写陆经开头中的/api
            '^/api': ''
        }
    }
}

数组是一个引用类型，只需要将数组引用存起来，那么这个数组的改变都将改变？？？

const arr = [];
let miArr = [];
category.forEach( c => {
    if(minArr.length === 8){
        minArr = [];//重新创建数组
    }
    if(minArr.length === 0) {
        arr.push(minArr);
    }
    minArr.push(c);
})

//第二种做法
 pages () {
     const pages = []
     this.list.forEach((item, index) => {
         const page = Math.floor(index / 8)
         if (!pages[page]) {
             pages[page] = []
         }
         pages[page].push(item)
     })
     return pages
 }

this.$nextTick(() => {//界面更新就立即调用

})

提高用户体验： 背景模糊：使用svg背景图片