Vue.js快速入门教程

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用，然而有时候Angular这种大型框架对于我们的项目来说过于庞大，很多功能不一定会用到。这时候我们就需要评估一下使用它的必要性了。如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能，那么用Angular就太麻烦了，必要的安装、配置、编写路由和设计控制器等等工作显得过于繁琐。

这时候我们需要一个更加轻量级的解决方案。Vue.js就是一个不错的选择。Vue.js是一个专注于视图模型(ViewModal)的框架。视图模型是UI和数据模型之间进行数据交流的桥梁，实现了UI到数据模型之间的双向数据绑定。它不是一个“完整的框架”，而是一个专注于视图层的简单灵活的框架。

接下来我们将通过一个简单的备忘录应用来带大家了解Vue.js的基础知识。为了让大家更加关注Vue.js本身，我们设计一个基于本地数据的客户端应用，在本文最后会提及Vue.js与后端的交互方式。

准备工作

让我们先通过npm获取Vue.js和Bootstrap(非必须，这里是为了应用其样式库)，在命令行中输入以下内容：

npm install vue bootstrap

然后创建index.html和app.js两个文件：

touch index.html app.js

同时添加以下内容到index.html中

<!-- index.html --><!doctype html><html><head> <meta charset="utf-8"> <title>Vue</title> <!-- CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></head><body> <!— 导航栏 --> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue 备忘录</a> </div> </nav> <!—应用的主要部分 --> <div class="container" id="events"> <!—添加一个表单 --> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Add an Event</h3> </div> <div class="panel-body"> </div> </div> </div> <!—展示备忘录的内容 --> <div class="col-sm-6"> <div class="list-group"> </div> </div> </div> <!-- JS --> <script src="node_modules/vue/dist/vue.js"></script> <script src="app.js"></script></body></html>

ID为”events”的<div>标签是这个应用的核心部分。之后我们会给这个核心部分创建一个Vue实例。

创建一个Vue实例

首先，让我们创建一个Vue实例并将这个实例的” el”属性设为”#events”。这样实例就会和ID为”events”的容器绑定，

// app.jsnew Vue({// 和ID为”events”的容器绑定 el: '#events'});

到了这一步，Vue的功能就会在div#events 中生效了。在添加其他内容之前，让我们先给创建好的Vue实例添加一些必要的属性：

// app.js new Vue({ //和ID为”events”的容器绑定 el: '#events', // 在data属性中我们定义和网页交互的数据 data: {}, // 在应用加载的时候会执行ready属性中的函数 ready: function() {}, // 我们在应用中使用到的方法会在methods属性中定义 methods: {}});

data属性是一个对象，声明了我们这个应用的视图模型中的所有数据

ready属性是一个函数，会在应用加载的时候被执行，通常在这里调用其他方法来初始化应用所需的数据

methods方法定义了在这个应用中需要使用的方法

添加内容到表单

我们需要在表单里输入备忘录的详细内容。我们用到了HTML5 的原生时间选择器来设置备忘录内容的时间。（注意这个功能在火狐浏览器中不适用，推荐用Chrome或Safari）

<div class="panel-body"> <div class="form-group"> <input class="form-control" placeholder="事件名称" v-model="event.name"> </div> <div class="form-group"> <textarea class="form-control" placeholder="事件描述" v-model="event.description"></textarea> </div> <div class="form-group"> <input type="date" class="form-control" placeholder="Date" v-model="event.date"> </div> <button class="btn btn-primary" @click="addEvent">提交</button></div>

我们给input标签和textarea标签添加了一个” v-model”指令。类似于Angular的”ng-model”，这个v-model的值规定了视图模型中绑定到这个标签的数据，这个数据不光在这里可以用，在容器中的其他地方也可用。

我们给提交按钮增加了一个” @click”指令，这个指令是简写，全称应该是” v-on:click”，作用是给这个按钮绑定了一个点击事件的监听器，当点击事件触发时，@click指令中的监听函数就会执行，在本例中我们给提交按钮绑定的是addEvent函数。我们还可以绑定其他事件，写法则是@事件名=”监听函数”,如我们想给keydown事件绑定一个监听函数f，可以这么写：@keydown=”f”或者v-on:keydown=”f”

到了这一步如果你预览一下网页你会看到如下内容：

添加数据

之前我们曾提到过addEvent方法，这个方法是用来添加新的备忘录数据的。

现在我们会定义这个方法并添加一些必要的数据

// app.js ... data: { event: { name: '', description: '', date: '' }, events: []},// 在应用加载的时候会执行ready属性中的函数ready: function() { // 在应用加载的时候我们需要初始化数据 this.fetchEvents();},// 我们在应用中使用到的方法会在methods属性中定义methods: { // 我们定义一个方法来获取数据 fetchEvents: function() { var events = [{ id: 1, name: '开会', description: '上午9点在21层大会议室', date: '2015-09-10' }, { id: 2, name: '购物', description: '买个充电宝', date: '2015-10-02' }, { id: 3, name: '学习', description: '学习Vue官网上的教程', date: '2016-03-11' } ];// $set 是Vue提供的一个向数组插入数据的方法，在执行它的时候还会刷新视图 this.$set('events', events); }, //向事项数组插入数据 addEvent: function() { if(this.event.name) { this.events.push(this.event); this.event = { name: '', description: '', date: '' }; } }}

