Vue2.0 | 关键知识点梳理

概念

• 来自官方的解释

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

创建Vue实例

引入方法

<script type="text/javascript" src="js/vue.min.js"></script>

创建格式

new Vue({  el: "#app" ,  data:{ 数据 : 值} , method: { func(){ 代码 }  })

Vue实例总结

• 每个 Vue 应用都是通过实例化一个新的 Vue对象开始的

模板语法

标签文本的操作

// 小胡子(Mustache)语法

// 花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，
{{data}}
 
// 以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染.
// 注意：如果{{#data}} {{/data}}中的 data 值为 null, undefined, false；则不渲染输出任何内容。
{{#data}} {{/data}}

// 该语法与{{#data}} {{/data}}类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。
{{^data}} {{/data}}

// {{.}}表示枚举，可以循环输出整个数组
{{.}}

// 以>开始表示子模块，如{{> msg}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块
{{<partials}}

// {{data}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}
{{{data}}}

// !表示注释，注释后不会渲染输出任何内容。
{{!comments}}

标签属性的操作指令

• v-bind:

  • 绑定属性值指令 ( 可以缩写为 : )

• v-on:

  • 事件属性绑定 ( 可以缩写为 @)

• v-if

  • 判断该标签元素是否显示

    • v-if v-else
    • v-if v-show

计算 和 监听属性

computed

• 进行复杂的计算 --> 更新: this.msg 取出vue实例对象的属性值

watch

• 监听属性 watch ( 改变前的值, 改变后的值 )

class 和 style 绑定

class 绑定

• v-bind : class = {对象} , [数组] , 对象引用

// {对象}
<div v-bind:class="{ active: isActive }"></div>

//  [数组]
<div v-bind:class="[activeClass, errorClass]"></div>

// 对象引用
<div v-bind:class="classObj"></div>

style 绑定

• v-bind : {JS对象} , 对象引用 , [数组]

// {JS对象} 
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// 对象引用
<div v-bind:style="styleObj">

//[数组]
<div v-bind:style="[baseStyles, overridingStyles]"></div>

• 标签的属性位置可以使用{}, 不能使用小胡子语法{{ }}

条件渲染

v-if v-else v-else-if v-show

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

列表渲染

v-for = “item in items” --> 遍历列表中的数据

v-for = "( value, key, index ) in object"   --> 遍历一个对象

事件处理

事件绑定

v-on : click   -->  @click

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

表单双向绑定

v-model : 双向数据绑定, 只能作用于表单元素

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

过滤器

概念

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

• filter 是 vue 中的过滤器, 过滤器顾名思义就是把数据进行过滤
• 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

...

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

自定义指令

概念

• 指令是用来做dom操作的，如果vue现有的指令不能满足开发要求, 我们可以创建自定义指令 (directive )
• 举个聚焦输入框的例子，如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

实例生命周期

数据交互

概念

• vue.js没有集成 ajax 功能，可以使用vue官方推荐的 axios.js 库
  来做ajax的交互 ( 不能跨域 )

格式

• axios完整写法

  • 执行 get / post 请求的 两种书写格式

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.aabbcc.com/v1/bpi/something.json')
      .then(response => (this.info = response))
  }
})

ES6

概念

• ES6 是 JavaScript 语言的新版本，它也可以叫做 ES2015，之前学习的 JavaScript 属于 ES5，ES6 在它的基础上增加了一些语法

新增语法

• let

  • 声明一般变量

• const

  • 声明常量

• 箭头函数 =>

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

• 模块导入import 和 导出 export

// export app.js
export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

// import
import { myLogger, Alligator } from 'app.js';

VUE组件

概念

• 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

• 所有的 Vue 组件同时也都是 Vue 的实例

• 单页应用(SPA)

  • 就是将系统所有的操作交互限定在一个web页面中, 整个系统在切换不同功能时，页面的地址是不变的

创建和使用

• Vue.component( 组件名, 组件内容 )

• template属性

  • 展示组件html标签内容

• data属性

  • data属性 需要一个函数来返回值

• prop属性

  • prop属性 用数组来给组件传递数据

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

单文件组件

• 概念

  • 将一个组件相关的 html 结构，css 样式，以及交互的 JavaScript 代码从 html 文件中剥离出来，合成的一个vue文件, 这种文件的扩展名为“.vue.
  • 优点 : 相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用

• 格式

  • template script style

    单文件组件有三部分:

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

本文完