这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
Vue.js 是一个专注于视图模型 (ViewModal) 的框架。接下来给大家带来了 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 快速入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/332021.html