学习笔记： 自定义指令

自定义指令

自定义指令的注册方法分为 全局注册 和 局部注册 ，比如注册一个 v-focus 指令，用于在 <input> 、 <textarea> 元素初始化时自动获得焦点，两种写法分别是：

//全局注册
Vue.directive('focus', {});

//局部注册
new Vue({
    el: '#app',
    directives: {
        focus: {}
    }
});

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。 Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

为了应用过渡效果，需要在目标元素上使用 transition 特性：

<div v-if="show" transition="my-transition"></div>

学习笔记： Vue.js基础知识

基础知识

构造函数Vue的根实例 new Vue({}) ，并启动Vue应用。

    
    
    var app = Vue({
        el: "#app",
        data: {},
        methods: {}
    });

学习笔记： 方法与事件

方法与事件

@click调用得方法名后可以不跟括号 () ，如果该方法有参数，默认会将原生事件对象 event 传入。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。

**最重要的是，当viewModel 销毁时，所有的事件处理器都会自动销毁，无需自己处理。 **

学习笔记： 前端开发文档

计算属性

所有的计算属性都以函数的形式写在Vue实例中的 computed 选项内，最终返回计算后的结果。

计算属性的用法

在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果即可。

计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

每一个计算属性都包含一个 getter 和一个 setter 。

学习笔记： 函数化组件

函数化组件

Vue提供了一个 functional 的布尔值选项，设置为 true 可以使组件无状态和无实例，也就是没有 data 和 this 上下文。这样用 render 函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

使用函数化组件时，Render函数提供了第二个参数 context 来提供临时上下文。组件需要的 data 、 prop 、 slots 、 children 、 parent 都是通过这个上下文来传递。比如 this.level 要改写为 context.props.level ， this.$slots.default 改变为 context.children 。

组件系统

组件可以扩展 HTML 元素，封装可重用的代码。

vue.js的核心组件：

1. 模板（template） ——模板声明了数据和最终展现给用户的DOM之间的映射关系。
2. 初始数据（data） ——一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。
3. 接受的外部参数（props） ——组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式声明为双向绑定。
4. 方法（methods） ——对数据的改动操作一般都在组件的方法内进行。可以通过 v-on 指令将用户输入事件和组件方法进行绑定。
5. 生命周期钩子函数（lifecycle hooks） ——一个组件会触发多个生命周期钩子函数，比如 created 、 attached 、 destroyed 等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为 Controller 的逻辑被分散到了这些钩子函数中。
6. 私有资源（assets） ：Vue.js当中将用户自定义的 指令 、 过滤器 、 组件 等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
7. 除此之外，同一棵组件树之内的组件之间还可以通过 内建的事件API 来进行通信。Vue.js提供了完善的定义、复用和嵌套组件的API，让开发者可以像搭积木一样用组件拼出整个应用的界面。这个思路的可行性在Facebook开源的React当中也得到了印证。

函数化组件

Vue提供了一个 functional 的布尔值选项，设置为 true 可以使组件无状态和无实例，也就是没有 data 和 this 上下文。这样用 render 函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

使用函数化组件时，Render函数提供了第二个参数 context 来提供临时上下文。组件需要的 data 、 prop 、 slots 、 children 、 parent 都是通过这个上下文来传递。比如 this.level 要改写为 context.props.level ， this.$slots.default 改变为 context.children 。

路由设计

本则路由考虑验证进入登录页面，完成登录操作进入首页。
router/router.js

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

import store from "@/store/store";

// (延迟加载)
const Login = () => import("@/views/login");
const Home = () => import("@/views/home");

const HomeRoute = {
  path: "/",
  name: "首页",
  component: Home
};

export { HomeRoute };

const router = new Router({
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/login",
      name: "登录",
      component: Login
    },
    HomeRoute
  ]
});

router.beforeEach((to, from, next) => {
  let loginName = store.state.user.loginName;
  if (to.path === "/" && loginName == "") {
    next("/login");
  } else {
    next();
  }
});

export default router;

学习笔记： Render函数

Render函数

Vue2 与 Vue1 最大的区别就在于 Vue2 使用了虚拟 DOM 来更新 DOM 节点，提升渲染性能。

Vue2 与 Vue1 最大的区别就在于 Vue2 使用了虚拟 DOM 来更新 DOM 节点，提升渲染性能。