Vue.js 文档学习记录（一）- 安装和基础

Share

前言

要谈到现在的前端框架，称为React，Angular，Vue 三分天下丝毫不过分，其中Vue凭借他简单的API、高效的数据绑定和灵活的组件系统独占一方天地。廉价的学习成本也成为吸引我的重要因素（快把这个懒货抓起来！）。

作为国人研发的框架，文档自然也是中文，我蹩脚的英语终于可以歇歇了，再次感谢尤大。让我们来看看Vue的文档是怎么介绍自己的：

“ Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。”

关于 渐进式框架 和 自底向上增量 的理解，我在知乎上找见一些回答 Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？，个人初步理解是Vue的设计不会强制你按照它的机制，你可以在原有的系统上，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的绑定数据。我们可以根据需求，利用社区良好的生态，借助已有的工具和库搭建我们的项目，用最小、最快的成本一步步完成。

安装

直接 script 引入

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

NPM

1
$ npm install vue

脚手架

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

1
2
3
4
5
6
7
8
9
$ npm install --global vue-cli      //全局安装 vue-cli
$ vue init webpack my-project       //创建一个基于 webpack 模板的新项目
$ cd my-project                     //进入创建文件
$ npm install                       //安装依赖
$ npm run dev                       //走你

发车

声明式渲染

数据渲染

1
2
3
<div id="app">
  {{ message }}
</div>

1
2
3
4
5
6
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

属性绑定

1
2
3
<div id="app-2">
  <img v-bind:src="imgSrc" />
</div>

1
2
3
4
5
6
var app2 = new Vue({
  el: '#app-2',
  data: {
    imgSrc: './img/banner.jpg'
  }
})

条件与循环

v-if 指令控制切换一个元素的显示/隐藏：

1
2
3
div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

1
2
3
4
5
6
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-for 指令可以绑定数据到数组来渲染一个列表：

1
2
3
4
5
6
7
<div id="app-4">
  <ol>
    <li v-for="list in lists">
      {{ list.text }}
    </li>
  </ol>
</div>

1
2
3
4
5
6
7
8
9
10
var app4 = new Vue({
  el: '#app-4',
  data: {
    lists: [
      { text: 'Eat' },
      { text: 'Sleep' },
      { text: 'Dota' }
    ]
  }
})

处理用户输入

v-on 指令绑定一个监听事件

1
2
3
<div id="app-5">
  <button v-on:click="handleClick">{{message}}</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '按钮'
  },
  methods: {
    handleClick () {
      ...
    }
  }
})

v-model 指令使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

1
2
3
4
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

1
2
3
4
5
6
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

开发组件

在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：

1
2
3
4
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})

然后就可以使用你定义的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app-7">
  <ol>
    <todo-item v-for="item in todo" v-bind:todo="item"></todo-item>
  </ol>
</div>
var app7 = new Vue({
  el: '#app-7',
  data: {
    todo: [
      { text: 'AM' },
      { text: 'BM' },
      { text: 'CM' }
    ]
  }
})

但是在项目中通常不会这样写，会把一个个组件单独写在.vue文件中，举个栗子：

todoItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
<template>
  <li>{{todo.text}}</li>
</template>
<script>
export default {
  data () {
    return {
    
    }
  },
  props: ['todo'],
}
</script>
<style>
    ...
</style>
app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
<template>
  <ol>
    <todo-item v-for="item in todo" :todo='item'></todo-item>
  </ol>
</template>
<script>
import todoItem from './components/todoItem'
export default {
  data () {
    return {
        todo: [
          { text: 'AM' },
          { text: 'BM' },
          { text: 'CM' }
        ]
    }
  },
  components: {
  	todoItem,
  	...
  }
}
</script>

怎么样是不是觉得这样写很爽快，OK 你成功的上道了！