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. 推荐的项目结构

五.动画

    原文作者:资深bug创意
    原文地址: https://segmentfault.com/a/1190000008900710
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