Vue 初体验

Vue 初体验

原生 JS 写项目的问题

  • 语法冗长,复杂,操作页面麻烦,效率低

JQuery 开发的问题

  • 提供了简单的api,简化了操作 dom 的方式
  • 但是没有对业务逻辑分层,需要维护数据和 dom 之间的同步

MVVM

  • M: model,数据模型,机器可读性强的数据,也就是前端中的数据,如数组,对象等
  • V: view,视图,人眼可读性强的数据,表现为前端中的 dom 对象,如输入框,弹窗等
  • VM: 视图模型,将模型和视图进行双向绑定,表现为一些数据监听和数据绑定

Get Vue

Github: https://github.com/vuejs/vue

英文官网:https://vuejs.org/

中文官网:https://cn.vuejs.org/

准备

vue 是一个渐进式的 Web JS 框架,注重开发体验、通用性和性能。但是本质上还是围绕在 HtmlCSSJS 基础上的技术。所以 在学习 vue 之前以及在学习的过程中,都离不开这 “三剑客”。

HTML + CSS + JS 是基础

  • HTML(超文本标记语言)
  • CSS3
  • JavaScript 教程 by 廖雪峰
  • JavaScript 标准参考教程 by 阮一峰

JS 进阶

vue 单文件组件,也就是基于 .vue 文件格式的组件化开发,都是基于 ES6 语法,所以有必要去了解和学习 ES6 的特性。

  • ES6 by 阮一峰
  • ES6: 快速体验,及实用小贴士 by fundon
  • ES6-for-humans

windows

  • Bash-On-Ubuntu-On-Windows
  • Bash-On-Ubuntu-On-Windows10
  • git bash

工具

Git

  • Git教程 by 廖雪峰

node(npm)

  • node
  • nvm: node 版本管理工具 (可选)
### 程康健 & Web Develop * ID: 程是非sky * WeChat: 程是非sky * Blog: www.chengkangjian.com * Github: https://github.com/chengkj99 * Weibo: https://weibo.com/chengkangjian * E-mail: [email protected] -->

vue 入门

vue 是什么?

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

  1. vue 是一个用于构建用户界面的渐进式框架

    我觉得它与其他框架的区别就是渐进式的想法,也就是“Progressive”——这个词在英文中定义是渐进,一步一步,不是说你必须一竿子把所有的东西都用上。 -作者本人在一次分享上对 渐进式框架 进行了阐述。

  2. vue 只关注视图层,可以自低向上逐层应用
    声明式渲染 -> 组件系统 -> 客户管路由 -> 大规模的状态管理 -> 构建工具
    在声明式渲染阶段,甚至都可以像使用 jquery 一样的使用 vue,直接引入 就可以使用。

为什么要学习 vue ?

官方文档中有 vue 和其他 框架的对比,vue 对比其他框架,总的来说,vue 有下面这些特点,给我们参考是否值得学习:
* 简单,学习曲线低
它整体思想是拥抱经典的 Web 技术,并在其上进行扩展。
* 组件化开发
* 资源丰富
Awesome-vue
* 轻量、性能
在 react 和 angular 等框架的对比中,Vue 有更好的性能。第三方 benchmark
* 完善的工具链
vue-cli、vue-router、vuex…

vue 社区

  • GitHub
  • Twitter
  • #vuejs
  • Forum
  • gitter.im
  • The-vue-point
  • The-vue-trending

安装和运行

环境

一开始,我们不会涉及到 打包编译 工具 webpack,一切从最简单的地方(Html、CSS、JS)开始。

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

更新日志

最新稳定版本:2.5.16

每个版本的更新日志见 GitHub。

安装

首先我们需要安装 npm

npm 是 Node.js 的包管理工具,而且 npm 会在 安装 Node.js 的时候顺带装进来,所以我们要安装 Node.js。

windows

下载msi文件安装即可
linux

yum install nodejs -y

然后可通过以下方式安装 vue

  1. CDN

    可以指定具体的版本号:vue@版本号

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

    可供选择的CDN

    • cdn.jsdelivr.net
    • unpkg.com
    • cdnjs.cloudflare.com
  2. CLI

    使用官方提供的脚手架工具 vue-cli ,可以帮助我们快速启动一个 vue 工程项目,有多种 vuejs-templates 工程模板可用 ,开箱即用,快速开发。

       // 设备npm国内源
      npm config set  registry https://registry.npm.taobao.org/
      // 安装 vue-cli
      npm install -g vue-cli cnpm vue
      // 生成项目
      vue init webpack my-project

完整版本 和 运行时版本

Vue.js 的运行过程实际上包含两步。第一步,编译器将字符串模板(template)编译为渲染函数(render),称之为编译过程;第二步,运行时实际调用编译的渲染函数,称之为运行过程。

不同的版本

  1. 完整版:同时包含编译器和运行时的版本。
  2. 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  3. 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    • 独立版本

    包含了编译器,支持 template 选项,可以将 tamplate 选项编译为 render 函数,它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。

    • 运行时版本

    不包括模板编译,不支持 template 选项。

    可以用 render 选项。
    可以在单文件组件使用,因为单文件组件的模板是在构建时预编译到 render 函数中,运行时构建只有独立构建大小的 30%,只有 16Kb min+gzip 大小。

    NPM 上的 vue 默认指向运行时版本。适合和 打包编译结合使用,也就是适合于单文件组件开发。vue package.json

附:
原生 dom,js,vue操作元素对比


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>

  
  <div id="app">{{ message }}div>
body>
<script src="../utils/vue.js">script>
<script src="../utils/jquery.js">script>


<script>
  // var message = '世界杯哪些巨星没有“辜负”中国金主?From JS'
  // document.getElementById('app').innerHTML = message
  // var message = '星座世界杯|“风一样的男子”内马尔,你们嘲笑我无所谓, From JS'
  // document.getElementById('app').innerHTML = message
script>


<script>
  // var message = '世界杯哪些巨星没有“辜负”中国金主?From JS'
  // $('#app').html(message)
  // var message = '星座世界杯|“风一样的男子”内马尔,你们嘲笑我无所谓, From JS'
  // $('#app').html(message)
script>



<script>
  // var app = new Vue({
  //     // 绑定视图
  //   el: '#app',
  //     // 绑定数据
  //   data() {
  //     return {
  //       message: '星座世界杯|“风一样的男子”内马尔,你们嘲笑我无所谓, From Vue'
  //     }
  //   }
  // })

  // // 更新数据,不用再关心如何绑定到试图,数据会驱动试图
  // app.message = '世界杯哪些巨星没有“辜负”中国金主? From Vue'
script>

html>

你可能感兴趣的:(vue)