VueJS - 简介

VueJS简介 - 从简单和简单的步骤学习VueJS，从基本到高级概念，包括概述，环境设置，简介，实例，模板，组件，计算属性，监视属性，绑定，事件，渲染，过渡和动画，指令，路由，混合，渲染功能，反应接口，示例。

Vue 是用于构建用户界面的JavaScript框架.它的核心部分主要集中在视图层，很容易理解.我们将在本教程中使用的Vue版本是2.0.

由于Vue基本上是为前端开发而构建的，我们将处理大量的HTML，JavaScript和CSS文件在接下来的章节中.为了理解细节，让我们从一个简单的例子开始.

在这个例子中，我们将使用vuejs的开发版本.

示例

         VueJs Introduction                           {{ message }}

var vue_det = new Vue({ el: '#intro', data: { message: 'My first VueJS Task' } });

First VueJS

这是我们使用VueJS创建的第一个应用程序.如上面的代码所示，我们在.html文件的开头包含了vue.js.

 < script type ="text/javascript"src ="js/vue.js">

在正文中添加了一个div，用于在浏览器中打印"我的第一个VueJS任务".

 < div id ="intro"style ="text-align:center;"> < h1> {{message}}

我们还在插值中添加了一条消息，即 {{}} .这与VueJS交互并在浏览器中打印数据.为了获得DOM中消息的值，我们创建了一个vuejs实例，如下所示 :

  var vue_det = new Vue({  el:'＃intro'， data:{ message:'我的第一个VueJS任务'} })

在上面的代码片段中，我们调用Vue实例，它获取DOM元素的id，即e1:'#intro'，它是div的id.有消息的数据被赋予值'我的第一个VueJS任务'. VueJS与DOM交互并使用'我的第一个VueJS任务'更改DOM {{message}}中的值.

如果我们碰巧更改了值控制台中的消息，同样会反映在浏览器中.例如 :

VueJS Interesting

VueJS很有意思

在上面的控制台中，我们打印了vue_det对象，是Vue的一个实例.我们正在用"VueJs很有趣"来更新消息，并且在浏览器中立即更改了消息，如上面的屏幕截图所示.

这只是一个基本的示例显示了VueJS与DOM的链接，以及我们如何操作它.在接下来的几章中，我们将学习指令，组件，条件循环等.