Vue.js快速入门教程

像AngularJS这样的前端框架可以让我们非常方便地开发强大的单页应用程序。然而，有时像Angular这样的大框架对于我们的项目来说太大了，很多功能可能无法使用。这时，我们需要评估使用它的必要性。如果我们只需要在一个简单的网页上添加几个功能，使用Angular就太麻烦了，必要的安装、配置、路由和控制器设计都太繁琐了。

此时，我们需要一个更轻量级的解决方案。Vue.js是一个不错的选择。Vue.js是一个专注于ViewModal的框架。视图模型是用户界面和数据模型之间数据通信的桥梁，实现了用户界面和数据模型之间的双向数据绑定。它不是一个“完整的框架”，而是一个专注于视图层的简单灵活的框架。

接下来，我们将通过一个简单的memo应用程序向您介绍Vue.js的基本知识。为了让人们更加关注Vue.js本身，我们设计了一个基于本地数据的客户端应用。在本文的最后，我们将提到Vue.js和后端之间的交互。

准备工作/即将工作

让我们首先通过npm获取Vue.js和Bootstrap(这里不需要，应用其样式库)，并在命令行中输入以下内容：

Npm install vue bootstrap然后创建两个文件：index.html和app.js:

触摸index.html app . js还为index.html添加了以下内容

！index.html！doctype html html head meta charset=' utf-8 ' title vue/title！- CSS - link rel='样式表' href=' node _ modules/bootstrap/dist/CSS/bootstrap . min . CSS '/head body！-导航栏-nav class=' nav bar nav bar-default ' div class=' container-fluid ' a class=' nav bar-brand ' I class=' glyphicon glyphicon-bull horn '/ivue memo/a/div/nav！application的主要部分-div class=' container ' id=' events '！-添加表单-div class=' col-sm-6 ' div class=' panel panel-default ' div class=' panel-heading ' H3添加事件/H3/div div class=' panel-body '/div/div/div！-显示备忘录的内容-div class=' col-sm-6 ' div class=' list-group '/div/div/div！-js-script src=' http : node _ modules/vue/dist/vue . js '/script script src=' http 3360 app . js '/id为“events”的script/body/html div标记是这个应用程序的核心部分。然后我们将为这个核心部分创建一个Vue实例。

创建Vue实例

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

//app.jsnew Vue({//对于ID为“events”的容器，绑定到El : ' # events ' })；此时，Vue的功能将在div #事件中生效。在添加其他内容之前，让我们给创建的Vue实例添加一些必要的属性：

//app.js new Vue({ //绑定到el:' # events '，容器的ID为“events”。//在data属性中，我们定义了与网页交互的数据data: {}。//加载应用时，将执行ready属性中的函数ready:function () {}。//我们在应用程序中使用的方法将数据属性是一个对象，它声明了我们应用程序的视图模型中的所有数据

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

方法方法定义了需要在此应用程序中使用的方法

向表单添加内容

我们需要在表格中输入备忘录的细节。我们使用HTML5的原生时间选择器来设置备忘录内容的时间。(注意此功能不适用于火狐浏览器，建议使用Chrome或Safari)

Div class=' panel-body ' Div class=' form-group ' input class=' form-control ' placeholder=' event name ' v-model=' event . name '/Div Div class=' form-group ' text area class=' form-control ' placeholder=' event description ' v-model=' event。description/textarea/Div class=' form-group '输入类型='date' class='form-control '占位符=' Date ' v-model=' event . Date '/Div button class=' btnbtn-primary ' @ click=' addevent ' submit/button/Div我们在输入标记和text area标记中添加了一个“v-model”指令。类似于Angular的“ng-model”，这个v-model的值指定了视图模型中绑定到这个标记的数据，它不仅可以在这里使用，还可以在容器的其他地方使用。

我们在提交按钮上添加了“@click”指令。这个说明很短，全名应该是“on:click”。功能是将点击事件监听器绑定到该按钮。当click事件被触发时，将执行@click指令中的监听器函数。在本例中，我们将提交按钮与addEvent函数绑定在一起。我们还可以绑定其他事件。编写规则是@ event name=“监听功能”。如果我们想将监听函数F绑定到keydown事件，我们可以这样写：@ keydown="f "或on: keydown=" f "

此时，如果您预览网页，您将看到以下内容：

添加数据

我们之前提到过addEvent方法，用于添加新的备忘录数据。

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

