vue 时间控件_从零玩转Vue全家桶（一）

各位同学大家好，从今天起李南江公众号正式营业了，内容包括前端、Go语言等但不局限于硬技能的学习，还包括就业面试、升职加薪、审美设计、程序员周边轶事等内容。有用的、有质量的、有趣的都会呈现。

点点关注不迷路，江哥带你上高速。

本次开篇系列文章为Vue.js的学习，《Vue全家桶+项目实战》和《手写Vue全家桶》系列课程已完结，请在官网www.it666.com上点击查看学习哦。

vue 介绍

1.Vue 背景知识

1.1 Vue 命名及由来

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 框架由华人尤雨溪开发，思路是提取 Angualar 中自己喜欢的部分，构建出一款相当轻量的框架。Vue 和 Vue.js 是同一个东西。

1.2 MVVM 风格开发框架

百度百科上面对于尤雨溪的简介：丰富了 mvvm 的前端开发模式。

MVVM(Model View ViewModel)是一种基于前端开发的架构模式，它不仅是简单的 MVC 分层模式，而是将 View 端的显示和逻辑分离开。其核心是提供对 View 和 ViewModel 的双向数据绑定，使得一方更新(例如 Model 改变)时可自动传递到另一方(View 随之改变)，即所谓的数据双向绑定。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 JavaScript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。ViewModel 是 Vue.js 的核心，它是一个 Vue 实例。下图描述了在 Vue.js 里面 ViewModel 是怎样和 View 及 Model 进行交互的。

1.2.1 双向绑定原理

如上图，把当中的 DOM Listeners 和 Data Bindings 看作两个工具，它们是实现双向绑定的关键。当 View 层中的 DOM 元素和 Model 中的数据绑定成功后，ViewModel 中的 DOM Listeners 工具会帮我们监测 View 层中的 DOM 元素的变化，如果有变化则 Model 中的数据也进行同样的变化，反过来当 Model 中的数据更新时，Data Bindings 工具则会帮我们更新 View 层中的 DOM 元素。

1.2.2 代码中的双向绑定

在vue.js中可以使用v-model指令在、 及 元素上创建双向数据绑定

"app">

{{name}}

type="text" v-model="msg">
    {{msg}}








• 解析：通过使用v-model指令把{{msg}}和文本框进行绑定。在创建 Vue 实例时，传入了一个选项对象。选项对象的el属性指向View，data属性指向Model，如此就实现了双向绑定。这样当{{msg}}和文本框一方更新，则另一方也会做同样的更新。
• 效果：在文本框更换内容时，随后的文字也会修改

1.2.3 MVVM 模式的优点

• 视图层低耦合

  视图(View)可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

• 各种代码写成控件之后可重用

  可以把一些视图逻辑放在一个 ViewModel 里面成为多重可以组合的控件，在具体的页面中进行整合和使用，让更多 View 重用这段视图逻辑。

• 可以交由前端工程师独立开发

  开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计，通过相应的接口规范可以简单地进行整合。

• 便于测试和部署

  界面向来是比较难于测试的，而现在测试可以针对具体的页面控件来写，也可以在不依赖于后端的基础上，直接通过工具或者假数据进行测试。

1.3 几种模式介绍

1.3.1 MVC(Model View Controller)模式

MVC 是比较直观的架构模式，即用户操作 →View(负责接收用户的输入操作)→Controller(业务逻辑处理)→Model(数据持久化)→View(将结果反馈给 View)。

1.3.2 MVP(Model View Presenter)模式

MVP 是把 MVC 中的 Controller 换成了 Presenter(呈现)，目的就是为了完全切断 View 跟 Model 之间的联系，由 Presenter 充当桥梁，做到 View-Model 之间通信的完全隔离。

1.3.3 MVVM(Model View ViewModel)模式

如果说 MVP 是对 MVC 的进一步改进，那么 MVVM 则是思想的完全变革。MVVM 是将“数据模型数据双向绑定”的思想作为核心，因此在 View 和 Model 之间没有联系，而是通过 ViewModel 进行交互，而且 Model 和 ViewModel 之间的交互是双向的，因此视图数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到 View 上。

2.Vue 安装和使用

2.1 下载.js 文件用标签引入