在data属性中，我们定义了一个event对象和一个events数组，分别表示事项和事项数组。这些数据在应用加载时会被加载。如果我们不预定义event对象的话，虽然后续功能可以实现，但是浏览器会报这个错：

它们的意思是指你在应用中使用的数据如果不在data属性中声明，那么应用的性能就会受到影响。因此我们在应用中使用到的数据最好都在data属性中声明。

在ready属性中我们定义了fetchEvents方法来获取数据，在该方法中我们通过 vm.$set方法来将数据添加到视图中，其功能类似于数组的push方法，同时它还会刷新视图，该方法的参数必须是一个字符串keypath，表示传入的数据。具体用法可以看 这里。

最后，在method属性中我们定义了addEvents方法，检查event.name的值是否存在，如果存在则添加event到events数组中。之后，event对象中的数据会被清空，同时表单也会随之被清空。

添加事项清单

我们用一个事项清单来列出所有事项：

<div class="list-group"> <a href="#" class="list-group-item" v-for="event in events"> <h4 class="list-group-item-heading"> <i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }} </h4> <h5> <i class="glyphicon glyphicon-calendar" v-if="event.date"></i> {{ event.date }} </h5> <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p> <button class="btn btn-xs btn-danger" @click="deleteEvent($index)">Delete</button> </a></div>

我们通过 v-for指令来 批量渲染DOM结构相同、显示内容不同的元素。在这个例子中，我们给一个a标签添加了v-for指令，它会遍历events数组中的数据，每一次遍历的数据我们用event来表示。添加了v-for指令的元素会将每次的遍历结果套用在子元素中重复显示，用过模板引擎、React或Angular的朋友可能会比较熟悉类似用法。在我们这个例子中，会重复显示h4、h5、p和button标签的内容，循环次数为events数组的长度。带v-for指令元素的子元素称为 模板，模板中的数据用双大括号包裹。在这个例子中数据为event对象的各个属性（name、date和description）。

大家会注意到模板的元素中有的添加了 v-if指令。这个指令起到了 条件渲染的作用。v-if的值为判断条件，如果结果为true则渲染该元素，否则不渲染。另外在button元素中我们添加了一个click指令，调用了deleteEvent方法用于删除事项（具体定义下面会给出），其参数$index代表当前遍历到的元素在数组中的编号。

刷新一下页面我们会发现所有事项会在页面右侧列出来，在左侧表单中输入内容并点击“提交”按钮之后，新的事项会自动添加到右侧的列表里。

下面我们来定义deleteEvent方法

deleteEvent: function (index) { if (confirm("Are you sure you want to delete this event?")) { // $remove is a Vue convenience method similar to splice this.events.$remove(index); } }

在这个方法中我们先询问用户是否确定删除该事项，如果点击”OK”，那么就通过Vue预定义的$remove方法将该事项从DOM中删除。

与后端的交互

和Angular一样，Vue的前端和后端是分离的，与后端的交互通过HTTP请求来完成。交互的工具有很多，你可以使用你熟悉的$.ajax、原生的XMLHttpRequest对象或者其他第三方库，也可以尝试一下vue-resource。

这里简单介绍一下vue-resource。vue-resource是专门为Vue设计的一个用于发送HTTP请求的插件。它支持Promise和URI模板，同时还提供了像拦截器(Interceptor)这样的工具。还是看我们上面这个例子，我们将事项的获取改为通过从服务器获取，这时候就需要修改fetchEvents方法：（假设后端通过api/events这一url提供事项相关的服务，下同）

fetchEvents:function(){ this.$http.get('api/events').then(function(events) { this.$set('events', events); }).catch(function(error) { console.log(error); });}

如果获取成功，那么就会执行then函数的语句，依然是调用$set方法，只是输入的参数events变为从服务器获取。

如果将addEvent进行修改，我们需要发送一个POST请求：

addEvent: function(){ this.$http.post('api/events', this.event) .then(function (response) { this.events.push(this.event); console.log("Event added!"); }) .catch(function (error) { console.log(error); });}

同样，删除事项的方法可以这么修改：

deleteEvent:function(index){ this.$http.delete('api/events/' + event.id) .then(function (response) { this.events.$remove(index); }) .catch(function (error) { console.log(error); });}

这里我们将事项的id传给了服务器，告知服务器要删除的事项id以便于服务器确定删除哪个事项。

结语

用过Angular和React的朋友会发现Vue和它们都很多相像之处：与Angular相似的指令，与React相似的模块化处理。然而Vue和它们明显不同，它更加轻量，易于上手，你不需要像Angular那样去进行复杂的配置，也不需要像React那样去学习新的虚拟DOM、JSX等等新的概念。因此，如果你的应用并不是很庞大，你不妨考虑用Vue作为你的应用框架。

以上所述是小编给大家介绍的Vue.js快速入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue.js开发环境快速搭建教程

    Vue.js开发环境快速搭建教程

    Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装

  • 详解Vue.js入门环境搭建

    详解Vue.js入门环境搭建

    vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.np

  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

  • 基于Vue2的移动端开发环境搭建详解

    基于Vue2的移动端开发环境搭建详解

    前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa

  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

  • vue.js从安装到搭建过程详解

    vue.js从安装到搭建过程详解

    最初的时候用vue是直接下载相关文件 按照以前的方法来操作的 后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像 打开命令行 输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹 用于存放项目文件 cd 进入你

  • Vue.js快速入门实例教程

    什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

随机推荐