vue

VUE

  • Vue :数据驱动的M V Vm框架

  • m :model(后台提供数据),v :view(页面),vM(模板)

  • 流程

    • m-》vm-》v
    • m与vm之间通过ajax axios实现数据交互(前后端数据交互)
    • vm(前端拿到数据后,对数据进行处理)
    • v(数据改变后,页面改变)
  • 兼容

    • ie9及其以上(Vue使用Es5)
    • ie8用的是es3
  • 注意

    • 不要将body、html作为挂载点
    • 新建一个div作为挂载点
    • 一个页面中尽量只有一个挂载点
    • 插值等同{{}}{{}},只能与标签内使用)
    • 等同于innerHTML,innerTEXT
    • 慎用innerHTML(会执行之内的代码->xxs攻击)
    • 指令需要放在标签的属性中使用
    • 指令中的双引号会提供一个js运行环境("变量、简单运算")双大括号{{}}具有相同的功能
    • v-text插入的变量作为字符串处理
    • v-html除非是信任的内容不然不要使用
  • v-show控制元素的显示隐藏

    • 初始开销较大,dom一直存在与结构中 如果是需要经常切换的dom 推荐使用该指令
    • v-show只是css级别的显示隐藏=》display:none
    • 在vue中想要显示或隐藏
      • 给data中添加一个属性,其值为布尔类型
      • 将对应值添加个v-show指令
      • 控制这个布尔值,以达到控制显示隐藏的目的
      • true==显示,flse==隐藏
  • v-if

    • 切换开销较大 false情况下 dom不会被渲染
    • v-if是html结构级别的隐藏,直接将对应标签删除
    • v-if、v-else-if、v-else和js中的if else else if一样的(只能满足一级要求,其后不再执行)
  • v-for

    • 用于遍历数组或对象
    • v-for="item in items"
    • v-for="item,index in items" 项+索引 数组
    • v-for="value in items" 值 对象
    • v-for="value,key in items" 键+值 对象
    • v-for="value,key,index in items" 键+值+索引 对象
    • v-for="自定义名字 数组名"
    • v-for可以遍历出index
    • 对象遍历(不常用)
      • v-for="value in 对象名"
      • v-for="(value,key) in 对象名"
      • v-for="(value,key,index) in 对象名"
    • 要遍历那个标签就将指令写给那个标签
    • 建议所有使用v-for指令的标签都添加上:key="惟一值"(后期使用,不建议使用index(虽然也是唯一的))
    • key vue渲染原理 复用元素 没有key的话 当数据顺序发生变化时 如果没有绑定key 只会更新数据(元素不会更新,dom复用)
    • 不建议同时使用v-for和v-if v-for拥有更高的优先级
  • v-bind:绑定

    • 根据数据改变标签的属性(src,href)
    • 将标签的属性与data中的变量绑定
    • v-bind:src="data中的变量名"(将src与data中对应的变量名绑定,当数据改变时,src中的值也随之改变)
    • 使用非常广泛=》简写成为:属性名="data中的变量"
    • 如果要修改标签中的所有属性,可以绑定data中的对象,对象中的属性名,与标签中的属性一一对应(也可以添加其他属性)(可以更方便快捷的改变标签中的多个属性,或添加属性)
    • :style=""->改变标签css样式
      • 阔以是对象,但是值必须加引号(指令双引号间为js执行环境)
    • :class=""->添加类名
      • :class="[box,box1,{box2:flag}]"
      • :class="{class:flag}"
      • 绑定类名可以与普通class属性共存
        • <span class="class1" :class="{class2:flag1}"></span>
  • v-model:双向绑定

    • 上述方法只能实现,数据改变之后,页面内容随之改变,但数据不会在页面内容改变之后随之改变(即单项绑定)
    • 页面内容改变是(form表单元素),Vue数据改变
      <input type="radio" v-model="" v-bind:value="0">
    
    • 将input中的值value绑定为数字0,(指令中的双引号间为js运行环境),再将input与Vue中的数据,双向绑定,其后可以得到值为数字Number类型
  • v-on:绑定事件

    • v-on后跟事件名,等于函数名(methods对象中的方法),有实参加括号,无实参可省略括号
    • 可以通过this.data中的属性名,获取对应的数据
    • v-on:click="",双引号中可直接对data中的数据进行修改
    • v-on:click="methods方法名",由于使用较多,所以向v-bind一样具有缩写,@click="函数名(实参)"
  • 修饰符

    • v-on:click="methods中的方法名"==@click="methods中的方法名"
    • 事件触发具有冒泡机制,如何禁止-》修饰符
    • @click.stop=""=>阻止冒泡
    • @click.prevent=""=>阻止浏览器默认行为

