Vue.js入门教程

作者: 兼续 | 来源:发表于2016-02-17 01:32 被阅读41079次

    关于结缘的前端使用哪种框架,笔者之前有过Angular.js的开发经验,在React.js和Vue.js之间徘徊了一阵子最终选择了Vue,在我看来Vue和Angular有许多的共同点,在看Vue的文档的时候有很熟悉的味道,但和React类似只关注View这一块。Vue没有像React那样什么都放到js中,简洁方便的api设计以及组件式开发是我选择它的主要原因。

    实现前端大抵有两种思路,一个是由后端拼接页面后返回完整的网页,然后由浏览器渲染。另一种是由后端返回json之类的数据,然后由前端拼接数据进行展示,当然也可以两者混搭。实现前后端分离是很多web开发人员的梦想,有兴趣的可以看看Web系统开发构架再思考-前后端的完全分离

    结缘前端打算使用Vue.js做成SPA(Single Page Application)的形式,即一个入口页面,后续数据由后端Nodejs实现Restful风格的API调用,然后在前端呈现。使用Webpack作为前端工程解决方案解决资源管理,按需加载,实时更新等问题。本篇我们探索使用Vue.js实现结缘的登录界面。

    代码

    代码放在结缘的前端工程中,Vue-jieyuan,欢迎star,issue

    安装部署Vue开发环境

    为了方便大型应用的开发,尤大大开发了Vue-cli脚手架,提供了一系列的工具和库,方便我们快速的进行开发,具体功能包括单文件 Vue 组件,热加载,保存时检查代码,单元测试等,本质上和Express的express-generator是一样的。

    因为vue-cli依赖webpack,所以首先安装webpack这个工具:

    $ npm install -g webpack
    

    关于webpack如果没了解过可以看基于webpack搭建前端工程解决方案探索,然后安装vue-cli:

    $ npm install -g vue-cli
    

    使用方法如下:

    $ vue init webpack my-project
    $ cd my-project
    $ npm install
    $ npm run dev
    

    执行完成后在浏览器中localhost:8080查看。

    尤大大目前提供了4套官方模板,如下:

    • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
    • browserify-simple - A simple Browserify + vueify setup for quick prototyping.
    • webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
    • webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
      可以根据需求选择即可。

    在使用过程中遇到两个问题,如果你也遇到了,可以在issues中查看。

    学习ES6

    由于vue-cli生成的文件中使用的是ES6的语法,而ES6是未来的趋势,所以ES6必须一学,目前浏览器和Nodejs对ES6的支持程度不断提高,不过要在所有的浏览器中使用es6代码目前还不可行,不过babel可以帮你提前体验新的语法而不需要等待浏览器支持。babel本质上是一个js的预编译器,可以把es6程序编译成es5,从而在支持ES5的环境中运行。

    特地查了一下ES6和ES2016,ES2015的区别,实际上ES6===ES2015 < ES2016,由于ECMA委员会决定将标准每年一更,因此新推出的ES6被改名为ES2015,后面的标准将实行年制命名,如ES2016,ES2017...

    学习ES6/ES2015可以参考如下资源

    学习vue目前没有足够的教程可以帮我们快速了解如何构建我们的应用,所以只能一点点摸索,借鉴前人的经验,所幸尤大大有个使用Vue开发的Hacker News Clone,我们可以从这里吸收开发经验。另外Cnode社区也有个用Vue开发的客户端Vue-cnodejs也很不错。

    这里首先简要介绍一些Hacker News 客户端中使用到的ES6特性:

    箭头函数 => 和this

    =>是匿名函数的一种简写,即lamda表达式,格式为( 形参列表 ) => { 函数体 },使用箭头函数,内部函数继承了外围作用域的this值,再也不用写var that=this这种hack代码了。直接上代码看:

    // Expression bodies
    var odds = evens.map(v => v + 1);
    var nums = evens.map((v, i) => v + i);
    
    // Statement bodies
    nums.forEach(v => {
      if (v % 5 === 0)
        fives.push(v);
    });
    
    // Lexical this
    var bob = {
      _name: "Bob",
      _friends: [],
      printFriends() {
        this._friends.forEach(f =>
          console.log(this._name + " knows " + f));
      }
    };
    

    模块定义

    在ES6之前js没有一个统一的模块定义方式,流行的定义方式有AMD,CommonJS等,而ES6从语言层面对定义模块的方式进行了统一。

    // lib/math.js
    export function sum(x, y) {
      return x + y;
    }
    export var pi = 3.141593;
    
    // app.js
    import * as math from "lib/math";
    alert("2π = " + math.sum(math.pi, math.pi));
    
    // otherApp.js
    import {sum, pi} from "lib/math";
    alert("2π = " + sum(pi, pi));
    

    export default(默认加载)和 export *(整体加载)为:

    // lib/mathplusplus.js
    export * from "lib/math";
    export var e = 2.71828182846;
    export default function(x) {
        return Math.exp(x);
    }
    
    // app.js
    import exp, {pi, e} from "lib/mathplusplus";
    alert("2π = " + exp(pi, e));
    

    默认加载的好处是我们不需要知道模块所要加载的变量名或函数名,输出时指定任意名字,且不需要大括号。更详细的可以查看阮一峰老师的module一节

    const 和 let

    const即常量,一旦定义了即不可变。let是更好的var,由于js的设计缺陷,var变量的作用域是函数体的全部,还有变量提升等怪异特性,导致诡异的错误,极难定位bug。而let拥有块级作用域,声明的全局变量不是全局对象的属性,形如for (let x...)的循环在每次迭代时都为x创建新的绑定.能用let尽量不用var,具体请看Is there any reason to use the “var” keyword in ES6?以及深入浅出ES6(十四):let和const

    function f() {
      {
        let x;
        {
          // okay, block scoped name
          const x = "sneaky";
          // error, const
          x = "foo";
        }
        // okay, declared with `let`
        x = "bar";
        // error, already declared in block
        let x = "inner";
      }
    }
    

    promise

    语言标准实现的异步编程解决方案:

    function timeout(duration = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(resolve, duration);
        })
    }
    
    var p = timeout(1000).then(() => {
        return timeout(2000);
    }).then(() => {
        throw new Error("hmm");
    }).catch(err => {
        return Promise.all([timeout(100), timeout(200)]);
    })
    

    关于Vue-cli的webpack模板的代码风格

    Vue-cli本身是一套技术选型,本身有作者自己的设计偏好在里面,例如模板默认是ES6的语法,使用ESLint进行代码规范等。在我开始使用这个工具的过程中有两个纠结的地方,一个是缩进,一个分号。

    关于缩进

    模板中默认代码使用的2个空格进行缩进,这没问题,问题是在ESLint的配置文件.eslintrc.js中写死了indent的规则,于是各种缩进必须按照规范来,不然就会出现多处如下的错误

     error  indent  Expected indentation of 4 space characters but found 6
      /Users/Calvin/Develop/githubs/jieyuan/Vue-jieyuan/src/App.vue:35:7
            Hello,
    

    用java习惯了,格式糟糕的话format一下就好了啊,然后各种查资料是用2个空格还是4个空格,可以看看知乎的这个回答为什么JS的规范说要用两个空格来缩进?,恩,看来写js代码用2个空格更流行一些。如果你用sublime,那么可以打开你一个js文件然后Preference -> Settings More -> Syntax Specfic-User,然后写入以下选项 :

    {
      "tab_size": 2,
      "translate_tabs_to_spaces": true
    }
    

    同理对.vue也做一遍。不过萝卜青菜各有所爱,只要同意规范就好,如果还是希望使用4空格,可以编辑.eslintrc.js的indet项。

    关于写不写分号

    习惯了写分号,至今为止一直认为写分号会让代码清晰,不容易出错。不过在js这样不强制写分号的语言中需要另外考虑一番,可以看看知乎的这个问题:JavaScript 语句后应该加分号么?,于是又被尤大的答案折服了,ok,咱也不写分号了。更多的还是建议看尤大给的链接semicolons

    单文件组件以及Vue-loader解惑

    看Vue-cli中的src/componets文件夹有个Hello.vue的文件,这个是默认生成的单文件组件。如下:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          // note: changing this line won't causes changes
          // with hot-reload because the reloaded component
          // preserves its current state and we are modifying
          // its initial state.
          msg: 'Hello World!'
        }
      }
    }
    </script>
    
    

    咦?不对啊,这玩意是组件?Vue文档中不是说组件要用如下形式声明吗:

    var MyComponent = Vue.extend({
      // options...
    })
    
    // Globally register the component with tag: my-component
    Vue.component('my-component', MyComponent)
    <div id="example">
      <my-component></my-component>
    </div>
    

    好吧,在Building Large-Scale Apps中文档介绍了这种单文件的组件,它的特点是单文件组合HTML 模板,CSS和JS,并且可以使用自己想用的预处理器,并且css代码对于每个组件是隔离的,只能说Vue,就决定是你了!,例如:

    直接官网盗图 ,尤大创造了一个新的文件格式.vue,那这种文件咋解析啊,有没有文件解析器?于是有了vue-loader,它的官方介绍如下:

    vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module

    恩,Vue-loader会自动帮你把这种单文件组件转成组件使用,我们就不用操心啦。当然尤大也不强制你把代码都放在一个文件里,可以拆开放:

    <template src="./template.html"></template>
    <style src="./style.css"></style>
    <script src="./script.js"></script>
    或者从npm模块加载:
    <!-- import a file from the installed "todomvc-app-css" npm package -->
    <style src="todomvc-app-css/index.css">
    

    更多内容可以看Vue-loader的官方文档,跟着做一遍可以加深印象,更了解webpack和vue的思想。

    开发Vue组件

    好吧,说了那么多,我们来开发一个基本的Login组件吧。目前网页设计水平还跟不上,直接使用Bootstrap的css库,在index.html的head标签中加入

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    

    compoents标签中添加Login.vue文件,输入如下内容:

    <template>
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="container">
          <form class="form-signin">
            <h2 class="form-signin-heading">{{title}}</h2>
            <label for="inputEmail" class="sr-only">邮件地址</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="邮件地址" required autofocus>
            <label for="inputPassword" class="sr-only">密码</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="remember-me"> 记住我
              </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
          </form>
        </div>
    
    </template>
    
    <script>
    export default {
      data () {
        return {
          // note: changing this line won't causes changes
          // with hot-reload because the reloaded component
          // preserves its current state and we are modifying
          // its initial state.
          title: '登录结缘'
        }
      }
    }
    </script>
    
    <style >
      body {
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #eee;
    }
    
    .form-signin {
      max-width: 330px;
      padding: 15px;
      margin: 0 auto;
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
      margin-bottom: 10px;
    }
    .form-signin .checkbox {
      font-weight: normal;
    }
    .form-signin .form-control {
      position: relative;
      height: auto;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      padding: 10px;
      font-size: 16px;
    }
    .form-signin .form-control:focus {
      z-index: 2;
    }
    .form-signin input[type="email"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    </style>
    
    

    App.vue中的Hello组件换成Login组件即可,最终效果如下:

    代码

    代码放在结缘的前端工程中,Vue-jieyuan,欢迎star,issue

    相关文章

      网友评论

      本文标题:Vue.js入门教程

      本文链接:https://www.haomeiwen.com/subject/mpxmkttx.html