angularjs vue_使用Vue.js构建应用程序：AngularJS的轻量级替代品

angularjs vue

Front-end frameworks like AngularJS allow us to build out very nice single page applications easily, especially when we become well versed with all the concepts.

像AngularJS这样的前端框架使我们能够轻松构建非常漂亮的单页应用程序，尤其是当我们对所有概念都精通的时候。

However, for many projects, frameworks like Angular can actually be a little bit more than what we need.

但是，对于许多项目，像Angular这样的框架实际上可能比我们需要的多一点。

If all we want to do is implement a few features a single page application, it's can be a bit much to setup the necessary config, routing, controllers, services and more that make up an Angular app.

如果我们要做的就是在单个页面应用程序中实现一些功能，那么设置一些必要的配置，路由，控制器，服务以及构成Angular应用程序的其他内容可能会有点麻烦。

For something more lightweight, a great solution is Vue.js. Vue is a library that focuses heavily on the ViewModel---the two-way data bindings that tie what we see and interact with on the screen with the application's data model. In this way (and as stated on the Vue.js website), the library is "not a full-blown framework - it is designed to be a view layer that is simple and flexible".

对于更轻量的东西，Vue.js是一个很好的解决方案。 Vue是一个专注于ViewModel的库-双向数据绑定将我们在屏幕上看到的内容和与应用程序的数据模型进行交互的内容绑定在一起。通过这种方式（如Vue.js网站上所述），该库“不是一个成熟的框架-它被设计为简单而灵活的视图层”。

For many use cases this is awesome because it means we can get the benefits of a single page(ish) application without the overhead that can come with using larger frameworks.

对于许多用例来说，这是非常棒的，因为这意味着我们可以获得单页（ish）应用程序的好处，而无需使用较大的框架而会产生额外的开销。

In this tutorial we will be building a simple events bulletin board application that will allow users to add and remove events. To explore Vue's main features we will simply be working with local data on the client side, but towards the end we'll see how we can use the vue-resource package to send HTTP requests to a back end.

在本教程中，我们将构建一个简单的事件公告板应用程序，该应用程序将允许用户添加和删除事件。 为了探索Vue的主要功能，我们将只在客户端使用本地数据，但是到最后，我们将看到如何使用vue-resource包将HTTP请求发送到后端。

与AngularJS的相似之处 (Similarities to AngularJS)

If you're familiar with AngularJS, you'll likely notice a lot of similarities between it and Vue.js as we go. Vue is heavily influenced by Angular and this actually works to our benefit because concepts transfer nicely between the two.

如果您熟悉AngularJS，那么我们可能会注意到它与Vue.js之间的许多相似之处。 Vue受Angular的影响很大，这实际上对我们有利，因为概念在两者之间可以很好地传递。

安装依赖项 (Installing the Dependencies)

Let's first grab Vue.js, Vue Resource, and Bootstrap with npm. From the command line:

首先让我们使用npm来获取Vue.js，Vue资源和Bootstrap。在命令行中：

npm install vue vue-resource bootstrap

We'll also need to create the main files:

我们还需要创建主文件：

touch index.html app.js

设置HTML (Setting Up the 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><!-- navigation bar --><nav class="navbar navbar-default"><div class="container-fluid"><a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue Events Bulletin Board</a></div></nav><!-- main body of our application --><div class="container" id="events"><!-- add an event form --><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><!-- show the events --><div class="col-sm-6"><div class="list-group"></div></div></div><!-- JS --><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/vue-resource/dist/vue-resource.js"></script><script src="app.js"></script>
</body>
</html>

The main <div> with an ID of events is our target area for the application. As we'll see in the next section, we need to create a Vue instance for each part of the application that we want to target.

具有events ID的主<div>是我们应用程序的目标区域。正如我们将在下一节中看到的那样，我们需要为要定位的应用程序的每个部分创建一个Vue实例。

In Angular, we can limit our application modules to certain parts of the HTML with ng-app="{module}". Vue works in a similar way. When we set up the Vue instance, we define an element to target and anything within that element will be available to the application.

在Angular中，我们可以使用ng-app="{module}"将应用程序模块限制为HTML的某些部分。 Vue的工作方式与此类似。当我们设置Vue实例时，我们定义了一个要定位的元素，并且该元素中的所有内容都可供应用程序使用。

创建Vue实例 (Creating a Vue Instance)

Within app.js, let's setup a new Vue instance and target theeventssection of the HTML by setting it on the el key.

在app.js ，让我们设置一个新的Vue实例，并通过将其设置在el键app.js定位HTML的events部分。

// app.jsnew Vue({
// We want to target the div with an id of 'events'el: '#events'
});