使用 Vue.js 可以通过引入标签的方式进行引入，因为 Vue.js 相当于 JavaScript 中的一个库，其使用的方式和 jQuery 一样。

官方提供了两种不同的版本供用户和开发者选择：

• 用于开发和测试环境的开发版；
• 用于生产环境的最小压缩版，也就是 Mini 版。和其他 JavaScript 插件的形式一致，使用．min.js的版本为最小压缩版，直接使用．js的环境为正式版。

! 开发环境不要用最小压缩版本

打开网址https://vuejs.org/js/vue.js可以看到Vue.js开发版本，保存到桌面再建立一个index.html，采用引入本地文件即可。

2.2 CDN 引入

CDN(Content Delivery Network，内容分发网络)其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定，通过在网络各处放置节点服务器，构成在现有的互联网基础之上的一层智能虚拟网络。

(此处应该有一道前端性能优化面试题)

CDN 系统能够实时地根据网络流量和各节点的连接、负载状况，以及到用户的距离和响应时间等综合信息，将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可以就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。

一般的网站利用 CDN 加速静态文件和资源，可能甚至引用的更多，这样将资源文件与业务代码一锅炖的方式适用于小型的、应用服务器压力并不大的系统(如并发、带宽、存储空间、资源等)。

CDN 方式的优点是开发省力、发布省力、对服务器要求小、省钱、没有具体公网接入需求。许多小型、内部使用型的网站系统往往采取这种形式放置资源文件。

国内常用的、免费的、前端开源的 CDN 加速服务的地址为http://www.bootcdn.cn/

复制链接地址或者直接复制 标签即可

html>
"en">
  
    "UTF-8" />
    Vue使用
    
    
    
    
  
  
    

"app">

{{ name }}

{{ msg }}


    
  



2.3 NPM 安装

1.安装 NodeJS

NodeJS 相关知识在官网(www.it666.com)《从零玩转 NodeJS 核心+原理》课程有说到，这里不再赘述。

2.安装 Vue 和 Vue-cli

npm install vue
npm install --global vue-cli

3.测试是否安装成功

vue -V

4.创建一个基于 webpack 的项目，名称为 my-project

vue init webpack my-project

使用 cd 命令进入项目，安装项目依赖，

cd my-project
npm install

5.运行

npm run dev

2.3.1 目录结构

• build 文件夹保存 webpack 的基本配置，或打包命令的打包配置和工具。
• config 文件夹保存项目基本配置、相关测试、生产环境的启动端口等。
• node_modules 是 npm 加载的项目依赖的模块。
• src 是开发者编写业务代码的目录。
  • assets：用来放置图片或者其他静态资源。
  • common：用来存放字体文件和通用的样式文件。
  • components：用来放组件文件。
  • router：放置项目中的路由
  • App.vue：项目入口文件。
• static 文件夹用来放置静态资源目录。
• index.html：首页入口文件。
• package.json：项目配置文件。

3.Vue 实例、数据、方法

以下例子均采用方式一安装使用 Vue.js

3.1 Vue 实例

Vue.js 的使用都是通过构造函数Vue({option})创建一个 Vue 的实例，每一个new Vue()都是一个 Vue 构造函数实例，这个过程叫函数的实例化。

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

3.2 Vue 实例的数据和方法

el：类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。一般来说我们会使用 css 选择符，或者原生的 DOM 元素。例如 el:'#app'。

实例化 Vue 对象需要在 data 中定义数据，data 可以是一个 JavaScript 对象。

"app">

{{name}}

{{msg}}

{{website}}






通过选项属性 methods 对象来定义方法，并且可以使用 v-on 指令来监听 DOM 事件

"app">"alert">Click me






方法中传递参数使用

"app">"sayAge('18')">click






带返回值的方法

"app">

{{display()}}






结语：本章先带大家领略一下 Vue.js 的风采，后面会说到 Vue 的灵魂——“模板”和生命周期函数、计算属性和函数的区别、插值语法、指令的使用等等。

后面也会更新typescript相关学习笔记，欢迎留言想看的内容，趁早给大家提上日程。也欢迎各位小伙伴登陆知播渔官网(www.it666.com)加入学习。

最后，一键三连大家也安排一下嘛！~