Vue.js 快速入门与专业应用

发表于 | 分类于

摘抄自： 《 Vue.js 前端开发- 快速入门与专业应用》

Vue.js 快速入门与专业应用

Vue.js 简介

Vue.js 的组件化理念和 ReactJS 异曲同工——“一切都是组件”，可以将任意封装好的代码注册成标签，例如:Vue.component('example', Example)，可以在模板中以 <example></ example> 的形式调用。

Vue.js 的使用都是通过构造函数 Vue({option}) 创建一个 Vue 的实例: var vm = new Vue({})。一个 Vue 实例相当于一个 MVVM 模式中的 ViewModel。

在实例化的时候，我们可以传入一个选项对象，包含数据、模板、挂载元素、方法、生 命周期钩子等选项。

基础特性

模板

el :类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。

template :类型为字符串。默认会将 template 值替换挂载元素(即 el 值对应的元素)， 并合并挂载元素和模板根节点的属性(如果属性具有唯一性，类似 id，则以模板根节点为准)。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
  <p>123</p>
</div>

<script id="tpl" type="x-template">   <div class='tpl'>
   <p>This is a tpl from script tag</p>   </div>
</script>

<script type="text/javascript">
  var vm = new Vue({    el : '#app',
   template : '#tpl'   });
</script>

Vue 实例中需要有一个根元素，模板的定义只能有一个根元素，建议模板定义如下：

1
2
3
4
5
6
7
<script id="tpl" type="x-template">
  {' '}
  <div class="wrapper">
    <div class="tpl">...</div>
    <div class="tpl"> ...</div>
  </div>
</script>

Vue 实例通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。需要注意的是传入 data 是一个对象，那么 Vue 实例会代理起所有 data 对象中的所有属性，而不会对传入的对象进行深拷贝。

可以通过 Vue 实例 vm 中的 $data 来获取声明数据，需要注意的是，只有初始化传入的对象才是响应式的，在声明完实例后再增加的属性，将不会是响应式的

Vue 推荐在初始化的时候将所有的变量都设定好，如果没有值，额可以用 undefined 或null 占位。

另外，组件的实例可以通过 props 获取数据，同 data ，也需要在初始化时预设好。
通过 methods 对象来定义方法，并使用 v-on 指令来监听 DOM 事件

Vue 实例也支持自定义事件，可以在初始化时传入 event 对象，通过实例的 $emit 方法进行触发。这套机制常在组件间相互通信的情况中，例如子组件冒泡触发父组件事件方法，或者父组件广播某个事件，子组件对其进行监听等。（⚠️ Vue 2.x 中已经废弃 events 属性，不再支持事件广播，推荐直接使用 Vue 实例的全局方法 $on()/$emit()， 或者使用插件 vuex 来处理）

生命周期

Vue 实例在创建时有一系列初始化步骤，例如建立数据观察，编译模板，创建数据绑定等，这些过程中，可以通过生命周期钩子函数

  • beforeCreate() : 在实例开始初始化时同步调用，此时数据观测、事件都尚未初始化
  • created()：在实例创建之后调用，此时已经完成数据绑定、事件方法，但尚未开始 DOM 编译，即未挂在到 document
  • beforeMount():
  • mounted(): 在编译结束时调用，此时指令已经生效，数据变化已经能触发 DOM 更新，但不保证 $el 已插入文档
  • beforeDestroy(): 在开始销毁实例时调用，此时实例仍然有效
  • destroyed(): 在实例被销毁之后调用，此时所有的绑定和实例指令都已经解绑，子实例也被销毁。
  • beforeUpdate(): 在实例挂载之后，再次更新实例（例如更新 data）时会调用该方法，此时尚未更新 DOM 结构
  • updated(): 在实例挂载之后，再次更新实例并在实例更新完 DOM 之后被调用
  • activated():2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动态组件初始化渲染的过程中调用该方法。
  • deactivated() :2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动 态组件移出的过程中调用该方法。

  • 数据绑定，Vue 的核心是一个响应式的数据绑定系统，简历绑定后， DOM 将和数据保持同步，这样就无需手动维护 DOM，使代码能够更加简洁易懂、提升效率。

  • 指令，可以理解为当表达式的值发生改变时，会有些特殊行为作用到绑定的 DOM 上，指定通常直接书写在模板的 HTML 元素中，而为了有别于普通的属性， Vue 是带有前缀的 v- 属性

  • 表单控件，Vue 中提供 v-model 的指令对表单元素进行双向绑定，在修改表单元素值的同时，实例 vm 中对应是属性值也会同时更新，反之亦然。