三了解

  • v-pre:跳过标签编译过程,提升性能

    `<pre>`
      内部代码
      回车
      浏览器编译后
      就是回车
    `</pre>`
    
  • v-clock

    ```<style>
      [v-clock] {
        display:none
      }
    </style>
    ```
    
    • 加载完成之前,具有v-clock的标签隐藏
    • Vue编译完成之后,自动清楚v-clock
  • v-once

    • 只在页面第一次渲染是调用数据
    • 之后不会在跟随数据发生变化

生命周期

四大生命周期

  • 顺序(钩子函数的执行顺序,与data同级)
    • 创建-create
      • beforeCreate:创建前(无data中的数据,只有该阶段无法访问到data中的数据)(数据于创建完成之后进行初始化)
      • created:创建完成后
    • 挂载-mount(app.$mount(""))(不用el:"#app"挂载的话,可以用$mount挂载)
      • beforeMount:挂载之前
      • mounted:挂载之后
    • 更新-update(数据发生改变)
      • beforeUpdate:更新之前
      • updated:更新之后
    • 销毁-destroy
      • beforeDestroy:销毁之前(app.$destroy()强制销毁)
      • destroyed:销毁之后
  • 注意
    • 创建和挂载的四个钩子函数只会调用一次
    • 更新周期对应的两个钩子函数,只要数据发生改变就会触发
  • data
    • vue中的数据时响应式的 所以需要在初始化Vue是将需要响应的变量提前声明
  • Object.freeze()
    • 属性放进去,vue不会对其进行追踪变化了
  • v-once
    • 执行一次性的插值 数据改变时,插值处的内容不在更行

计算属性-computed(对象与data同级)

  • 当遇到比较复杂的语句时,可将其写在computed中
  • computed中的函数不可以调用,而是将其函数名写在{{中}},将其作为data中的属性名
  • 创建时与methods一致,用法与data中的数据一致,对象!!!!
  • 实质:将computed计算的结果return到页面中**
  • 当多次调用同一个computed方法时,会存在缓存问题**,当需要实时更新数据时,可以使用methods(避免缓存)

