神奇的前端框架—Vue.js

Posted 2021-05-01 旋之华

内容提要：

＊ Vue快速入门；

＊ 基础、进阶、实战带你由简入深；

＊ 更好的框架开发更高效的前端项目。

前言

 一个框架的快速成长源于它有个强大的、活跃度很高的社区。

 一、Vue简介

      Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

       Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又作用域页面上的某个html元素。

  

       其核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。

    

  

 

  

  

       上图的DOM Listeners和Data Bindings是数据驱动中实现数据双向绑定的关键，实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters; 这也是Vue.js事件驱动的原理所在。

  

        对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦有变化，Model中的数据也会发生改变；

  

       对于Model而言，当我们操纵Model中的数据时，Data Bindings工具会帮助我们更改View中的DOM元素。

  

  

       此外，页面组件化也是Vue.js的核心，它提供了一种抽象，让我们可以用独立可服用的小组件来构建大型应用。

    

 

  

       所以，我们搭建的任何一个界面你可以把其抽象成为一个组件树，充分的去复用它。

思考： Vue.js和React、Angularjs、Knockout、AvalonJS的区别在哪？

Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。

Vue：是最近几年出来的一个开源javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。

 AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。

React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。

Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。

  

二、Vue快速入门   

2.1  Hello，SeeMyGo

 

代码如下：

 

        在上面代码中，我们通过new Vue()构建了一个Vue的实例。

        

        在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data），我们可以操纵数据改变视图。

  

       el表示Vue要操作哪一个元素下面的区域，比如：#app则表示操作id为app的元素下面的区域；

  

       data表示Vue实例的数据对象，data的属性能够响应数据的变化；每个 Vue 实例都会代理其 data 对象里所有的属性。

  

        我们打开浏览器的控制台输入 app.message = '大家好，我是旋之华！'，你会发现对应的HTML已经发生了改变，如下图所示：

  

        用 MVVM 的角度，来从新看待这个问题，我们会发现: Model就是data变量，ViewModel就是这里的new Vue()得到的对象。 

2.2  Vue中双向数据绑定

        MVVM模式其自身是实现了数据的双向绑定的，在Vue.js中我们可以通过指令v-model来实现数据双向绑定。

 代码如下：

 

 

 运行结果：

  

  修改后运行结果：

  

        新东西v-model，在Vue中这被称为指令，指令带有前缀v-表示它们是Vue.js提供的特殊属性。它们会在渲染过的DOM上应用特殊的响应式行为。当然，我们就把这指令当做是特殊的HTML特性(attribute)。

  

 三、Vue中常用的指令(Directives)

        带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：<div v-text="message"></div>；这里的 div 元素有一个 v-text 指令，其值为 message；Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。

        Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性；v-repeat 会基于数组来复制一个元素；v-on会绑定事件等。

        Vue.js提供了不少常用的内置指令，接下来我们快速搞定它们，这对我们接下来的开发帮助很大。主要有：

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

        如果需要了解其它指令，可以进入官网: https://vuefe.cn/v2/api/#%E6%8C%87%E4%BB%A4

3.1  v-once指令

执行一次性地插值，当数据改变时，插值处的内容不会更新。

   

 

 

3.2  v-if指令

       条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

 代码如下：

 

    

我们也可以打开控制台，做出如下输入，进一步体会数据驱动思想：

  

   

  元素渲染情况：

 

   

       在上述案例中，Vue.js进行数据绑定也完全支持JavaScript表达式支持，这些表达式会在Vue实例的数据作用域下作为JavaScript被解析。

   

    {{ number + 1 }}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}

    <div v-bind:id="'list-' + id"></div>

   

       有个限制就是，每个绑定都只能包含单个表达式，以下则不会生效：

 

   <!-- 这是语句，不是表达式 -->

   {{ var a = 1 }}

   <!-- 流控制也不会生效，请使用三元表达式 -->

   {{ if (ok) { return message } }}

  

3.3  v-show指令

     

       也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

代码如下：

  

 元素渲染情况：

   

   

v-show和v-if的区别：

       v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。

      v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

  

  

3.4  v-else指令

       可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

代码如下：

  （1）v-if和v-else结合

   

（2）v-else-if 和 v-else 结合

   

   

3.5  v-for指令

       基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 <strong>Array | Object | number | string </strong>。

  

       该指令之值，必须使用特定的语法(item, index) in items,  为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

  

代码如下：

 

    

运行结果如下：

   

   

另外v-for也可以为数组索引指定别名（或者用于对象的键）：

<div v-for="(item, index) in items"></div>

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

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

 

       v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

   

   <div v-for="item in items" :key="item.id">

    {{ item.text }}

   </div>

3.6   v-bind指令

 动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

  

v-bind:src="imageSrc"  可以缩写： :src="imgaeSrc"

:class="{ red: isRed }"  或  :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }"  或 :style="[styleObjectA, styleObjectB]" ...

 绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }" 

...

  

语法结构：v-bind:argument="expression"

  

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、php、Python、Perl 等多种编程语言中。 

  

案例实操：让HTML5学院在各大学院中处于选中状态

  

  

运行结果

  

  

3.7  v-on指令

        动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

  

常用的修饰符包括：

  

 .stop - 调用 event.stopPropagation()；停止冒泡。

    

.prevent - 调用 event.preventDefault(); 停止监听原生事件。

    

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

    

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

    

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

    

 .once - 触发一次。

  

使用手法：

    

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->

<button v-on:click.once="doThis"></button>

案例实操：

    

运行结果:

  

    

       我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。这在后面的章节中我们还会介绍。

 

   

四、Vue指令篇—综合演练

       

       结合上述指令，完成小码哥学生信息录入。主要功能有动态添加学生信息，动态删除学生信息，空值校验。

案例效果图如下：

案例代码如下：

        如果喜欢我的文章，可以关注我微博、微信公众平台、简书:旋之华，也可以来小码哥，了解下我们的ios\HTML5培训课程。后续还会更新更多内容。。。