Vue.js快速入门教程


Posted in Javascript onSeptember 07, 2016

像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”

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

Vue.js快速入门教程

添加数据

之前我们曾提到过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对象的话,虽然后续功能可以实现,但是浏览器会报这个错:

Vue.js快速入门教程

它们的意思是指你在应用中使用的数据如果不在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代表当前遍历到的元素在数组中的编号。

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

Vue.js快速入门教程

Vue.js快速入门教程

下面我们来定义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快速入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 #Javascript
详解AngularJS中ng-src指令的使用
Sep 07 #Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 #Javascript
You might like
Destoon模板制作简明教程
2014/06/20 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Django自定义用户认证示例详解
2018/03/14 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python实现QQ批量登录功能
2019/06/19 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
Python 如何实现访问者模式
2020/07/28 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
python re模块和正则表达式
2021/03/24 Python
家具促销活动方案
2014/02/16 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
推广普通话的宣传语
2015/07/13 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
Python 中random 库的详细使用
2021/06/03 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
基于Redission的分布式锁实战
2022/08/14 Redis