序

最近我们用Vue.js做了一个数据查询平台，还做了一个拼图，突然深深感受到了Vue的力量。

Vue.js是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue从根本上采用了最低成本和可增量采用的设计。Vue的核心库只关注视图层，很容易与其他第三方库或现有项目集成。另一方面，当与Vue生态系统支持的单文件组件和库相结合时，Vue还可以为复杂的单页应用程序提供强大的驱动程序。

Vue.js目前已经更新到2.x，其功能和语法都有一定程度的升级和修改。本文首先介绍了基本内容。

1、新手指南

vue的使用非常简单。可以下载vue.js或者vue.min.js直接导入。

2.vue入门

2.1声明性呈现

Vue.js的核心是它可以通过采用简单的模板语法将数据声明性地呈现到DOM中：

div id=' app ' { message } }/div var app=new Vue({ El : ' # app '，data : { message : ' Hello Vue！'}})这将输入：你好Vue！

我们已经生成了第一个Vue应用程序！这看起来非常类似于渲染一个字符串模板，但是Vue在它的背后做了很多工作。现在数据和DOM已经链接在一起，所有的数据和DOM都是响应的。我们如何清楚地理解这一切？只需打开浏览器的JavaScript控制台(现在，在当前页面上)并设置app.message的值，您将看到上面示例呈现的DOM元素将相应更新。

除了文本插值，我们还可以这样绑定DOM元素属性：

div id=' app-2 ' span v-bind : title=' message '在这里悬停几秒钟，就可以看到标题动态绑定在这里！/span/divarapp2=new vue({ El : ' # app-2 '，data: {message: '页面在' newdate()加载。tolocalstring ()}})。悬停几秒后，可以看到动态提示。

这里我们遇到一些新的内容。您看到的v-bind属性称为指令。指令的前缀是v-，表示它们是Vue提供的特殊属性。正如您可能已经猜到的，它们将在呈现的DOM上产生特殊的响应行为。简而言之，这个指令在这里的作用是：“保持这个元素的title属性与Vue实例的message属性相关联，并更新它”。

如果你再次打开浏览器的JavaScript控制台，输入app2.message='一些新消息'，你会再次看到绑定了title属性的HTML已经更新。

2.1条件和周期

控制开关元件的显示也很简单：

div id=' app-3 ' p v-if=' seed '现在您可以在控制台上看到me/p/div var app 3=new vue({ El : ' # app-3 '，data: { seen 3360 true } })继续输入app 3 . seed=false，您应该会看到span

这个例子表明，我们不仅可以将数据绑定到文本和属性，还可以绑定到DOM结构。而且Vue还提供了强大的过渡效果系统，当Vue插入/更新/删除元素时，可以自动使用过渡效果。

还有其他指令，每个指令都有自己的特殊功能。例如，v-for指令可以使用数组中的数据来显示项目列表：

div id=' app-4 ' ol Li v-for=' todo in todos ' { { todo . text } }/Li/ol/div var app 4=new Vue({ El : ' # app-4 '，Dataa : { todo s :[{ text : ' learn JAVAScript ' }，{text:' learn Vue' }，{ text 3: ' create excited code ' } })3。vue示例

每个Vue应用程序都是从通过Vue功能创建一个新的Vue实例开始的：

Var vm=new Vue({ //option})虽然没有完全遵循MVVM模式，但Vue的设计仍然受到它的启发。按照惯例，我们通常使用变量ViewModel的缩写)来表示Vue实例。

3.1数据和方法

创建Vue实例时，数据对象中找到的所有属性都将添加到Vue的响应系统中。每当这些属性值改变时，视图将“及时响应”并更新相应的新值。

//数据对象var data={a: 1 }//此对象将被添加到Vue实例var VM=new Vue({ data : data })//此处引用了相同的对象！虚拟机。A==数据。a//=true//在实例//上设置属性也会影响原始数据vm.a=2data.a //=2/.反之亦然data . a=3vm . a/=3每当数据对象发生变化时，它都会触发视图的重新呈现。值得注意的是，如果已经创建了一个实例，那么只有那些已经存在于数据中的属性是有响应的。也就是说，如果在创建实例后添加了新属性，例如：

Vm.b='hi '然后，修改B不会触发任何视图更新。如果你事先知道你一开始会使用一个空的或者不存在的属性，那么你需要提前设置一些初始值。例如：

Data: { newtodotext3360 ' '，visitcount 33600，hidecompletodos 3360 false，todos : []，error : null}除了Data属性，Vue实例还公开了一些有用的实例属性和方法。这些属性和方法以$作为前缀，以区别于用户定义的属性。例如：

var数据={ a : 1 } var VM=new Vue({ El : ' # example '，Data:data}) vm。$ data===data//=truevm。$ el===document.getelementbyid('示例')//=true/$ watch是一个实例方法vm。$ watch ('a '，函数(新值，旧值){//这个回调函数将在` vm.a ` changes}之后调用)3.2实例的声明周期

vue实例的声明周期是一个非常重要的概念，理解后可以通过它实现很多功能。

看看这段代码。

！doctype html html head meta charset=' utf-8 ' title/title/head body div id=' container '我的申报期，我们来看看！/div/body Script type=' text/JavaScript ' src=' http : js/jquery-3 . 1 . 1 . min . js '/Script Script type=' text/JavaScript ' src=' http : js/vue . js '/Script type=' text/JavaScript '/以下代码展示了VM var VM=new vue({ El : ' # container '，data: {ShowData('在创建vue实例之前'，这个)；}，create d : function(){ show data('创建vue实例后'，this)；}，mount:之前的函数(){ show data(' mount到dom之前'，这个)；}，mount ed : function(){ show data('装载到dom后'，this)；}，更新前：函数(){显示数据('数据更改和更新前'，此)；}，updated : function(){ show data('在数据更改和更新之后'，this)；}，BeforeDestroy : FuncTion(){ VM . test=' 3333 '；显示数据('在vue实例被销毁之前'，这个)；}，销毁了：函数(){ show data(' vue实例销毁后'，这个)；} });函数realDom(){ console.log ('real dom结构：' document . getelementbyid(' container ')。innerhtml)；}函数showData(process，obj){ console . log(process)；Console.log('数据数据：' obj.test) console.log('挂载对象：')console.log(obj。$ El)RealDom()；控制台.日志(“-”)控制台.日志(“-”)}/脚本/html看渲染图

从控制台的打印效果可以看出，实例化vue对象大致可以分为四个阶段：创建vue实例、挂载到dom、更新数据更改和销毁vue实例。注意每个阶段都有对应的钩子，我们可以通过操作这些钩子来实现一些功能。虽然初学者用得不太好，但提前了解一下还是不错的。当你遇到实际的功能时，你应该能够得到生命周期的钩子。

摘要

以上是大家介绍的vue.js的用法和特点的详细说明，希望对大家有所帮助！