关于vue的知识记录

vue是一款友好的、多用途的、且高性能的渐进式框架 它可以帮你创建可维护性 和 可测试性更强的代码库 易用 灵活 高效
与其他重量级框架相比 vue采取自底向上增量开发的设计
数据驱动和组件化的前端开发

更加轻量 20kb min + gzip Angular 60kb React 35kb
渐进式框架
响应式的更新机制
学习成本低

虚拟dom ：其数据都存在内存中 只有js引擎参与其中
真实的dom：会有浏览器渲染层在其中
虚拟dom不会进行排版与重绘操作
虚拟dom进行频繁修改，然后一次性比较并且修改真实dom中 需要改的部分

v-cloak 取消闪烁
v-if、v-else v-show 前者会大量操作dom结构（渲染开销）。后者仅仅是针对C S S样式（样式开销）
v-bind
v-bind:is
v-on
v-for

v-model
v-model的修饰符有：

.lazy：懒加载修饰符
.number：将内容转换为number类型
.trim：过滤首尾空格

v-html / v-test
生命周期函数
mounted。 在页面资源绘画完后执行

Vue事件修饰符：stop、once、self、prevent、capture

阻止事件冒泡
<a  v-on:click.stop="todo"></a>
阻止a标签默认跳转 
<a v-on:click.prevent="todo"></a>
修饰符可以串联
<a  v-on:click.stop.prevent="todo"></a>
只有修饰符
<a v-on:submit.prevent></a>
添加事件时 使用捕获模式
<div v-on:click.capture="todo"></div>
只有点击了该元素本身才会有回调 
<div v-on:click.self="todo"></div>

Vue 生命周期函数
一个系统或者一个软件在运行的时候一系列过程 需要在不同的阶段触发不同的钩子函数 从而形成生命周期
生命周期可以让我们在控制整个vue实例的过程容易形成好的逻辑
beforeCreate 实例初始化之后 组件被创建期间 el data methods都还是undefined 在这个阶段data还没有实例化完成 methods也还没有实例化完成
不能使用data和mathods
【可以加入loading事件】
created 此时data和methods已经实例化好了 最早可以在这里调用 但是还没有绑定到页面中 是获取不到页面中绑定的vue数据的
【结束loading事件 推荐这个时候发送请求数据】
beforeMount 挂载之前 只要没有挂载就无法访问 dom中的vue数据

mounted 完成挂载 数据和模板渲染到页面
boforeUpdate 挂载开始之前调用 虚拟dom在起作用 这里点击数据会变化 但是页面上不会
updated 用于数据更改 重新渲染界面时调用 更新完了
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用 调用后所有东西都会被解绑

vue-resource axios（请求拦截 响拦截）

vue是数据驱动的，在vue中实现异步加载需要使用vue-resource库，vue-resource是Vue.js中的一款插件，它通过XMLHttpRequest或JSONP发起请求并进行处理。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁

首先axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
拦截器
应用场景：
1：每个请求都带上的参数，比如token，时间戳等。
2：对返回的状态进行判断，比如token是否过期
vue动画

css：
.v-enter,.v-leave-to{transform:translateX(180px)}
.v-enter-active,.v-leave-active{transition:all .3s ease;}

1.
2. //自定义前缀
3. //可以给列表添加
使用第三方类 animate.css

全局组件的创建方法

1.1 通过Vue.extend来创建全局组件 （Vue组件）

var com = Vue.extend({
    template:`<div></div>`,   //模板 制定组件要展示的html结构
    data(){
        return {
 		 }
	},
props:['']      //首先props是一个只读对象  可以给组件传递任意类型的数据 

})
1.2
Vue.component(‘mycom’,com)

2

Vue.component('mycon1',{
    template:`<div></div>`,
    data(){
        return {
            
        }
    }
})

3

<template id="temp1">
    <div>
        <p>这是外部定义的组件模板</p>
    </div>
</template>
<script>
    Vue.component('mycon2',{
        template:"#temp1"
    })
</script>

