仿豆瓣APP项目之二:Vue全家桶的使用

二、Vue全家桶的使用
1、vue框架
vue框架的重点在于组件化和可重用性。
一般vue写的组件分为两类:(1)业务型组件(直接视图层);(2)通用型组件
一定要将组件挂载到根组件上。
vue写组件根据组件最最重要的是直线 组件间的通信,如何实现组件间的通信呢??有四种方式:
(1)通过props属性
这一方法主要是实现父子间组件的通信
直接在父组件的<子组件 props=''>这种方式给子组件传值
props是定义在子组件上的属性值
(2)通过自定义事件
这一方法主要是实现父子间组件的通信

每个 Vue 实例都实现了事件接口,即:

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件
  • 不能用 $on 侦听子组件释放的事件,而必须在模板里直接用 v-on 绑定
<img  src = "../assets/search.png"   style = "width: 26px; height: 26px;"   class = "search"   @click = " showTalion " >

(3)  使用空的vue实例作为事件总线
(4)复杂情况使用状态管理模式vuex
主要是在数据很多,且不同组件之间存在数据共用情况时使用

常用的还有 slot插槽口概念

slot

  • Props

    • name - string,用于命名插槽。
  • Usage

    <slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

使用插槽分发内容
(1)具名插槽
(2)匿名插槽
除非子组件模板包含至少一个  <slot>  插口,否则父组件的内容将会被 丢弃
<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
需要注意的是:
 
  
<child-component>
{{ message }}
</child-component>

message 应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。组件作用域简单地说是:

父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

还有一点要注意的是vue框架的生命周期


需要注意的是:
beforeCreate
  • 类型Function

  • 详细

    在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

  • 类型Function

  • 详细

    在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

    beforeMount

    • 类型Function

    • 详细

      在挂载开始之前被调用:相关的 render 函数首次被调用。

      该钩子在服务器端渲染期间不被调用。

      beforeMount

      • 类型Function

      • 详细

        在挂载开始之前被调用:相关的 render 函数首次被调用。

        该钩子在服务器端渲染期间不被调用。

        beforeUpdate

        • 类型Function

        • 详细

          数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

          你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

          该钩子在服务器端渲染期间不被调用。

          updated

          • 类型Function

          • 详细

            由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

            当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

            注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

             
                            
            updated: function () {
            this.$nextTick( function () {
            // Code that will run only after the
            // entire view has been re-rendered
            })
            }

            该钩子在服务器端渲染期间不被调用。

          activated

          • 类型Function

          • 详细

            keep-alive 组件激活时调用。

            该钩子在服务器端渲染期间不被调用。

            deactivated

            • 类型Function

            • 详细

              keep-alive 组件停用时调用。

              该钩子在服务器端渲染期间不被调用。

              beforeDestroy

              • 类型Function

              • 详细

                实例销毁之前调用。在这一步,实例仍然完全可用。

                该钩子在服务器端渲染期间不被调用。

                destroyed

                • 类型Function

                • 详细

                  Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

                  该钩子在服务器端渲染期间不被调用。

                  errorCaptured

                  2.5.0+ 新增

                  • 类型(err: Error, vm: Component, info: string) => ?boolean

                  • 详细

                    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

2、Vuex状态管理模式
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分:

  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。
(1)state
state中存放的是某些组件会通用的数据,要在组件中用这些数据,一般是在组件的computed属性中去获取。
每当  store.state.count  变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
(2)getters
从 store 中的 state 中派生出一些状态
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 会暴露为 store.getters 对象
(3)mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)
使用常量代替mutation事件类型
mutation 必须是同步函数
(4)actions

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
Action 通过  store.dispatch  方法触发

你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

import { mapActions } from 'vuex'
(5)Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

对于模块内部的 mutation 和 getter,接收的第一个参数是 模块的局部状态对象
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
3、vue-router2
关于路由常用的一个是路由的渲染<router-view></router-view>,另一个是路由跳转<router-link></router-link>
常用的有:
(1)动态路由匹配
(2)嵌套路由
(3)命名路由:方便在<router-link></router-link>的:to时实现跳转
(4)命名视图
(5)重定向
router API
详见官网:https://router.vuejs.org/zh-cn/

猜你喜欢

转载自blog.csdn.net/qq_35585701/article/details/79382126