你的位置:首页 > Java教程

[Java教程]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 >
    <div >
      <a ><i ></i> Vue 备忘录</a>
    </div>
  </nav>
  <!—应用的主要部分 -->
  <div id="events">
    <!—添加一个表单 -->
    <div >
      <div >
        <div >
          <h3>Add an Event</h3>
        </div>
        <div >
        </div>
      </div>
    </div>
    <!—展示备忘录的内容 -->
    <div >
      <div >
      </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.js
new 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 >
       <div >
            <input placeholder="事件名称" v-model="event.name">
       </div>
       <div >
           <textarea placeholder="事件描述" v-model="event.description"></textarea>
       </div>
       <div >
           <input type="date" placeholder="Date" v-model="event.date">
       </div>
      <button @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 >
            <a href="#" v-for="event in events">
                <h4 >
                    <i ></i>
                    {{ event.name }}
                </h4>
                <h5>
                    <i v-if="event.date"></i>
                    {{ event.date }}
                </h5>
                <p v-if="event.description">{{ event.description }}</p>
                <button @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、原生的 
这里简单介绍一下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作为你的应用框架。
 
via scotch.io

 

 

阅读原文请点击此处