At this point, Vue is available anywhere within div#events. Before setting up the rest of the HTML, let's setup the other keys that we'll need for our Vue instance and cover what they are responsible for.

此时，Vue在div#events任何位置都可用。在设置其余HTML之前，让我们设置Vue实例所需的其他键，并介绍它们的作用。

// app.jsnew Vue({// We want to target the div with an id of 'events'el: '#events',// Here we can register any values or collections that hold data// for the applicationdata: {},// Anything within the ready function will run when the application loadsready: function() {},// Methods we want to use in our application are registered heremethods: {}
});

The data key will be the object where all our ViewModel data is registered
data键将是注册所有ViewModel数据的对象
The ready function will run when the application loads and is useful for calling other methods to initialize the app with data
ready函数将在应用程序加载时运行，这对于调用其他方法以使用数据初始化应用程序很有用
The methods key is where we can register custom methods for the application
methods键是我们可以为应用程序注册自定义方法的位置

添加表格 (Adding the Form)

Our form will need inputs for the event details. We'll use the native HTML5 datepicker for selecting the event date. NOTE: This will not work in Firefox.

我们的表格将需要输入事件详细信息。我们将使用本地datepicker 。 注意：这在Firefox中不起作用。

<!-- index.html -->...<div class="panel-heading"><h3>Add an Event</h3>
</div>
<div class="panel-body"><div class="form-group"><input class="form-control" placeholder="Event Name" v-model="event.name"></div><div class="form-group"><textarea class="form-control" placeholder="Event Description" 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" v-on="click: addEvent">Submit</button></div>...

You'll notice that we're adding a directive called v-model to our input and textarea elements and we're assigning distinct spots on an event object to each. Just like with ng-model in Angular, the values that we type into these fields will be bound to the ViewModel and will be available for use elsewhere in the application.

您会注意到，我们在input和textarea元素中添加了一个称为v-model的指令，并且在event对象上为每个对象分配了不同的位置。就像Angular中的ng-model一样，我们在这些字段中键入的值将绑定到ViewModel并将在应用程序的其他地方使用。

The submit button element has the v-on directive with a value of "click: addEvent" on it. This works much the same way that ng-click does with Angular: we pass a method to be run on the click event. The difference that Vue introduces is that we can use the v-on directive to specify the type of event we want the element to respond to. For example, we could say v-on="keyup: addEvent" and the addEvent method would be called when a keystroke is finished.

提交按钮元素具有v-on指令，其上的值为"click: addEvent" 。这与ng-click对Angular的工作方式几乎相同：我们传递了一种在click事件上运行的方法。 Vue引入的区别是我们可以使用v-on指令来指定我们希望元素响应的事件的类型。例如，我们可以说v-on="keyup: addEvent" ，当击键完成时将调用addEvent方法。

If we view the app in the browser, we see that we get our form:

如果我们在浏览器中查看该应用程序，就会看到我们得到了表格：

添加事件数据 (Adding Event Data)

The addEvent method we added to the click event in the last section is obviously going to be responsible for adding new events in. We'll add this method in now and also prime the application with some data.

我们在上一节中添加到click事件的addEvent方法显然将负责添加新事件。我们现在将添加此方法，并使用一些数据来填充应用程序。

// app.js...data: {event: { name: '', description: '', date: '' },events: []
},// Anything within the ready function will run when the application loads
ready: function() {// When the application loads, we want to call the method that initializes// some datathis.fetchEvents();
},// Methods we want to use in our application are registered here
methods: {// We dedicate a method to retrieving and setting some datafetchEvents: function() {var events = [{id: 1,name: 'TIFF',description: 'Toronto International Film Festival',date: '2015-09-10'},{id: 2,name: 'The Martian Premiere',description: 'The Martian comes to theatres.',date: '2015-10-02'},{id: 3,name: 'SXSW',description: 'Music, film and interactive festival in Austin, TX.',date: '2016-03-11'}];// $set is a convenience method provided by Vue that is similar to pushing// data onto an arraythis.$set('events', events);},// Adds an event to the existing events arrayaddEvent: function() {if(this.event.name) {this.events.push(this.event);this.event = { name: '', description: '', date: '' };}}
}
...