1
2
3
4
5
6
7
8
<input type="text" v-model="message" />
<span>Your input is : {{ message }}</span>

<label><input type="radio" value="male" v-model="gender "> 男 </lable>
<label><input type="radio" value="female" v-model="gender "> 女 </lable>
<p>{{ gender }}</p>

// gender 值即为选中的 radio 元素的 value 值。

⚠️ 声明周期流程图中包含了模板的渲染顺序

Class 与 Style 绑定
class 属性，我们绑定的数据可以是对象和数组，绑定修改的是元素的 class 属性，内联样式绑定，style 属性绑定数据的内联样式。

1
2
3
4
5
<div v-bind:style="alertStyle"></div> data : {
  alertStyle : {
   color : 'red',
   fontSize : '20px'  }
}

数组语法，允许将多个样式绑定到同一个元素上

1
<div v-bind:style="[ styleObjectA, styleObjectB]" .></div>

自动添加前缀，在使用 transform 这类属性时，v-bind:style 会根据需要自动添加厂商前缀

条件渲染，Vue.js 提供 v-if，v-show，v-else，v-for 这几个指令来说明模板和数据间的逻辑关系，这基本就构成了模板引擎的主要部分。

template 标签用法，Vue.js 提供了 template 标签，我们可以将指令作用到这个标 签上，但最后的渲染结果里不会有它。

事件绑定与监听
通过 v-on 可以绑定实例选项属性 methods 中的方法作为事件的处理器，v-on：后参数接受所有的原生事件名称。

同一元素上也可以通过 v-on 绑定多个相同事件函数，执行顺序为顺序执行
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">

修饰符
Vue 为指令 v-on 提供了多个修饰符，方便我们处理一些 DOM 事件的细节，并且修饰符可以串联使用

  • .stop: event.stopPropagation()
  • .prevent: event.preventDefault()
  • .capture: 使用 capture 模式添加事件监听器
  • .self: 只当事件是从监听元素本身触发时才触发回调

指令

指令是 Vue 中一个重要的特性，重要提供一种机制将数据的变化映射为 DOM 行为。在 Vue 中通过数据驱动，一般情况不会直接修改 DOM，通过大量内置的指令进行 DOM 操作，也可以开发自定义指令。

  • v-bind: 主要用于动态绑定 DOM 元素属性，即属性实际的值是由 vm 实例中 data 属性提供的
  • v-model: 用于表单控件
  • v-if / v-else/ v-show: 展示对应模板内容
  • v-for: 模板渲染
  • v-on: 事件绑定
  • v-text: 作用是更新元素的 textContent，闪现问题？⚠️
  • v-HTML：作用是更新元素的 innerHTML
  • v-el：为 DOM 元素注册一个索引，使得可以直接访问 DOM 元素
  • v-ref： 类似于 v-el，只不过这是作用域子组件上，实例可以通过 $refs 访问子组件
  • v-pre：跳过编译这个元素和子元素，现实原始双花括号
  • v-cloak：官方推荐可以和 css 规则 [v-cloak]{ display :none } 一起使用，可以隐藏未编译的 Mustache 标签直到实例准备完毕。<div v-cloak></div>
  • v-once: 用于标明元素或组件只渲染一次

过滤器

