Web App开发——vue.js的介绍与实践

1.什么是Vue

有一个中文版，有练习的例子，很容易入门。

vue的官方定义。vue的js是：

Vue。Js（发音/vjuː/，类似于视图）是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue采用了自下而上的增量开发设计。Vue的核心库只关注视图层，这不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与和一起使用时，Vue完全能够为复杂的单页App提供驱动程序。

2.Vue的特点

与其他框架（React、Angular、Ember、Knockout、Polymer、Riot）相比，Vue在渲染性能、大小和性能、灵活性、学习曲线等方面具有优势。

如果你是一个有经验的前端开发人员，你想了解Vue。请看js和其他库/框架之间的区别。

3.Vue练习

安装Vue非常简单。只需加载vue即可。js文件。你可以下载vue。js文件，将其放在project/lib/目录中，然后通过相对路径加载：

构建最小的VueApp

声明性渲染

Vue。js的核心是它允许您使用简洁的模板语法将数据声明性地呈现到DOM中。

将以下代码粘贴到html文件中。｛｛expression｝｝是Vue的表达式语法。双括号中的变量是Vue实例中定义的变量。Vue通过数据绑定机制将变量渲染到相应的内容，然后将它们渲染到视图中：

使用div中的id=“app”创建相应的Vue实例：

var app=新Vue({

el:“#app”，

数据：{

留言：“你好，Vue！”

}

})

Vue实例构造函数中的参数[el:'#app']对应于html文件中的id=“app”。

注意：不能在文档的正文标记中定义ID。使用body标记ID作为el参数创建Vue实例将失败。

<；！--不能以这种方式使用-->；

｛｛消息｝｝

数据和事件的绑定和呈现

Vue的指示

v-bind属性称为指令。指令前缀为v-，表示它们是Vue提供的特殊属性。正如您可能已经猜到的，它们对呈现的DOM应用特殊的响应行为。

Vue使用v-bind:tag_ Attribute=“xxx”绑定和呈现数据和事件，tag_属性是html文档的标签属性。例如：

<；/span>

<；/span>

v-bind:tag_ Attribute=“xxx”也可以缩写为：tag_ Attribute=“xxx”，例如：

<；/span>

<；/span>

具体来说，对于标题和消息的以下绑定，此指令用于“保持此元素节点的标题属性与Vue实例的消息属性一致”：

<；/span>

以下css样式类绑定仅包括Vue实例_当变量变量为true时，css类选择器class1将附加到span元素节点。当变量变量为false时，元素节点没有样式class1：

<；/span>

<；/span>

当然，您可以绑定多个css类选择器：

<；/span>

<；/span>

=0”><；/span>

如果要绑定css类选择器，请直接将其设置为true：

=0”><；/span>

条件和周期

V-if和V-show用于控制切换元素的显示，V-for用于将绑定的数组数据呈现为列表。

v-if的用法：

var app3=新Vue({

el:“#app”，

数据：{

看到：真

}

})

当然，可以组合多个条件控件：

您可以在v-if之后直接使用v-else。当v-if的条件为false时，将渲染v-else的元素节点：

有条件地呈现元素的另一个选项是v-show指令：

v-if与v-show

v-show和v-if的用法大致相同。不同的是，带有v-show的元素将始终呈现并保留在DOM中。V-show只是切换元素的CSS属性显示。

请注意，v-show不支持＜template＞同步