详解vue.js用法和特性

　　

　　

最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大。

　　

Vue。js是一套构建用户界面(用户界面)的渐进式框架。与其他重量级框架不同的是,Vue从根本上采用最小成本,渐进增量(增量可采用的)的设计.Vue的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页应用程序提供有力驱动。

　　

Vue.js目前已经更新到2.倍,功能和语法上有一定升级和修改,本文首先介绍基础内容。

　　

　　

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

　　

　　

<强> 2.1声明式渲染

　　

Vue。js的核心是,可以采用简洁的模板语法来声明式的将数据渲染为DOM:

　　 　　 　　& lt; div id=坝τ谩北? 　　{{消息}} 　　& lt;/div> 　　应用var=new Vue ({ 　　埃尔:“#应用”, 　　数据:{ 　　消息:“你好Vue !” 　　} 　　}) 　　 　　

这样就会输入:你好Vue !

　　

我们已经生成了第一个Vue应用程序!这看起来和渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被关联在一起,所有的数据和DOM都是响应式的。我们如何对这一切清晰领会吗?只需打开你的浏览器的JavaScript控制台(现在,就在当前页面打开),然后设置app.message的值,你将看到上面的示例所渲染的DOM元素会相应地更新。

　　

除了文本插值(文本插值),我们还可以采用这样的方式绑定DOM元素属性:

　　 　　 　　& lt; div id=坝τ贸绦?”比; 　　& lt;跨越v-bind: title=跋ⅰ北? 　　鼠标悬停此处几秒, 　　可以看到此处动态绑定的标题! 　　& lt;/span> 　　& lt;/div> 　　var app2=new Vue ({ 　　埃尔:“#应用程序2”, 　　数据:{ 　　消息:“页面加载于' +新日期().toLocaleString (),}
}) 　　 　　

鼠标悬停几秒后,就可以看到动态的提示。

　　

这里我们遇到一些新内容。你看到的v-bind属性被称为指令。指令带有前缀v -表示是由Vue提供的专用属性。可能你已经猜到了,它们会在渲染的DOM上产生专门的响应式行为。简而言之,这里该指令的作用就是:“将此元素的标题属性与Vue实例的消息属性保持关联更新”。

　　

如果你再次打开浏览器的JavaScript控制台,并输入app2。消息='一些新的消息”,就会再次看到,绑定了标题属性的HTML已经进行了更新。

　　

<强> 2.1条件与循环

　　

控制切换一个元素的显示也相当简单:

　　 　　 　　& lt; div id=癮pp-3”比; 　　& lt; p v=翱吹健痹谙衷谀憧梢钥吹轿? lt;/p> 　　& lt;/div> 　　var app3=new Vue ({ 　　埃尔:“# app-3 ', 　　数据:{ 　　看到:真 　　} 　　}) 　　 　　

继续在控制台输入app3。=false,你应该会看到跨度消失。

　　

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

　　

还有其它一些指令,每个都具有各自不同的特殊功能,例如,v代表指令,可以使用数组中的数据来展示一个项目列表:

　　 　　 　　& lt; div id=癮pp-4”比; 　　& lt; ol> 　　& lt;李v=皌odo todos "比; 　　{{todo。文本}} 　　& lt;/li> 　　& lt;/ol> 　　& lt;/div> 　　var app4=new Vue ({ 　　埃尔:“# app-4 ', 　　数据:{ 　　待办事项:[ 　　{文本:“学习JavaScript的}, 　　{文本:“学习Vue}, 　　{文本:“创建激动人心的代码'} 　　] 　　} 　　}) 　　 　　

　　

每个Vue应用程序都是通过Vue函数创建出一个新的Vue实例开始的:

　　 　　 　　var vm=new Vue ({//选项 　　}) 　　 　　

尽管没有完全遵循MVVM模式,但是Vue的设计仍然受到了它的启发。作为约定,通常我们使用变量vm (ViewModel的简称)来表示Vue实例。

　　

<强> 3.1数据和方法

　　

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

　　 　　//数据对象 　　var data={: 1}//此对象将会添加到Vue实例上 　　var vm=new Vue ({ 　　数据:数据 　　})//这里引用了同一个对象! 　　vm。===数据。//=比;真正的//设置实例上的属性,//也会影响原始数据 　　vm。一个=2 　　数据。//=比;2//粗嗳? 　　数据。一个=3 　　vm。//=比;3

详解vue.js用法和特性