Vue.js教程

Vue.js教程起步我们以Vue数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。尝试Vue.js最简单的方法是使用JSFiddleHelloWorld例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。HelloWorlddivid=app{{message}}/divnewVue({el:'#app',data:{message:'HelloVue.js!'}})HelloVue.js!双向绑定divid=appp{{message}}/pinputv-model=message/divnewVue({el:'#app',data:{message:'HelloVue.js!'}})HelloVue.js!渲染列表divid=appulliv-for=todointodos{{todo.text}}/li/ul/divnewVue({el:'#app',data:{todos:[{text:'LearnJavaScript'},{text:'LearnVue.js'},{text:'BuildSomethingAwesome'}]}})LearnJavaScriptLearnVue.jsBuildSomethingAwesome处理用户输入divid=appp{{message}}/pbuttonv-on:click=reverseMessageReverseMessage/button/divnewVue({el:'#app',data:{message:'HelloVue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')}}})HelloVue.js!ReverseMessage综合divid=appinputv-model=newTodov-on:keyup.enter=addTodoulliv-for=todointodosspan{{todo.text}}/spanbuttonv-on:click=removeTodo($index)X/button/li/ul/divnewVue({el:'#app',data:{newTodo:'',todos:[{text:'Addsometodos'}]},methods:{addTodo:function(){vartext=this.newTodo.trim()if(text){this.todos.push({text:text})this.newTodo=''}},removeTodo:function(index){this.todos.splice(index,1)}}})AddsometodosX希望上例能让你对Vue.js的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。概述Innovative&powerful.Over100elements,230styles,and18headerstyles.adsviaCarbonVue.js（读音/vjuː/,类似于view）是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。如果你是有经验的前端开发者，想知道Vue.js与其它库/框架的区别，查看对比其它框架；如果你对使用Vue.js开发大型应用更感兴趣，查看构建大型应用。响应的数据绑定Vue.js的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用jQuery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。可能是最简单的例子：!--这是我们的View--divid=example-1Hello{{name}}!/div//这是我们的ModelvarexampleData={name:'Vue.js'}//创建一个Vue实例或ViewModel//它连接View与ModelvarexampleVM=newVue({el:'#example-1',data:exampleData})结果：HelloVue.js!看起来这跟单单渲染一个模板非常类似，但是Vue.js在背后做了大量工作。并且DOM会自动响应数据的变化。我们如何知道？打开你的浏览器的控制台，修改exampleData.name，你将看到上例相应地更新。注意我们不需要撰写任何DOM操作代码：被绑定增强的HTML模板是底层数据状态的声明式的映射，数据不过是普通JavaScript对象。我们的视图完全由数据驱动。让我们来看第二个例子：divid=example-2pv-if=greetingHello!/p/divvarexampleVM2=newVue({el:'#example-2',data:{greeting:true}})Hello!这里我们遇到新东西。你看到的v-if特性被称为指令。指令带有前缀v-，以指示它们是Vue.js提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。继续在控制台设置exampleVM2.greeting为false，你会发现“Hello!”消失了。第二个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。而且，Vue.js也提供一个强大的过渡效果系统，可以在Vue插入/删除元素时自动应用过渡效果。也有一些其它指令，每个都有特殊的功能。例如v-for指令用于显示数组元素，v-bind指令用于绑定HTML特性。我们将在后面详细讨论全部的数据绑定语法。组件系统组件系统是Vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：实际上，一个典型的用Vue.js构建的大型应用将形成一个组件树。在后面的教程中我们将详述组件，不过这里有一个假想的例子，看看使用了组件的应用模板是什么样的：divid=appapp-nav/app-navapp-viewapp-sidebar/app-sidebarapp-content/app-content/app-view/div你可能已经注意到Vue.js组件非常类似于自定义元素——它是Web组件规范的一部分。实际上Vue.js的组件语法参考了该规范。例如Vue组件实现了SlotAPI与is特性。但是，有几个关键的不同：1.Web组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js组件不需要任何补丁，并且在所有支持的浏览器（IE9及更高版本）之下表现一致。必要时，Vue.js组件也可以放在原生自定义元素之内。2.Vue.js组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。组件系统是用Vue.js构建大型应用的基础。另外，Vue.js生态系统也提供了高级工具与多种支持库，它们和Vue.js一起构成了一个更加“框架”性的系统。Vue实例JupiteristhefastestandlightestWordPressthemeever.Unparalleledperformance.adsviaCarbon构造器每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：varvm=newVue({//选项})一个Vue实例其实正是一个MVVM模式中所描述的ViewModel-因此在文档中经常会使用vm这个变量名。在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在API文档中查看。可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器：varMyComponent=Vue.extend({//扩展选项})//所有的`MyComponent`实例都将以预定义的扩展选项被创建varmyComponentInstance=newMyComponent()尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。我们将在后面详细说明组件系统。现在你只需知道所有的Vue.js组件其实都是被扩展的Vue实例。属性与方法每个Vue实例都会代理其data对象里所有的属性：vardata={a:1}varvm=newVue({data:data})vm.a===data.a//-true//设置属性也会影响到原始数据vm.a=2data.a//-2//...反之亦然data.a=3vm.a//-3注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。除了这些数据属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的数据属性区分。例如：vardata={a:1}varvm=newVue({el:'#example',data:data})vm.$data===data//-truevm.$el===document.getElementById('example')//-true//$watch是一个实例方法vm.$watch('a',function(newVal,oldVal){//这个回调将在`vm.a`改变后调用})参考API文档查看全部的实例属性与方法。实例生命周期Vue实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如created钩子在实例创建后调用：varvm=newVue({data:{a:1},created:function(){//`this`指向vm实例console.log('ais:'+this.a)}})//-ais:1也有一些其它的钩子，在实例生命周期的不同阶段调用，如compiled、ready、destroyed。钩子的this指向调用它的Vue实例。一些用户可能会问Vue.js是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分割在这些钩子中。生命周期图示下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。数据绑定语法Vue.js的模板是基于DOM实现的。这意味着所有的Vue.js模板都是可解析的有效的HTML，且通过一些特殊的特性做了增强。Vue模板因而从根本上不同于基于字符串的模板，请记住这点。插值文本数据绑定最基础的形式是文本插值，使用“Mustache”语法（双大括号）：spanMessage:{{msg}}/spanMustache标签会被相应数据对象的msg属性的值替换。每当这个属性变化时它也会更新。你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：spanThiswillneverchange:{{*msg}}/span原始的HTML双Mustache标签将数据