安装脚手架
前戏
cnpm i @vue/cli -g //4.x 目录名：@vue
npm i vue-cli -g //2.x 目录名：vue-cli
vue create projectName
cd projectName
npm run serve
【入口函数是main.js App是跟组件 在public引入reset.css[index.html引入] 在项目直系子目录下创建vue.config.js】

安装
cnpm install sass-loader --save-dev
cnpm install node-sass --sava-dev
安装 cnpm i vue-router --save
安装 cnpm i axios --save
安装 cnpm i mint-ui --save
安装 cnpm i compression-webpack-plugin --save
在public引入reset.css[index.html引入]
在项目直系子目录下创建vue.config.js

各个模块的引入
import

过滤器*
Vue.filter

// 第一个参数叫过滤器名字, 第二参数是函数(参数1：需要过滤的字符串,参数2：可传的形参)
Vue.filter(‘fn’,function(str,pattern=‘y-m-d’))
调用：在需要过滤的字符串后面加 | fn()

		Vue.filter('dateFormat',function(date,pattern="y-m-d"){
            var newdate = new Date(date);
            var year = newdate.getFullYear();
            var month = newdate.getMonth()+1;
            var day = newdate.getDate();
            var hour = newdate.getHours();
            var min = newdate.getMinutes();
            var sec = newdate.getSeconds();
            if(pattern && pattern.toLowerCase()=='y-m-d'){
                return `${year}:${month}:${day}`
            }else if(pattern && pattern.toLowerCase()=='h-m-s'){
                return `${hour}:${min}:${sec}`
            }
        })

$nextTick
在dom循环更新之后延迟回调 可以在数据跟新后在这里获取新的dom

axios.get('http://localhost:8888/list').then(res => {
     this.list = res.data.list
     this.$nextTick(() => {
         this.lunbo()
     })
})

MVVM模式
核心思想是数据驱动 model代表数据模型 数据和业务展示都在model层定义 view代表UI视图负责数据的展示 viewmodel通过双向数据绑定把view层和nodel层连接起来 因此view的数据变化会同步到model中 model数据的变化会反映到view上
双向数据绑定原理 通过数据劫持结合发布者订阅者模式 通过ES5 Object.defineProperty的两个方法 get set 的使用 整个流程分为三个部分
监听者Observer 劫持数据 监听数据的变化 如有变化 将通知订阅者
订阅者Watcher 收到变化时 执行方法 从而改变视图
解析器 Compile 解析编译模板指令

	<div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
    <script>
        var obj = {};
        Object.defineProperty(obj,'txt',{
            get:function(){
                return obj;
            },
            set:function(newVal){
                // document.getElementById('txt').value = newVal;
                document.getElementById('show').innerHTML = newVal;
            }
        })
        document.addEventListener('keyup',function(e){
            obj.txt = e.target.value
        })
    </script>

路由懒加载
1.正常情况下

import Hello from './components/Hello'

2.使用ES的懒加载

const Hello = ()=>import('./components/Hello')
在路由规则里 component：（）=>import ('./components/Hello')

3.require

component : resolve =>{require('[./components/Hello]',resolve)}

vue中拿到dom

<div class='box' ref='dom'>你好</div>
his.$refs.dom.style.color = 'red

路由导航守卫 （全局写入入口函数里）

router.beforeEach((to, from, next) => {
  if (getToken()) {
    next();
  }else{
    if(to.path === "/login"){
      next()    //如果没有登录 在登录页面直接放行
    }else{
      next('/login')
    }
  }
})

组件内守卫（写在组件实例里 与data平级）

beforeRouterEnter(to,from,next){  //beforeRouterUpdate  beforeRouterLeave
	if(getToken()){
		next("/index")
	}else{
		next()
	}
}

独享守卫（写在路由规则里面）

这里可设置属性 达到另一些用户体验

//根组件
<Footer v-show="$route.meta.showFooter"></Footer>
//路由规则
{
    path: '/mine',
    name: 'Mine',
    component: () => import('../views/Mine'),
    meta: {
        showFooter: true
    },
    beforeEnter: (to, from, next) => {
        if (getToken()) {
             next()
        } else {
             alert("您还没有登录")
             next('/login')
         }
    }
},