On the data key, we are registering both the event object that will hold our form data, as well as an empty events array that will be populated with data when the application loads. If we didn't pre-initialize the event object by registering it on the data key, we would still get values from our form as expected. However, by initializing it we get "more reliable reactivity and better performance" as a warning message in the console reveals.

在data键上，我们既注册了将保存表单数据的event对象，又注册了将在应用程序加载时填充数据的空events数组。如果我们没有通过将event对象注册到data键上来对其进行预初始化，那么我们仍将按预期从表单中获取值。但是，通过对其进行初始化，控制台中的警告消息显示出“更可靠的React性和更好的性能”。

Within the ready function we are calling fetchEvents which is a method that takes some data and uses Vue's $set to put it onto the events array. The $set method is provided by Vue and when used to put data onto an array, triggers a view update. Its first argument needs to be a string with the name of the keypath that we want to target.

在ready函数中，我们正在调用fetchEvents ，它是一种获取一些数据并使用Vue的$set将其放入events数组的方法。 $set方法由Vue提供，当用于将数据放入数组时，将触发视图更新。它的第一个参数必须是一个带有我们要定位的键路径名称的字符串。

Finally, the addEvent method first checks to make sure we at least have a value present for event.name and if so, pushes the event onto the the events array. After this, the form is cleared by setting the event object keys back to empty strings. We're ready to view existing listings and add new ones, but we'll need some HTML to display them.

最后， addEvent方法首先检查以确保我们至少有一个event.name值，如果存在， event.name事件推送到events数组。此后，通过将event对象键设置回空字符串来清除表单。我们已经准备好查看现有列表并添加新列表，但是我们需要一些HTML来显示它们。

添加列表区域 (Adding the Listing Area)

To list out the events, we'll need HTML in which we will include some templating.

要列出事件，我们需要HTML，其中将包含一些模板。

<!-- index.html -->...<div class="list-group"><a href="#" class="list-group-item" v-repeat="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" v-on="click: deleteEvent($index)">Delete</button></a></div>...

As you can see, we're using Vue's v-repeat on the a tag to loop over the events data. As you're probably thinking, v-repeat works just like Angular's ng-repeat. Templating works the same way as it does in Angular as well---we use the double curly braces to render data. In this case, we access the name, date, and description values within various elements to display the events data.

正如你所看到的，我们使用Vue公司的v-repeat上a在事件数据标签循环。正如您可能在想的那样， v-repeat工作原理与Angular的ng-repeat 。模板的工作方式与Angular中的工作方式相同-我们使用双花括号来呈现数据。在这种情况下，我们将在各个元素中访问name ， date和description值以显示事件数据。

The button at the bottom triggers a click event that calls deleteEvent, which we have yet to create. This method accepts Vue's $index property as an argument. This property gives us the index of the current element within the v-repeat loop and will be used to remove that element once we setup the deleteEvent method.

底部的button触发一个单击事件，该事件调用deleteEvent ，我们尚未创建。此方法接受Vue的$index属性作为参数。此属性为我们提供了v-repeat循环中当前元素的索引，并且在设置deleteEvent方法后将用于删除该元素。

If we refresh the page, we see that we get the events data displayed and that we can also add in new events.

如果刷新页面，则会看到显示的事件数据，也可以添加新事件。

We've already got the button for deleting events set up, lets now create the method that should be called when it is clicked.

我们已经设置了用于删除事件的button ，现在让我们创建单击该事件时应调用的方法。

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

In this method we are first prompting the user to confirm that they actually want to delete the event. If they click "OK", the event is removed by using Vue's $remove convenience method which takes care of finding the index passed in from the view and removing the element from the DOM.

在这种方法中，我们首先提示用户确认他们确实要删除事件。如果他们单击“确定”，则使用Vue的$remove便捷方法$remove该事件，该方法负责查找从视图传入的索引并从DOM中删除元素。

切换到后端 (Switching to a Back End)

Like AngularJS, Vue is totally agnostic about the back end that we use for our applications. Just as long as the server responds to HTTP requests with JSON, we can use Vue Resource to handle data retrieval.