监听-watch(对象与data同级)

  • watch:{要监听的值的名字(){},要监听的值的名字:{handler(){},deep:true,//可以监听对象内部属性的改变 immediate:true//页面加载后立马执行第一次监听函数}}
  data:{

  },
  watch:{
    //第一种方法(无法监听到对象内部数据变化)
    msg(newValue,oldValue){
      //data中的属性名+()+{},如果msg是对象的话,无法监听对象内属性的变化
      //监听函数有两个参数,分别为新值和旧值
      console.log(newValue,oldValue)
      //该方法无法监听到对象中的数据,只能在变量内存储的地址发生改变时触发(引用类型,栈中存放的是指针,堆中的地址)
    }
    //第二种方法(第一种方法的变形)
    msg:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)//data中的非对象数据,能够监听变化,并且存在两个数据,即新数据,旧数据
        //仍然监听不到对象中数据的变化
      }
    }
    //第三种方法(添加对应参数)
    msg:{
      handler(){
        console.log("发生了变化")
      },
      deep:true,  //是否监听对象内部数据的变化
      immediate:true  //是否与数据初始化之前设置监听函数
    }
  }
  (详见)[https://cn.vuejs.org/v2/guide/list.html]
  /* 
    由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

    当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:vm.items.length = newLength
    ----vm.items[indexOfItem] = newValue
    // Vue.set
      Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
      vm.items.splice(indexOfItem, 1, newValue)
    
    Vue 不能检测对象属性的添加或删除
      
   */

过滤器-filters(对象,data同级)

过滤器的应用范围

  • 双花括号插值和v-bind表达式
  • 过滤器的作用是,对对应的值进行处理-{{数据 | 过滤器名}}
  • v-bind可以添加{{可以添加}}v-text不可以添加
  • 过滤器函数中的参数就是 | 之前的对应的数据,过滤器函数中需要返回新的内容才能显示在页面中(即,过滤器函数中需要存在return)
  • 过滤器可以用多个{{数据 | 过滤器1 | 过滤器2 | 过滤器n}}--(过滤器的添加顺序不同(对数据的处理顺序不同,可能造成,处理后数据结果不同))

组件

  • 创建
    • complate组件模板
    • vue组件分为两种,一种为全局组件,一种为局部组件,组件需要注册才能使用
    • 注册:Vue.component("组件名",组件配置对象)---》一般将 组件配置对象提取出来,外部配置
  • 使用组件
    • 要在父组件的组件模板中使用对应的组件标签
    • <组件名></组件名>
  • 局部注册
    • 局部注册需要在对应组件中添加components属性
    const 组件名={
      template:"",
      components:{
        局部组件名:组件配置对象//这个组件就只能在当前组件的模板中使用
        //相当与在对应父元素组件中实现注册,为局部组件,只能在该组件中调用,否则报错
      }
    }
  • 注意
    • 组件模板中只能有一个根节点
    • 组建的配置对象,一定、一定、一定要放在其注册之前
    • 组件中可以写出el对象外的几乎所有属性
    • 组件中的data为函数,需要将数据return出去,然后可以正常使用,其他无异常
    • 可以通过将组件标签,添加到其父组件的complate中,实现
    • 往组件中添加数据,只能在其对应的complate中添加,在html结构标签中无法添加内容&&将其添加到其父元素的complate中后无法修改其数据
    • 因为HTML不区分大小写,所以在HTMl模板中,标签需要写成纯小写,驼峰命名变成-连字符连接

通信方式

  • 父子通信

    • 父->子
      • 父子组件通信基本步骤

        1. 在子组件中添加props(对象)
          配置对应prop的名字
        2. 找到对应父组件模板中的子组件标签
          在标签上添加对应prop的名字作为属性 后边跟着要传递的值

        第二步可以传递静态值(固定值) 也可以传递动态值,data中的值
        区别就在于加不加v-bind

        • 注意
          • props:["prop名1","prop名2",……]---》第一种写法,可以有多个prop,即数据通路

          • props:{prop名字:String}/props:{prop名字:[String,Number]}-->即允许传输的数据类型,可以有多个

          • props:

            {prop名字:{type:允许类型,default:默认值,validator(value){验证数据,true//验证通过,否则报错},required:true}}---->type(允许传输的数据类型),default(无传输数据时的默认值),validator(验证传输数据是否满足条件),required:true(true,则该项为必须传输项目)(与default有冲突,有默认项时,即使无数据传输,默认值将作为数据,是否必填无关紧要)
            
      • props中的prop名,可以直接当做data中属性(数据)使用

      • 遍历数组时,需要添加:key="惟一值即可"

    • 子->父
  • 非父子通信

    main.js中 空vue载体
    Vue.prototype.$bus=new Vue()
        在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以
         $ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
         通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 $_appName 或 ΩappName,来避免和插件或未来的插件相冲突。
    
     需要进行通信的组件
     import $bus from '../../../main';
    
     this.$bus.$on('upload',payload=>{ do somthing })  //先监听
    
     this.$bus.$emit('getPayload',payload)  //后触发
    

修饰符

  • 事件修饰符,为v-on提供了事件修饰符
    • stop
      • 阻止冒泡
    • prevent
      • 阻止默认行为
    • capture
      • 捕获阶段执行??
    • self
      • event.target 当前元素自身触发时执行函数
    • once
      • 只执行一次
    • passive
      • addEventListener(type,handler,useCapture)-->addEventListener(type,handler,{capture:false,passive:false,once:false})-->是否捕获,是否'顺从'???,是否只执行一次监听(之后自动removeEventListener)
      • passive提高流畅性能
      • 调用preventDefault()无效
  • 按键修饰符,为v-on在监听键盘事件时添加按键修饰符
    • enter .13
    • tab
    • delete
    • esc
    • space
    • up
    • down
    • left
    • right
    • 可以通过全局config.keyCode对象自定义按键修饰符别名
  • 系统修饰键,尽在按下相应按键时才触发鼠标或键盘事件的监听器
    • ctrl
    • alt
    • shift
    • meta
  • exact修饰符允许你控制由精确的系统修饰符组合出发的事件,ctrl+shift等组合键
  • 鼠标按钮修饰符
    • left
    • right
    • middle

路由router

  • 前后端都能够实现根据url的不同,跳转至指定页面,但实现原理不同
  • 四步骤
    • 一 创建组件配置对象
    • 二 创建routes配置对象(必须是routes,否则虽然不报错,但是也不会有效果)
    • 三 创建router实例(new VueRouter)
    • 四 将router添加进Vue中
  • <router-view></router-view>(url对应的组件,将替换掉该组件,即该组件不会显示到页面中)
    • <router-link to="/" tag="li">,该标签渲染到页面中时会被a标签替换,to中将会是替换后的url,tag可以改变渲染后router-link的结果(可以改变成为其他标签,通过js实现相应的链接跳转),激活状态的链接会具有router-link-active(该类名不够精确)---》推荐使用router-link-exact-active来为激活状态的标签添加对应的类名
    • linkExactActiveClass:'active',通过该全局配置,实现类名的替换var router=new VueRouter({//new VueRouter大括号中为全局配置 linkExactActiveClass})
    • 点击对应router-link标签,to到新的url后,显示对应的组件,实现页面的跳转(数据的改变)但域名不会改变

动态路由

    1. 配置路由时可以使用动态路由{path:"/a/:id"}
    • 通过$route.params.id来获取对应的id,根据id获取数据,并改变显示内容
    • 通过为$route设置监听函数,来实现当url改变时,发送新的请求,获取数据后渲染到页面的操作,可以为其添加immediate属性,实现页面首次加载就发出请求
    • 如果动态路由想要使用a标签跳转,必须给路由添加一个name属性并使用名字进行跳转
      • <router-link :to="{path: '/demo', params: {id: 1}}">链接</router-link>
    1. 使用?id=xx的形式--query
    • 配置路由时使用基本配置方式
    • 将query值添加到路由的最后使用?xx=值的形式添加?xx=值&xx=值
    • 通过$route.query.xx来获取

动态路由与静态路由的区别

  • 二者无实质区别(都是根据url不同,获取数据渲染到页面中)
  • 获取方式的差别
    • 动态路由获取--$route.params.xxx与配置对象中routes[{path:"/:xxx"}]--只需要xxx一致即可---当使用router-link :to="{name:'',params:{xxx:''}",只需要v-bind:to即可,否则获取到的是字符串--(需要使用name)
    • 静态路由--$route.query.xxx与链接中router-link to="/?xxx=xx"

原理

  • 通过切换url,获取数据,更换div中的内容
  • 后端为主--原始模式
    1. 查找dns服务器,dns服务器返回对应的ip地址
    2. 根据ip地址找到服务器
    3. 服务器后台根据url提取数据
    4. 根据提取的数据去数据库中查找数据
    5. 将数据渲染到模板中的页面
    6. 返回浏览器
    • 前端只负责提供静态页面模板,供后端渲染数据
  • 前端为主--Vue--M、V、VM
    1. 查找 dns服务器,dns服务器返回对应的ip地址
    2. 根据ip地址找到服务器
    3. Vue根据传来的url提取数据
    4. Vue根据数据发送请求(ajax请求),将查询数据发送给后台
    5. 后台接受到数据后,查询数据,返回查询到的数据
    6. Vue接收到数据后,渲染到模板中
    7. 浏览器显示
  • 优缺点
    • 前端渲染
      • 速度快,减轻服务器压力,交互较好(loading等),不借助某些技术无法进行seo优化
    • 后端渲染
      • 便于seo优化,访问到的内容都在页面中

动态路由

  • 动态路由获取
    • 模板中
      • $route.params.x
    • js
      • this.$route.params.x
    • watch
      • to.params.x
  • 重定向
    • a跳转到b
      • 给a设置redirect--》b的路由
  • 别名
    • 当访问/a时,实际访问到的内容为b时,url显示为/a
      • 应该给/b加alias"/a"
  • 命名视图
    • 同级展示多个视图,而不是嵌套展示,可以使用命名视图
    • 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件

路由组件传参

  • 在组件中使用$route会使之与对应路由形成高度耦合,从而使组件只能在某些特定的url上使用,限制了灵活性,可使用props将组件和路由解耦
  • { path: '/user/:id', component: User, props: true }routes中设置props为true时,默认传递$route.params
    • 组件配置对象中,可直接添加props属性,为其添加所需prop即可(如:id、tab等)
  • 你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
    • { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
    • 该返回对象将作为属性,传递给对应组件

HTML5 History模式

  • 使用history模式,可以使得URL像正常url(去掉#号)

导航守卫--》路由导航守卫--》路由钩子函数

  • 所有的路由都会经过全局导航守卫,所以在网页需要登录等操作才能访问时使用**
  • this.$route.query.xxx---->js函数中通过,获取url中查询字符串信息,此处为跳转至该页面的源页面
  • 通过this.$router.push(url)---->实现跳转至来时页面---》即登录过后跳转至页面
  • router.beforeEach((to,from,next)=>{}),(from来源,to去向,next守卫),to.fullPath(其中存放着url路径及查询字符串)
  • meta属性routes中添加对应属性,to.matched其中存放着当前网页的路径,以及其祖先url信息,可在其中找到对应的meta,运用数组some方法(存在该meta,即需要验证的页面)

全局解析守卫

  • beforeEach**
  • 类似router.beforeEach
  • 区别,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

全局后置钩子

  • afterEach((to,from)=>{})
  • 只有to,from**,不接受next函数,也不会改变导航本身

路由独享守卫

  • beforeEnter**
  • 在路由配置(routes)上直接定义
  • 与全局前置守卫的方法参数一样

组件内守卫

  • beforeRouteEnter
    • 在渲染该组件的对应路由被confirm前调用
    • !不能 !获取组件实例this----可以通过beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined console.log(to, '组件独享守卫beforeRouteEnter第一个参数'); console.log(from, '组件独享守卫beforeRouteEnter第二个参数'); console.log(next, '组件独享守卫beforeRouteEnter第三个参数'); next(vm => { //因为当钩子执行前,组件实例还没被创建 // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。 console.log(vm);//当前组件的实例 }); }---vm---vue官方使用--vue的实例---间接使用this
  • beforeRouteUpdate--2.2新增
    • 在当前路由改变,但是该组件被复用时调用--即虽然路由改变,但访问的仍然是同一个页面
    • 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    • // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    • 可以访问组件实例 this
  • beforeRouteLeave
    • 导航离开该组件的对应路由时调用
    • 可以访问组件实例this

完整的导航解析流程--官方(并非所有步骤都会执行)

  1. 导航被触发
  2. 在失活的组件里调用离开守卫
  3. 调用全局的beforeEach守卫
  4. 在重用的组件里调用veforeRouteUpdate
  5. 在路由配置里调用beforeEnter
  6. 解析异步路由组件
  7. 在被激活的组件里调用beforeRouteEnter
  8. 调用全局的beforeResolve守卫
  9. 导航被确认
  10. 调用全局的afterEach钩子
  11. 触发DOM更新
  12. 用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数

守卫与生命周期钩子函数的执行顺序

  • 全局 3
    • beforeEach
    • beforeResolve
    • afterEach
  • 路由独享 1
    • beforeEnter
  • 组件内 3
    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave
  • 导航守卫和声明周期钩子函数的执行先后顺序
    • 访问路由时
      • 全局守卫beforeEach先执行
      • 路由独享守卫beforeEnter执行
      • 组件内守卫beforeRouteEnter执行
      • 全局解析守卫beforeResolve执行
      • 最后全局后置守卫afterEach执行
      • 声明周期钩子函数执行
  • 切换路由时,如果路由是动态路由

    • 全局守卫beforeEach调用
    • 组件内守卫beforeRouteUpdate调用
    • beforeResolve调用
    • afterEach
    • // 如果数据也发生了变化,在路由结束后触发
    • beforeUpdate
    • updated
  • 切换路由时,路由不同

    • from befreRouteLeave
    • beforeEach
    • to 路由独享守卫beforeEnter
    • to 组件内守卫 beforeRouteEnter
    • 全局解析守卫beforeResolve
    • 全局后置守卫 afterEach
    • to 组件生命周期钩子,知道to组件创建完成
    • 销毁from的组件
    • to 组件挂载
  • 当组件切换时,先创建新组件,当新组件beforeMount(生命周期钩子函数-挂载前)之后,才销毁旧组件,旧组件销毁后,新组件被挂载

  • 生命周期钩子函数永远在路由afterEach之后执行

过渡动效

  • 过渡动效
    • 为router-view标签,添加transition标签
  • 单个路由的过渡
    • 给路由组件设置过渡效果,路由组件内使用transition,并设置不同的name属性
  • 基于路由的动态过渡
    • 基于当前路由与目标路由的变化关系,动态设置过渡效果
    • 基于路由变化使用对应的name值,实现路由不同,过渡效果的不同
  • Vue在插入、更新或则移除DOM时**,提供多种不同方式的过渡效果
    • 在css过渡和动画中自动应用class
    • 配合使用第三方css动画库,如Animate.css
    • 在过渡钩子函数中使用JavaScript直接操作DOM
    • 配合使用第三方JavaScript动画库,如Velocity.js
  • 单元素/组件的过渡
    • 条件渲染(使用v-if
    • 条件展示(使用v-show
    • 动态组件
    • 组件根节点

  • 当插入或删除包含在transition组件中的元素时
    1. 自动嗅探目标元素是否应用了css过渡或动画,如果是,在恰当的时机添加/删除css类名
    2. 如果过渡组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用
    3. 如果没有找到JavaScript钩子并且也没有检测到css过渡/动画,DOM操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和Vue的nextTick概念不同
  • 类名-六个class
    1. v-enter:定义过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除
    2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除,这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数
    3. v-enter-to:2.1.8版及以上定义进入过渡的结束状态,在元素被插入之后下一帧生效(于此同时v-enter被移除),在过渡/动画完成之后移除
    4. v-leave:定义离开过渡的开始状态,在离开过渡被触发时立刻生效,下一帧被移除
    5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数
    6. v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除),在过渡/动画完成之后移除
    • 对于这些过渡中切换的类名来说,如果使用一个没有名字的<transition>,则v-是这些类名的默认前缀。如果使用了<transition name="my-transition">,那么v-enter会替换为my-transition-enter,即替换为transition标签中的name属性的值
  • 自定义过渡的类名
    • enter-class === v-enter
    • enter-active-class === v-enter-active
    • enter-to-class === v-enter-to
    • leave-class === v-leave
    • leave-active-class === v-leave-active
    • leave-to-class === v-leave-to
    • 添加到transition标签中,修改对应类名
    • 他们的优先级高于普通的类名,这对于Vue的过渡系统和其他第三方css动画库,如Animate.css结合使用十分有效
    • 不再需要为transition标签添加name属性
  • 同时使用过渡和动画
    • Vue 为了知道过渡的完成,必须设置相应的事件监听器。它可以是 transitionend 或 animationend ,这取决于给元素应用的 CSS 规则。如果你使用其中任何一种,Vue 能自动识别类型并设置监听。

    • 但是,在一些场景中,你需要给同一个元素同时设置两种过渡动效,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。在这种情况中,你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型

Vueg插件

  • 为webApp提供转场特效的开源Vue插件
  • Vueg

Vuex-状态管理模式

  • 借鉴The Elm ArchitectureReduxFlux,与其他模式不同的是,Vuex是专门为Vue.js设计的状态管理库,以利用Vue.js的细粒度数据响应机制来进行高效的状态更新

  • 什么情况下使用Vuex

    • 如果不开发大型单页应用,使用Vuex可能是繁琐冗余的
    • 如果应用够简单,最好不要使用Vuex,简单的store模式足够了
  • Vuex与单纯的全局对象的区别

    1. Vuex的状态存储是响应式的,当Vuex组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应的得到高效更新
    2. 不能直接改变store中的状态,改变store中的状态的唯一途径就是显示的提交(commit)mutation,这样使得我们方便的追踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好的了解我们的应用
  • State

    • 可以在需要使用store中数据的组件的computed中新建对应state中数据的方法,将state中的数据返回即可直接使用computed:{msg(){return this.$store.state.xxx}}
    • mapState-辅助函数
      • 当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余,使用mapState辅助函数帮助我们生成计算属性
      • computed:mapState({count:state=>state.count,countAlias:"count"})-->使用箭头函数可使代码更简练,但有时为能使用this获取局部状态,必须使用常规函数--但是这种写发造成非store相关数据无法写入
      • 对象展开运算符
        • 使用对象展开运算符将此对象混入到外部对象中computed:{localComputed(){},...mapState({})}
  • Getter

    • 从store的state中派生出一些状态
    • getter接收state作为第一个参数,也可以接收其他getter作为第二个参数
    • 通过让getter返回一个函数,实现getter传参,getter在通过方法访问时,每次都会进行调用,而不会缓存结果
  • Mutation--提交

    • 更改Vuex的store中的状态的位移方法是提交mutation。Vuex中的mutation非常类似于事件,每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且会接受state作为第一个参数
      • 触发。this.$store.commit('xx')
      • 提交载荷(payload)。mutations:{xxx(state,n){}}--state作为第一个参数,第二个参数为载荷,大多数情况下载荷应该是一个对象
      • 对象风格的提交。this.$store.commit({type:'xxx',cs:xx})--type即为mutations中的事件名,其他均为参数
    • Mutation需遵守Vue的响应规则
      1. 最好提前在store中初始化所有所需属性
      2. 当需要在对象上添加新属性时,应该:
        • 使用Vue.set(obj,'newProp',123),或者
        • 以新对象替换老对象。state.obj={...state.obj,newProp:123}
    • 使用常量替代Mutation事件类型
      • 使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使linter之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个app包含的mutation一目了然 ,--即将mutation中的事件名作为一个对象的属性存入对象中[obj.name]作为mutation中的事件名,可以更直观的了解各事件的功能
    • Mutation必须是同步函数
    • 在Vuex中,mutation都是同步事物
  • Action--分发

    • Action类似于mutation,不同之处在于:
      1. Action提交的是mutation,而不是直接变更状态
      2. Action可以包含任意一步操作
    • actions:{xxx(context){context.commit('xxx')}}--actions中处理的都是异步操作,改变数据时最后一步都是调用mtation即context.commit()
    • 使用参数解构/解构赋值来简化代码(特别是需要调用commit很多次的时候)--actions:{xxx({commit}){commit('xxx')}}--通过结构复制直接得到context中的commit调用mutation中对应的事件处理
    • 触发
      • this.$store.dispath('xxx')
    • 因为mutation中只能执行同步操作,所以只能通过actions内部执行异步操作后调用mutation--actions:{xx({commit}){setTimeout(()=>{commit('xxx')},1000)}}--一秒后调用commit('xx')执行mutation中的对应处理事件
    • Actions支持同样的载荷方式和对象方式进行分发
  • module

    • 模块中有自己的state,将其放入store的modules中后,其state会变成rootState(最外层store中的state)
      • this.$store.state.模块名 //这就是对应模块中的state对象
    • getters最终会变成root中的getters
      • module={getters:{getter名字(state,getters,rootState,rootGetter){}}}--state是当前模块的状态,rootState是根store的state
      • 如果没有namespaced:true属性那么getter就是rootstore的getter,如果有该属性getters就是模块中的getter,第四个参数rootGetter才是全局中全部的getter
      • this.$store.getters.getter名字
      • 如果给模块添加namespaced:true那么对应的getter,mutation,action都会变成“对应模块名/对应名字”--区分rootstore与模块中的getter,mutation,action
      • 如果模块中有namespaced属性,那么commit('mutation')只能触发模块内的mutation
        • 如果在commit第三个参数中添加{root:true}-则触发的是全局的mutation--commit('mutation名字',payload,{root:true})--dispatch同理
      • 模块创建
        • new Vuex.Store({modules:{模块名:{}}})
        • 分开--const module={} new Vuex.Store({modules:{模块名:module}})
        • 模块中也有state,getters,mutations,actions,modules
        • 单个模块当做一个store即可
          • state
            • this.$store.state
              • 模块中的state
                • this.$store.state.模块名
          • getters,actions,mutations--直接会添加到rootstore中的对应位置
          • 如果给模块添加namespaced:true
            • name对应的getters,mutations,actions会变成 模块名/名字 的形式,并且可以与rootstore中的姓名重合,因为名字之前带有各自模块名
              • 同时,直接在模块中commit('mutation')/dispatch('action'),默认提交/分发的是模块中的mutation/action
              • 想要调用全局,需要在之后加上{root:true}
                • commit('mutation',payload,{root:true})
                • dispatch('action',payload,{root:true})
          • 辅助函数如果想要使用命名空间模块中的内容
            • mapState({msg:state=>state.模块名.msg})
            • mapState('模块名',['msg'])
  • 代码

  var store = new Vuex.Store({
    state:{

    },
    mutations:{

    },
    getters:{

    },
    actions:{

    }
  })
  this.$store.state.xx  //获取state中存储的数据
  • input v-model处理方法**
    • 详见Vuex-表单处理
    • 当页面中存在input等表单元素时,需要使用v-model,但store中state无法与computed直接修改
    • 所以将computed的书写格式写成computed:{msg:{get(){//获得state中的数据},set(value){//value 当页面中form表单中的数据发生变化时触发,值即为修改后的数据 可在此提交mutation修改state中的对应数据 this.$store.commit('setMsg',value)}}}
    • computed对象中的get方法用来获取store里state中的数据,显示到页面,而set方法中的value则为页面中表单数据发生变化后的值,可在触发后将值作为载荷提交mutation修改state中的数据
  • axios拦截器**
    • 在请求或响应thencatch处理前拦截它们
    • 对发送前数据添加token,或设置请求头,验证等
    • 对响应数据做处理,剥离外层结构等
    //添加请求拦截器
    axios.interceptors.request.use(function(config){
      //在发送请求之前做些什么
      return config;
    },function(error){
      //对请求错误做些什么
      return Promise.reject(error);
    });
          // axios.interceptors.request.use(config=>config,error=>Promise.reject(error))
    //添加响应拦截器
    axios.interceptors.response.use(function(response){
      //对响应数据做点什么
      return response;
    },function(error){
      //对响应错误做点什么
      return Promise.reject(error);
    })
          /*
            axios.interceptors.response.use(response=>response,error=>Promise.reject(error))
          */

keep-alive

  • 切换组件外层添加<keep-alive></keep-alive>可以缓存组件的状态,当再次切换后显示之前的状态--默认情况下组件被v-if隐藏后经历destroy周期,再次显示时触发create,mount周期,不会保留之前的访问状态
  • 属性
    • include 符合条件的组件会被缓存
      • 字符串
        • 逗号隔开组件
      • 正则
        • 符合比正则表达式的会被缓存--v-bind:include
      • 数组
        • ['组件名','组件名']
        • v-bind:include
    • exclude与include相仿,符合条件的不会被缓存
  • Props:
    • include-字符串或正则表达式,只有匹配的组件会被缓存
    • exclude-字符串或正则表达式,任何匹配的组件都不会被缓存
  • 用法
    • <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象的组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。当组件在<keep-alive>内被切换,它的activateddeactivated这两个声明周期钩子函数将会被对应的执行
    • 主要用于保留组件状态或避免重新渲染
    • include、exclude--匹配检查先检查组件自身的name选项,如果name选项不可用,则匹配他的局部注册名称(父组件components选项的键值)。匿名组件不能被匹配
    • activated--keep-alive组件激活时调用
    • deactivated--keep-alive组件停用时调用
    • 由于keep-alive的组件缓存,切换组件时不会触发对应的destroy,create,mount周期函数

ref

  • ref可以添加在组件或者html标签上
  • 可以通过this.$refs.自定义名字获取
  • created生命周期中无法获取DOM,因为created时页面还没有渲染
  • ref加在html标签上,得到对应的DOM对象
  • ref加载组件标签上,得到的是对应组件的组件对象

nextTick

  • this.$nextTick(()=>{//这里的代码会在每次更新后,页面DOM更新后才会触发})

对象操作

  • 如果对象某个值不存在,先要添加新的值,并试数据响应--不能使用app.对象.新属性=值
  • 需要使用Vue.set方法
    • Vue.set(对象,'属性','值')
    • app.$set(对象,'属性','值')
    • Vue.delete(对象,'属性')
    • Vue.$delete(对象,'属性')

自定义指令

  • 想要对DOM元素进行原生操作时,可以使用自定义指令
  • Vue.directive('指令名(不加v-)',{})
  • 自定义指令共5个钩子函数
    • bind
    • inserted
    • update
    • componentUpdated
    • unbind
  • 参数
    • el 指令绑定的元素的DOM对象可以直接操作DOM
    • binding
      • name 指令名
      • value 指令后等于的值 v-指令名='value'
      • oldValue 仅在update和componentUpdated中存在
      • expression 指令表达
      • arg 参数 v-on:click click就是参数
      • modifiers v-on:click.stop stop就是修饰符
        • 修饰符可以有多个,所以修饰符是一个对象
      • vnode Vue 产生的虚拟节点
      • oldVnode 上一个虚拟节点

slot插槽

  • 正常情况下template中,标签中的内容会被忽略,而slot标签相当于,预留的插槽,可以实现内容的正常显示
  • 在两slot标签中的内容会被当做默认值,即当后期不插入内容时,显示默认值
  • 优点:方便后期组件使用,和更改对应信息

具名插槽-name属性

  • slot标签有多个时,为避免混乱,可以为其添加name属性
  • 当使用时,可以在标签中添加slot属性,其值为对应slot名-(造成多余标签)
  • 可以通过<template slot="slotname"></template>来实现,该标签不会显示在页面中

默认内容

  • 当在slot标签之间填写内容时,会被当做默认内容,当不在组件标签之间填写内容时,显示默认内容,填写则覆盖默认值
  • 具名标签slot标签之间添加默认内容无效
  • 具名插槽会与具有slot属性的标签一一对应,多余的内容会在不具名slot中统一显示,如果不存在该标签,则内容舍弃

作用域插槽(flot-scope="自定义名字")

  • 改变从子组件获取的数据结构???

  • 创建组件时

    • 在slot标签上添加的属性
    • <slot 数据名="值" 数据名2="值2"></slot>
    • 使用组件时,会出现在组件标签内部的slot-scope上
      <组件标签>
      • div slot-scope="自定义名字"">
      • // 自定义名字就是一个对象,对象上包含了所有的slot标签上的属性
      • /div>
      • </组件标签>
  • 作用域插槽的意义

    • 将数据给对应的组件,让使用组件的人可以自定义组件的模板

@click==v-on:click

  • 写在template中的v-on:click(click事件)可以正常触发
  • 但是,当写在组件标签中时,会被当做是监听(自定义事件名)**
  • 所以**,如果想要在组件标签中写@click事件,可以使用修饰符.native--》声明该click为原生click事件
  • 或者在template中,为@click添加自定义事件,即子到父通信,可传递数据,否则无法触发click事件**

Element UI-》组件库

vue-cli

  • 命令行工具
    • Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档
    • 安装步骤
      • cnpm install -g vue-cli--(全局安装vue-cli)
      • vue init list name path--(初始化 vue init list(模板类型-通过vue-list查看) name(项目名) path(不写,默认为当前路径))
      • vue init webpack + 项目名称(不能包含大写)
    • 创建
      • ? Project name 输入项目名称

      • ? Project description 输入项目描述

      • ? Author 作者

      • ? Vue build 打包方式,回车就好了

      • ? Install vue-router? 选择 Y 使用 vue-router,输入 N 不使用

      • ? Use ESLint to lint your code? 代码规范,推荐 N

      • ? Setup unit tests with Karma + Mocha? 单元测试,推荐 N

      • ? Setup e2e tests with Nightwatch? E2E测试,N

    • 运行
      • 进入对应文件,路径
      • cnpm install--(安装所需组件)
      • npm start/npm run dev
    • 编写
      • sc--快捷生成template script style结构
    • 插件
      • Vetur

推荐阅读更多精彩内容