Vue 笔记（二）

不吃西红柿w
155 阅读2分钟

1. 访问元素 & 组件

  • 访问根元素：可以通过 $root property 进行访问。
  • 访问父级组件实例： $parent property 可以用来从一个子组件访问父组件的实例。
  • 访问子组件实例或子元素： 可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。通过this.$refs.ID进行访问。 2. 依赖注入

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property。

作用是大范围、隔 N 代共享信息。

3. 混入 mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 当组件和混入对象含有同名选项时，以组件数据优先。作用是减少 options 里的重复。

4. 自定义指令

声明全局指令：Vue.directive('x', directiveOptions)。

声明局部指令：new Vue({ ..., directives: { "x": directiveOptions } })。v-x 只能用于该实例中。

一个指令定义对象可以提供如下几个钩子函数 ：

  • bind(el,info,vnode,oldVnode)：只调用一次，指令第一次绑定到元素时调用。
  • inserted(参数同上)：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update(参数同上)：所在组件的 VNode 更新时调用。
  • componentUpdated(参数同上)：指令所在组件的 VNode及其子 VNode全部更新后调用。
  • unbind(参数同上)：只调用一次，指令与元素解绑时调用。 作用： 主要用于 DOM 操作（主要目的是原生DOM操作），减少重复。

5. vue-router的使用

  • 安装
npm install --save vue-router
  • 引用
import router from 'vue-router'
Vue.use(router)
  • 配置路由文件，并在 Vue 实例中注入
var rt = new router({ 
    routes:[{ 
        path:'/',//指定要跳转的路径 
        component:HelloWorld//指定要跳转的组件 
    }] 
}) 
new Vue ({ 
    el: '#app', 
        router:router, 
        components: { App }, 
        template: '<App/>' 
})
  • 确定视图加载的位置
<router-view></router-view>
  • vue-router 路由的跳转
<router-link to="/helloworld">HELLO WORLD</router-link>
  • vue-router 重定向
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
  • vue-router 路由参数的传递
  1. 通过$route.params.id读取参数
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})
  1. 通过 props 解耦
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})
  1. 函数模式：你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})

更多查看 vue-router文档

6. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。目的是为了可以使多个组件可以共享同一状态并且对它进行变更。

  • 安装并引入vuex，通过 use 方法使用它
  • 创建状态仓库
  • 你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
  • 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
  • Mutation 必须是同步函数
  • Action 类似于 mutation，不同在于：
  1. Action 提交的是 mutation，而不是直接变更状态。
  2. Action 可以包含任意异步操作。 Action 通过 store.dispatch 方法触发：
store.dispatch('increment')

更多查看 Vuex文档

avatar
文章
阅读
粉丝