vue

作者: wudongyu | 来源:发表于2018-11-15 11:12 被阅读0次

    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

    相关文章

      网友评论

          本文标题:vue

          本文链接:https://www.haomeiwen.com/subject/htoefqtx.html