Vue.js的简单安装和快速启动(第2课)

在上一节中，我们介绍了Vue.js的框架在这一节中，我们可以尝试编写一些小代码。

1简单安装

要使用Vue.js，我们必须先将其安装到我们的项目中，并解释简单的安装。我们肯定会讲解最简单的方法，不管高楼上费时的安装方法，直接引入一个js文件，先敲代码。

Head meta charset='UTF-8' title轻松安装Vue.js/title脚本src=' http : Vue.js '/脚本/head官网提供了vue . js的下载地点源代码：https://cdn.jsdelivr.net/vue/2.1.3/vue.js

如果不想在本地下载，可以直接使用CDN介绍在线资源，可以：

script src=' http :https://xx/Vue.js '/script，我们已经用最简单的方式成功地将Vue . js引入到我们的项目中。至于npm、Bower等那些花里胡哨的安装方式，我们以后再看。

2数据驱动视图

介绍完了，我们就可以用了。我听说它最棒的地方是数据驱动视图，它释放了DOM操作，让你不再做复杂且消耗性能的DOM操作。然后，让我们看看它是怎么玩的！

假设我们现在想要在页面上呈现js对象中的变量值。传统的方法是先用getElementById获取DOM节点对象，然后在innerHTML中设置其内容。

现在，在Vue.js中，您需要这样做：

Div id='app '微信官方账号：{ { name } }/div script let VM=new vue({ El : ' # app '，data: {name3360' web前端教程'，} })；/script我们通过new Vue()创建一个实例vm，参数是一个json对象，属性el提供了页面上存在的一个DOM元素(id='app ')，表示这个实例与指定的DOM节点相关联。

在DOM节点上，我们可以使用双大括号{{}}的语法来呈现Vue实例对象数据中的现有属性值。比如上例中name属性的值“web前端教程”，会被渲染到页面中，替换{{ name }}的显示效果为“web前端教程”。

在这个过程中，我们没有编写操作DOM节点的代码。此外，正如我们在上一节中所说的，MVVM模式下的视图模型充当监视器。如果它监测到模型数据已经改变，它将通知视图视图更新。这个过程不需要你参与。

(查看mvvm)

让我们试试。如果我们将名称中的值更改为“hello word”，页面视图会自动更新而不添加任何代码吗？

请看下面的gif动画，让我们通过chrome浏览器演示一下：

(慢下来，等待gif绘图加载)

如上图所示，一旦更改了name的值，页面就会立即更改，而不是编写innerHTML来更新视图。

这是Vue.js的数据驱动视图

3双向绑定

更方便的是，Vue.js还提供了方便的语法指令，实现了视图和数据的双向绑定，也就是说，不仅数据的变化可以驱动视图，用户还可以在页面上做一些操作，也方便了模型层的数据更新。

示例：倾听用户在页面输入框中的输入，然后在页面上实时更新。

在Vue中，我们可以使用v-model指令轻松实现。(什么是v型，先别担心，后面会有章节详细介绍)。

Div id=' app '输入v-model=' number ' p number : { { number } }/p/div script let VM=new vue({ El 3360 ' # app '，data: {number3360 ' '，})；/script的效果如下：

(慢下来，等待gif绘图加载)

在这种情况下，我们不需要编写代码来监控输入控件的内容变化。虚拟机实例中的数据属性号将实时更新。号码更新后，视图将相应更新。因为这一切都是Vue.js完成的

4个组件

以上，我们演示了Vue.jse的数据驱动别忘了，上一节我们提到vue . js还有一个重要的核心，那就是组件化。

组件化是从页面中独立提取特定的块，并将它们打包成一个可重用的组件。

示例：假设页面上有多张相同的卡片：

按照传统方式，我们可以编写三份相同的HTML布局：

div id='app '！-第一张卡片-div class=' card ' img src=' http : log o . png ' alt=' h2web前端教程/h2p这里有一个描述，一个很长的描述/p button我是button /button /div！-第二张卡片-div class=' card ' img src=' http : log o . png ' alt=' h2web前端教程/h2p这里有一个描述，一个很长的描述/p button我是button /button /div！-第三张卡片-div class=' card ' img src=' http : log . png ' alt=' h2web前端教程/h2 p这里有一个描述，一个长描述/p button我是一个button /button /div /div如果我们把每张卡片都看作一个可重用的区域，那么它就可以打包成一个组件。

在Vue.js中，我们尝试将卡打包成一个组件。

div id=' app ' card/card card/card/div script//注册一个名为card Vue.component('card '，{ template 3360 ` div img src=' http : log o . png ' alt=' h2web前端教程/h2 p这里有一个描述，一个长描述/p按钮我是按钮/button/div ` })；new Vue({ El : ' # app ' })；/script我们用Vue.component(tagName，options)注册了一个名为card的组件，这样我们只需要在需要重用这个组件的地方使用card/card。在实际开发中，组件要比这个复杂得多，越复杂封装后越方便。

您可能会说组件中显示的内容不可能都相同。不用担心，Vue为组件提供道具属性接受传入的参数，后面我们会有专门的章节介绍组件的详细用法。

5本节概述

看到这里，你已经理解了Vue.js的两个核心，数据驱动和组件化，你已经开始了。接下来的章节将集中讨论这两个核心问题。

来源：微信官方账号：网页前端教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。