Vue.js项目开发实战最新章节_张帆著

1.5　Vue.js的主要特性

Vue.js作为一个流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue.js所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。本节将介绍Vue.js的5大特性。

1.5.1　组件

组件是Vue.js最强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue.js中，组件是基础HTML元素的拓展，可方便地自定义其数据与行为。

【示例1-3】下面是Vue.js组件的一个示例。

<div id="app">
<!--定义显示的节点-->
  {{ message }}
</div>
<script>
//逻辑部分代码，建立Vue实例
var app = new Vue({
  el: '#app',
  data: {
//定义相关的变量
    message: 'Hello Vue!'
  }
})
</script>

注意：读者不用太在意是否能看懂此处的代码，此处的目的是让读者先适应这种写法，之后本书会对技术进行逐章讲解。

代码的显示效果如图1-22所示。

图1-22　显示效果

上述是一个简单的Hello Vue示例，只是通过一个简单的bind操作将JavaScript中的内容绑定在<div></div>标签内部。

【示例1-4】如果开发者想要在所有的项目页面中都显示一条Hello Vue的提示，那么需要将此处代码注册成一个全局组件。具体的代码如下：

<!--引入需要的Vue.js等相关的内容-->
<script src="https://unpkg.com/vue"></script>
<div id="app">
<!-- 定义显示的节点 -->
 <my-component></my-component>
</div>
<script>
//注册
Vue.component('my-component', {
  template: '<div>Hello Vue!</div>'
})
//创建根实例
new Vue({
  el: '#app'
})
</script>

显示效果如图1-23所示。

图1-23　以组件方式显示

1.5.2　模板

Vue.js使用基于HTML的模板语法，允许开发者将DOM元素与底层Vue.js实例中的数据相绑定。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue.js将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue.js能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

注意：如果读者熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不用模板，直接编写渲染（render）函数，使用可选的JSX语法即可。

1.5.3　响应式设计

越来越多的智能移动设备（Mobile、Tablet Device）加入到互联网中，移动互联网不再是独立的小网络，俨然成为了Internet的重要组成部分。响应式网络设计（RWD/AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（甚至超大）的不同分辨率的屏幕。

响应式界面的4个层次：

·同一页面在不同大小和比例上看起来都应该是舒适的；

·同一页面在不同分辨率上看起来都应该是合理的；

·同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

·同一页面在不同类型的设备（手机、平板电脑、计算机）上，交互方式应该是符合用户习惯的。

而作为专注于显示前端效果的Vue.js，其本身提供的大多数控件和内容都是基于响应式的设计。不仅如此，为了方便众多的开发者便捷使用，Vue.js衍生出了很多美观又简洁的UI组件库，而这类UI组件库是完全支持响应式设计的。

所以说，作为一个合格的Vue.js程序开发者，在进行应用开发时，必须要考虑到其UI的响应式设计，让用户在不同尺寸和分辨率的屏幕及设备上能够拥有一致而优良的体验。

1.5.4　过渡效果

Vue.js在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果，包括以下工具：

·在CSS过渡和动画中自动应用class；

·可以配合使用第三方CSS动画库，如Animate.css；

·在过渡钩子函数中使用JavaScript直接操作DOM；

·可以配合使用第三方JavaScript动画库，如Velocity.js。

Vue.js提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加entering/leaving过渡。

·条件渲染（使用v-if）；

·条件展示（使用v-show）；

·动态组件；

·组件根节点。

简单来说，可以在用户进行操作或者和页面元素进行交互时，提供良好且适当的用户体验效果。

【示例1-5】页面交互举例。

<!--引入需要的Vue.js等相关的内容-->
<script src="https://unpkg.com/vue"></script>
<!-- 样式规定 -->
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /*.fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
</style>
<!-- 定义显示的节点 -->
<div id="app">
<!--在节点中定义click方法-->
  <button v-on:click="show = !show">
    click
  </button>
<!-- 效果显示部分 -->
  <transition name="fade">
    <p v-if="show">hello Vue</p>
  </transition>
</div>
<script>
// 创建根实例
new Vue({
  el: '#app',
// 定义绑定在标签中的变量
  data: {
    show: true
  }
})
</script>

其显示效果如图1-24所示。单击click按钮之后，Hello Vue会渐变地消失，其实是因为样式的更改，当再次单击之后，样式的fade会随着添加或者删除而产生渐变效果，以便所有的用户操作或内容的显示不再是突兀地出现或者消失。

图1-24　过渡效果

1.5.5　单文件组件

为了更好地适应复杂的项目，Vue.js支持以.vue为扩展名的文件来定义一个完整组件，用以替代使用Vue.component注册组件的方式。开发者可以使用Webpack或Browserify等构建工具来打包单文件组件。该特性带来的好处主要是将来对于上线的引用，在通过压缩工具和基本的封装工具之后，可能只有一个文件，这极大的减少了对于网络请求多个文件带来的文件缓存或延时问题。

1.5 Vue.js的主要特性

1.5.1 组件

1.5.2 模板

1.5.3 响应式设计