//app.js.data: {event3360 {name: ' '，description: ' '，date3360''}，event :[]}，ready属性中的函数ready:function()将在加载应用程序时执行{//在加载应用程序时执行。}，//我们在应用程序中使用的方法将在methods属性中定义方法： {//我们定义一个方法来获取数据fetchEvents 3360 function(){ var events=[{ ID : 1，name :' meeting '，Description: '上午9: 00在21楼会议室'，Date :' 2015-09-10'}，{ID : 2，Name : ' Shopping '，description 3://$set是Vue提供的一种将数据插入数组的方法，视图。$set('events '，events)在执行时将被刷新；}，//将数据插入事件数组addevent : function(){ if(this . event . name){ this . events . push(this . event)；this.event={ name: ' '，description: ' '，date : ' ' }；}}}在data属性中，我们定义了一个event对象和一个events数组，分别表示事件和事件数组。这些数据将在应用程序加载时加载。如果我们不预定义事件对象，浏览器将报告此错误，尽管后续功能可以实现：

这意味着如果您在应用程序中使用的数据没有在data属性中声明，应用程序的性能将会受到影响。因此，我们在应用程序中使用的数据最好在data属性中声明。

在ready属性中，我们定义了fetchEvents方法来获取数据。在这种方法中，我们通过虚拟机向视图添加数据。$set方法。它的功能类似于数组的push方法。同时，它还刷新了视图。此方法的参数必须是表示传入数据的字符串密钥路径。具体用法可以在这里看到。

最后，在方法属性中，我们定义了addEvents方法来检查event.name的值是否存在，如果存在，则将event添加到Events数组中。之后，事件对象中的数据将被清空，表单也将相应地被清空。

添加事件列表

我们用一张清单来列出所有的事情：

div class=' list-group ' a href=' # ' class=' list-group-item ' v-for=' events in events ' H4 class=' list-group-item-heading ' I class=' glyphicon glyphicon-bull horn '/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='在这个例子中，我们给一个A标签添加了一个v-for指令，它将遍历events数组中的数据，我们使用event来表示每次遍历的数据。添加了v-for指令的元素会将每次的遍历结果应用到子元素中，以便重复显示。用过模板引擎、React或者Angular的朋友可能对类似用法比较熟悉。在我们的示例中，h4、h5、P和button标记的内容将被重复显示，循环次数是事件数组的长度。带有v-for指令元素的子元素称为模板，模板中的数据用双大括号包装。在本例中，数据是事件对象的属性(名称、日期和描述)。

您会注意到模板的一些元素添加了v-if指令。该指令起到条件渲染的作用。v-if的值是判断条件。如果结果为真，则将呈现该元素，否则将不会呈现该元素。此外，我们在button元素中添加了一个click指令，并调用deleteEvent方法来删除项目(具体定义将在下面给出)。其参数$index表示数组中当前遍历的元素的数量。

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

让我们定义deleteEvent方法

deleteEvent:函数(索引){ if(确认('您确定要删除此事件吗？')){/$ remove是一个类似于splice this . events . $ remove(index)的Vue便利方法；}}在这种方法中，我们首先询问用户是否删除该项目。如果您单击“确定”，该项目将通过Vue预定义的$remove方法从DOM中删除。

与后端的交互

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

以下是vue-resource的简要介绍。Vue-resource是专门为Vue设计的发送HTTP请求的插件。它支持Promise和URI模板，还提供拦截器等工具。看看我们上面的例子，我们把获取项目改为从服务器获取项目，然后我们需要修改fetchEvents方法：(假设后端通过url api/events提供与项目相关的服务，下同)

fetchevents 3360 function(){ this。$http.get('api/events ')。然后(函数(事件){ this。$set('events '，events)；}).catch(函数)(错误){ console.log(错误)；});}如果获取成功，将执行then函数的语句，仍然会调用$set方法，但会从服务器获取输入参数事件。

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

addEvent:函数(){ this。$http.post('api/events '，this.event)。然后(function(response){ this . events . push(this . event)；console.log('事件已添加！');}) .catch(函数)(错误){ console.log(错误)；});}同样，删除项目的方法可以修改如下：

deleteevent : function(index){ this。$ http . delete(' API/events/' event . id)。然后(function(response){ this . events . $ remove(index)；}) .catch(函数)(错误){ console.log(错误)；});}在这里，我们将项目的id传递给服务器，并通知服务器要删除的项目的id，以便服务器可以确定要删除哪个项目。

标签

用过Angular和React的朋友会发现Vue和它们有很多相似之处：类似Angular的指令和类似React的模块化处理。然而，Vue显然与他们不同。它更轻，更容易使用。不需要像Angular那样复杂的配置，也不需要像React那样学习虚拟DOM、JSX等新概念。因此，如果您的应用程序不是很大，您可能希望考虑使用Vue作为您的应用程序框架。

以上是边肖介绍的Vue.js的快速入门教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！