vue2.0指不了南

零．混沌

vue是什么

vue是一套构建用户界面的渐进式框架。

他的特色：

1. 简洁：页面由HTML模板+Json数据+Vue实例组成

2. 数据驱动：自动计算属性和追踪依赖的模板表达式

3. 组件化：用可复用、解耦的组件来构造页面

4. 轻量：代码量小，不依赖其余库

5. 快速：精确有效批量DOM更新

6. 模板友好：多种方式安装，很容易融入

---

所须要储备的技术

1. 扎势的html，css,JavaScript基础知识 火狐中文社区 https://developer.mozilla.org...

2. es6相关知识 ECMAScript 6 入门 http://es6.ruanyifeng.com/#RE...

3. nodejs相关知识 npm 基本用法和实用技巧 https://github.com/theicebear...

4. webpack相关知识 webpack中文社区 https://doc.webpack-china.org/

5. 能够简单的使用命令终端

---

使用vue-cli 建立项目

---

1. node 环境安装(更新到最新)

---

2. vue-cli 脚手架安装

2.1 npm install vue-cli -g

---

3. 建立项目

3.1 vue init webpack 项目名称

---

4. 进入该目录

4.1 cd 项目名称

---

5. 安装依赖包

5.1 npm install（或者简写 i ）

---

6. 启动项目

npm run dev

---

模板语法

数据绑定最多见的形式

1. 使用 “Mustache” 语法（双大括号）的文本插值： {{msg}}

2. 使用 v-bind 在 HTML 属性中使用: <div v-bind.id="msg"><div>

一．指令

1. 内置指令

1.1 v-text:更新元素的 textContent。

<span v-text="msg"></span> 等同于 <span>{{msg}}</span>

1.2 v-html:更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会做为 Vue 模板进行编译 。

<div v-html="msg"></div>

1.3 v-show:切换元素的 display CSS 属性。

1.4 v-if:在切换时元素及它的数据绑定 / 组件被销毁并重建。

1.5 v-else:配合v-if使用。

1.6 v-else-if:配合v-if使用

<div v-if></div>
    <div v-else-if></div>
    <div v-else-if></div>
    <div v-else></div>`

1.7 v-for：基于源数据屡次渲染元素或模板块。

<div v-for="(val, key, index) in data"></div>

数组更新检测的方法有

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

   重塑数组方法

8. filter()

9. concat()

10. slice()

    注意事项

    因为 JavaScript 的限制， Vue 不能检测如下变更的数组：

11. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 解决办法 Vue.set(example1.items, indexOfItem, newValue)

12. 当你修改数组的长度时，例如： vm.items.length = newLength 解决办法example1.items.splice(newLength)

1.8 v-on：绑定事件监听器。能够简写为：@

监听当前实例上的自定义事件。事件能够由vm.$emit触发。回调函数会接收全部传入事件触发函数的额外参数。

vm.$on('test', function(msg) {
    console.log(msg)
})
vm.$emit('test', 'hi')

修饰符：

1. .stop - 调用 event.stopPropagation()

2. .prevent- 调用 event.preventDefault()。

3. .capture - 添加事件侦听器时使用 capture 模式。

4. .self - 只当事件是从侦听器绑定的元素自己触发时才触发回调。

5. .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素自己触发时才触发回调。

6. .native - 监听组件根元素的原生事件。

1.9 v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。能够简写为：:

<!-- 绑定一个属性 -->
<img v-bind:src="src">
<!-- 缩写 -->
<img :src="src">

1.10 v-model：在表单控件或者组件上建立双向绑定。

限制使用在

1. <input>

2. <select>

3. <textarea>

4. components

---

可以使用的修饰符

1. .lazy

2. .number

3. .trim

1.11 v-pre：跳过这个元素和它的子元素的编译过程。

1.12 v-cloak：保持在元素上直到关联实例结束编译。

配合 CSS 规则使用 如 [v-cloak] { display: none }

1.13 v-once：只渲染元素和组件一次。

2. 自定义指令

2.1 全局自定义指令

Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。
    inserted: function(el) {
        // 聚焦元素
        el.focus()
    }
})

2.2 局部自定义指令

二．组件

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

1. 内置组件

1.1 component ：渲染一个“元组件”为动态组件

1.2 transition ：单个元素/组件的过渡效果

1.3 transition-group ：多个元素/组件的过渡效果。

1.4 keep-alive ：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

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

2.自定组件

注意： 要确保在初始化根实例 以前 注册了组件

2.1 全局组件

Vue.component('my-component', {
  
})

2.2 局部组件

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

2.3 DOM 模版解析说明

这些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出如今其它元素内部。

2.4 data 必须是函数

2.5 组件之间的通讯- 父传子

组件实例的做用域是孤立的。

子组件要显式地用 props 选项声明它期待得到的数据：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 同样，prop 能够用在模板内
  // 一样也能够在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

向父组件传入一个普通字符串：

<child message="hello!"></child>

当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 须要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

若是你使用字符串模版，则没有这些限制。

2.6 组件之间的通讯- 子传父

使用 $on(eventName)监听事件

使用 $emit(eventName) 触发事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

2.7 组件之间的通讯- 非父子

1. 简单的场景下，可使用一个空的 Vue 实例做为中央事件总线：

2. 复杂的状况下，咱们应该考虑使用专门的 状态管理模式(vuex).

2.8 Slot 分发内容

无名 Slot

子组件 my-component 模板：

<div>
  <h2>我是子组件的标题</h2>
  <slot></slot>
</div>

父组件模版：

<div>
  <h1>我是父组件的标题</h1>
  <my-component></my-component>
</div>

渲染结果：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
  </div>
</div>

有名

三．路由

安装使用

npm install vue-router

### main.js ###

import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

### router.js ###

import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'foo',
      component: foo
    }
})

1. 动态路由匹配

2. 嵌套路由

3. 重定向 和 别名

4. 获取数据

5. 懒加载

四．状态管理

1. 状态管理模式是什么

2. 核心概念解释

2.1 State

2.2 Getters

2.3 Mutations

2.2 Actions

2.2 Moudules

3. 推荐的项目结构

五．动画