像AngularJS一样，Vue完全不了解我们用于应用程序的后端。只要服务器使用JSON响应HTTP请求，我们就可以使用Vue Resource来处理数据检索。

As previously mentioned, we won't actually set up a back end in this tutorial, but we will show how to make the appropriate HTTP requests to one. A NodeJS back end would be an easy solution for a Vue app, and you can learn how to set one up with Scotch.io's Mean Machine eBook (you'll just need to swap out the Angular stuff for Vue).

如前所述，我们实际上不会在本教程中设置后端，但是我们将展示如何向一个后端发出适当的HTTP请求。对于Vue应用程序， NodeJS后端将是一个简单的解决方案，您可以学习如何使用Scotch.io的Mean Machine电子书进行设置（您只需要将Angular内容换成Vue）即可。

The first step would be to move the events data over to the server and set up an endpoint which would take care of serving the events. Ideally we would have an endpoint that would respond to a GET request at something like api/events. We would then change our fetchEvents method up to send the request:

第一步是将事件数据移到服务器上，并设置一个负责处理事件的端点。理想情况下，我们将拥有一个在api/events类的响应GET请求的端点。然后，我们将更改fetchEvents方法以发送请求：

// app.js...// If we had a back end with an events endpoint set up that responds to GET requests
this.$http.get('api/events').success(function(events) {this.$set('events', events);
}).error(function(error) {console.log(error);
});...

In the success handler of the GET request we are still using $set to put the returned data onto the events array. We could also make POST requests to add data:

在GET请求的成功处理程序中，我们仍在使用$set将返回的数据放入events数组。我们还可以发出POST请求以添加数据：

// app.js...// If we had an endpoint set up that responds to POST requests
this.$http.post('api/events', this.event).success(function(response) {this.events.push(this.event);console.log("Event added!");
}).error(function(error) {console.log(error);
});...

In this case we are sending the event object that contains the form data by including it as the second argument to the call. In the success handler, we are pushing the event onto the array to update the view, much like we were before.

在这种情况下，我们通过将其包含为调用的第二个参数来发送包含表单数据的event对象。在成功处理程序中，我们将事件推送到数组上以更新视图，就像以前一样。

Another way we could update the view is by making an additional GET request to retrieve the total list in the success handler, but this requires another network request which isn't ideal. Deleting an event is simple as well.

我们可以更新视图的另一种方法是通过发出另一个GET请求来检索成功处理程序中的总列表，但这需要另一个不理想的网络请求。删除事件也很简单。

// app.js...// We could also delete an event if we had the events endpoint set up to delete data
this.$http.delete('api/events/' + event.id).success(function(response) {this.events.$remove(index);
}).error(function(error) {console.log(error);
});...

In this case we are tacking the event.id onto the end of the route for our DELETE request which, if our API is setup to do it, will delete the record based on that ID. For this to work we would need to pass event into the method call from the view and then receive it on the deleteEvent method.

在这种情况下，我们会将event.id附加到DELETE请求的路由末尾，如果设置了我们的API，则DELETE请求将根据该ID删除记录。为此，我们需要将event从视图传递到方法调用中，然后在deleteEvent方法上接收它。

结语 (Wrapping Up)

Vue.js offers us a great alternative to larger frameworks like AngularJS and is a perfect solution for cases in which we want to easily create single page apps without a lot of overhead. The library is flexible and easy to work with and if you have experience with Angular, you'll feel right at home.

Vue.js为我们提供了替代AngularJS之类的较大框架的绝佳选择，并且是我们想要轻松创建单页面应用程序而又没有太多开销的情况的完美解决方案。该库非常灵活，易于使用，如果您有使用Angular的经验，就会感到宾至如归。

To build a full-fledged single page application with Vue, we can use vue-router which integrates with the Vue.js core to handle routing.

要使用Vue构建完整的单页应用程序，我们可以使用与Vue.js核心集成的vue-router来处理路由。

给我留言 (Drop Me a Line)

If you’d like to get more tutorials like this one, feel free to head over to my website and signup for my mailing list. You should follow me on Twitter---I'd love to hear about what you're working on!

如果您想获得更多类似的教程，请随时访问我的网站并注册我的邮件列表。您应该在Twitter上关注我---我很想知道您在做什么！

翻译自: https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs