01、Vue-入门基础

2017-07-19 本文已影响545人 EndEvent

一、MVVM框架

MVVM框架好处

  - 针对具有复杂交互逻辑的前端应用
  - 提供的结构抽象
  - 主要目的是为了解决应用程序展示结构、业务逻辑之间的紧耦合关系
  - 通过ajax数据持久化，保证前端用户体验(部分异步刷新)

MVVM框架
Angular.js/React.js/Vue.js
Angular.js 文件大小在60KB左右，相对学习曲线较为波折，而且每个版本的语法改动特别大；
React.js 文件大小40KB左右，需要学习专门的语法；
Vue.js 文件大小18KB左右，借鉴Angular的指令和React组件化；

MVVM框架

MVC组成

模型(Model): 处理数据和业务逻辑
视图(View): 向用户展示数据的界面
控制器(Controller): 组织调度相应的处理模型

二、Vue简介

Vue是一个前端的双向绑定类的框架，新的Vue版本参考了React的部分设计，当然也有自己独特的地方，比如Vue的单文件组件开发方式都很有创新，另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。

  - 是一个轻量级MVVM框架(大小只有18KB)
  - 数据驱动+组件化的前端开发
  - 社区完善

三、Vue入门

Vue 可以直接把它当做一个js库使用，可以很简单的接入到你的项目中，或者你只需要使用双向数据绑定。

  需求: 网页中有个div标签，而需要有json对象存储数据，把json对象上的数据放到div。

  - 在页面中引入Vue库
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  - 在页面中div标签添加一个id，例如app
    <div id='app'></app>

  - 创建Vue的对象，并把数据绑定到上面创建好的div上去

<html>
    <head>
        <meta charset="utf8"/>
        <title>hello vue</title>
        <!--1、引入Vue库-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <!-- 2、创建一个Div -->
        <div id="app">
            <!--Vue的模板的绑定数据的方法，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
            {{message}}
        </div>
    </body>

    <!-- 3、创建Vue的对象，并把数据绑定到上面创建好的div上去 -->
    <script>
        // 创建Vue对象(Vue的核心对象)
        var app = new Vue({
            el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data: {     // data: 是Vue对象中绑定的数据
                message: 'hello Vue!'       // message 自定义的数据
            }
        });
    </script>
</html>

四、Vue核心思想

数据驱动(即是双向的数据绑定)
DOM是数据的一种自然映射。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代。

数据驱动
组件化
扩展HTML元素，封装可重用的代码。

组件设计原则

页面上每个独立的可视/可交互区域视为一个组件(例如头部尾部)；
每个组件对应一个工程目录，组件所需要的各种资源在该目录下就近维护；
页面不过是组件的容器，组件可以嵌套自由组合，形成完整的页面；

五、Vue组件

Vue组件*.vue由三部分组成分别是<template></template>HTML代码、<script></script>javascript脚本、<style></style>css样式。【官方推荐，将三个部分都写到一个.vue文件中】

Vue组件组成

通过webpack打包生成对应代码

六、vue的安装

直接通过script引入

<script src="https://unpkg.com/vue"></script>

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。

通过npm

  # 最新稳定版
  $ npm install vue

通过Vue-cli脚手架
Vue-cli是Vue的脚手架工具，是官方命令行工具 (CLI)，脚手架即编写好基础的代码，包括目录结构、本地调试、代码部署、热加载、单元测试。

  - $ npm install -g vue-cli   // 安装操作
  - $ vue -V  // 查看版本，检查是否安装成功
  - $ vue list // 查看可以使用哪些模版
  - $ vue init <template-name> <project-name>  
    例如 $ vue init webpack my-project  // 官方模版，也可以使用自定义等模版
  
  // 基本项目设置
  $ vue init webpack sell

  ? Project name sell
  ? Project description 饿了吗项目
  ? Author EndEvent <xxxx@qq.com>
  ? Vue build standalone
  ? Install vue-router? No
  ? Use ESLint to lint your code? No
  ? Pick an ESLint preset Standard
  ? Setup unit tests with Karma + Mocha? No
  ? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "sell".

   To get started:
   
     cd sell
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

  // 之后再按照上面提示执行对应命令即可
  $ cd sell
  $ npm install
  $ npm run dev  // 开启服务器，之后提示例如打开http://localhost:8080页面，如果可以打开说明配置完成

建议: 基础学习时，直接通过script引入或通过npm方式更快捷，后续项目中才是建议使用Vue-cli脚手架方式构建项目工程。