过滤器本质是一个函数，接受管道符前面的值作为初始值，同时也能接受额外的参数，返回值为经过处理后的输出值。多个过滤器可以串联。

1
{{ message | filterA 'arg1' 'arg2' }} {{ message | filterA | filterB}}

双向过滤器，在写回 data 绑定属性中的过滤器，成为双向过滤器。

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="text" v-model="price | cents" >
// 该过滤器的作用是处理价钱的转化，一般数据库中保存的单位都为分，避免浮点运算 Vue.filter('cents', {
  read : function(value) {
   return (value / 100).toFixed(2);
 },
  write : function(value) {
   return value * 100;
 }
});
var vm = new Vue({   el : '#app',
  data: {
   price : 150  }
});

过渡

过渡系统是 Vue 为 DOM 动画效果提供的一个特性，它能在元素从 DOM 中插入或移除时触发 CSS 过渡（transition）和动画（animation），也就是说在 DOM 元素发生变化时为其添加特定的 class 类名，从而产生过渡效果。除了 CSS 过渡外，Vue.js 的过渡系统也 支持 javascript 的过渡，通过暴露过渡系统的钩子函数，我们可以在 DOM 变化的特定时机对 其进行属性的操作，产生动画效果。

组件

组件注册 var MyComponent = Vue.extend({ ... });，这样我们获得了一个组件构造器，但现在无法直接使用这个组件，需要将组件注册到应用中。Vue 提供了两种注册方法，分别是全局注册和局部注册。

全局注册，需要在根实例初始化之前注册，这样才能使组件在任意实例中被使用。

1
Vue.component('my-component', MyComponent);

对于组件的命名，W3C 规范是字母小写且包含一个短横杠“-”。

局部注册，限定了组件只能在被注册的组件中使用，而无法在其他组件中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var Child = Vue.extend({
  template: '<p>This is a child component</p>'
});
var Parent = Vue.extend({
  template: '<div> \
   <p>This is a parent component</p>     <my-child></my-child> \
   </div>',
  components: {
    'my-child': Child
  }
});

<div>
  <p>This is a parent component</p>
  <p>This is a child component</p>
</div>;

组件接受的选项大部分与 Vue 实例一样，区别

  • data 属性，通过函数返回
  • 也就是说子组件的模板和模块中是 无法直接调用父组件的数据，所以通过 props 将父组件的数据传递给子组件，子组件在接受数 据时需要显式声明 props，
1
2
3
4
5
6
Vue.component('my-child', {
  props : ['parent'],
  template: '<p>{{ parent }} is from parent'
})
<my-child parent="This data"></my-child> //-> <p>This data is from
parent </p>

组件间通信
Vue.js 在组件间通信这一部分既提供了直接访问组件实例 的方法，也提供了自定义事件机制，通过广播、派发、监听等形式进行跨组件的函数调用。

  • $parent: 父组件实例。
  • $children: 包含所有子组件实例。
  • $root: 组件所在的根实例。

自定义事件触发机制

  • $emit: 在实例本身上触发
  • $dispatch: 派发事件，事件沿着父链冒泡，并且在第一次触发回调后自动停止，除非触发函数明确返回 true，才会继续向上冒泡
  • $broadcast:广播事件，事件向下传递给所有后代

自组件索引

  • this.childre
  • 子组件定义指定 v-ref 父组件获取子组件 this.$refs.first

Vue.js 常用插件

Vue-router
vue-router的基本作用就是讲每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

Vue-resource
所以这里就和大家介绍下 Vue.js 的插件 Vue- resouce，它同样对异步请求进行了封装，方便我们同服务端进行数据的交互。

Vue-devtools:它可以在 chrome 的开发者模式下直接查看当前页面的 Vue 实例的组件结构和内部属性，方便我们直接观测。

状态管理 VueX

Vuex 是状态管理模式的一种实现库，主要以插件的形式和 Vue.js 进行配合使用，能够 使我们在 Vue.js 中管理复杂的组件事件流。