vuejs官方文档之介绍

介绍

vue.js是什么

vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动。

 

起步

官方指南假设你已了解html、css和javascript的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的注意——掌握好基础知识再来吧！之前有其他框架的使用经验会有帮助，这不是必须的。

 

尝试vue.js最简单的方法是使用jsfiddle上的hello world例子。你可以在浏览器新标签页中打开它。跟着例子学习一些基础用法。或者你也可以创建一个.html文件，然后通过如下方式引入vue：

开发环境版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

生产环境版本，优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装教程给出了更多安装vue的方式。请注意我们不推介新手直接使用vue-cli，尤其是在你还不熟悉基于node.js的构建工具时。

如果你喜欢交互式的东西，你也可以查阅这个scrimba上的系列教程，他揉合了录屏和代码试验田，并允许你随时暂停和播放。

 

声明式渲染

vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统：

     <div id="feihong">

               <input type="text" v-model="a" placeholder="你的名字" />

               <h1>您好，{{a}}</h1>

          </div>

     <script>

               var a=new Vue({

                    el:'#feihong',

                    data:{

                         a:2

                    }

                    

               })

          </script>

 

 

 

 

我们已经成功创建了第一个vue应用！看起来这跟渲染一个字符串模板非常类似，但是vue在背后做了大量工作。现在数据和dom已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？你在输入框中随便修改feihong.a的值，你将看到上例相应的更新。

 

hbuilder无法高亮显示错误，格式不对也无法高亮显示

 

除了文本插值，我们还可以像这样来绑定元素特性

 

 

 

这里我们遇到了一点新东西。你看到的v-bind 特性 被称为指令。指令带有前缀v-，以表示他们是vue提供的特殊特性。可能你已经猜到了，他们会在渲染的dom上应用特殊的响应式行为。这里，该指令的意思是：“将这个元素节点的title特性和vue实例的message属性保持一致”。

如果你再次打开浏览器的javascript控制台，输入app2.message='新消息',就会再一次看到这个绑定的titile特性的html已经进行了更新。

 

 

条件与循环

控制切换一个元素是否显示也相当简单：

<div id="app">

<p v-if="show">显示这段文本</p>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

 

<script>

var app=new Vue({

el:'#app',

data:{

show:false

}

 

})

</script>

 

 

继续在控制台输入app.show=false，你会发现之前显示的消息消失了。

这个例子演示了我们不仅可以把数据绑定到dom文本或特性，还可以绑定到dom结构。此外，Vue也提供了一个强大的过渡效果系统，可以在vue插入/更新/移除元素时自动应用过渡效果。

还有其他指令，每个都有特殊的功能。 例如，v-for指令可以绑定数组的数据来渲染一个项目列表

 

<div id="app-4">

<ol>

<li v-for="todo in todos">

{{ todo.text }}

</li>

</ol>

</div>

 

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: '学习 JavaScript' },

{ text: '学习 Vue' },

{ text: '整个牛项目' }

]

}

})

 

 

 

 

 

在控制台里，输入app-4.todos.push（{text:'新项目'}），你会发现列表最后添加了一个新项目。

处理用户输入

为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过他调用在vue实例中定义的方法：

 

 

<div id="app-5">

<p>{{ message }}</p>

<button v-on:click="reverseMessage">逆转消息</button>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

 

<script>

var app5 = new Vue({

el: '#app-5',

data: {

message: 'Hello Vue.js!'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})

</script>

 

 

注意在reverseMessage方法中，我们更新了应用的状态，但没有触碰dom——所有的dom操作都有vue来处理，你编写的代码只需要关注逻辑层面即可。

vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

    

<div id="app-6">

<p>{{ message }}</p>

<input v-model="message">

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

 

<script>

var app6 = new Vue({

el: '#app-6',

data: {

message: 'Hello Vue!'

}

})

</script>

 

组件化应用构建

组件系统是vue的另一个重要概念，因为他是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

 

在vue里，一个组件本质上是一个拥有预定义选项的一个vue实例。在vue中注册组件很简单：

Vue.component('todo-item',{

template:'<li>这是新组件</li>'

})

<ol>

<todo-item></todo-item>

</ol>

但是这样会为每个代办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个prop：

 

Vue.component('todo-item', {

// todo-item 组件现在接受一个

// "prop"，类似于一个自定义特性。

// 这个 prop 名为 todo。

props: ['todo'],

template: '<li>{{ todo.text }}</li>'

})

 

现在，我们可以使用v-bind指令将待办项传到循环输出的每个组件中

 

<div id="app-7">

  <ol>

    <!--

      现在我们为每个 todo-item 提供 todo 对象

      todo 对象是变量，即其内容可以是动态的。

      我们也需要为每个组件提供一个“key”，稍后再

      作详细解释。

    -->

    <todo-item

      v-for="item in groceryList"

      v-bind:todo="item"

      v-bind:key="item.id">

    </todo-item>

  </ol>

</div>

Vue.component('todo-item', {

  props: ['todo'],

  template: '<li>{{ todo.text }}</li>'

})

 

var app7 = new Vue({

  el: '#app-7',

  data: {

    groceryList: [

      { id: 0, text: '蔬菜' },

      { id: 1, text: '奶酪' },

      { id: 2, text: '随便其它什么人吃的东西' }

    ]

  }

})

 

 

 

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了连个更小的单元。子单元通过prop接口与父单元进行了良好的解耦。我们现在可以进一步改进<todo-item>组件，提供更为复杂的模板和逻辑，而不影响到父单元。

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易于管理。在后续教程中我们将详细描述组件，不过这里有个（假象的）例子，以展示使用了组件的应用模板是什么样的：

<div id="app">

<app-nav></app-nav>

<app-view>

<app-sidebar></app-sidebar>

<app-content></app-content>

</app-view>

</div>

 

 

与自定义元素的关系

你可能已经注意到vue组件非常类似于自定义元素——他是web组件规范的一部分，这是因为vue的组件语法部分参考了该规范。例如vue组件实现了slot api与is特性。但是，还是有几个关键差别：

1.web组件规范仍然处于草案阶段，并且违背所有浏览器原生实现。相比之下，vue组件也可以包装于原生自定义元素之内。

2.vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

我们刚才简单介绍了vue核心最基本的功能——本教程的其余部分将涵盖这些功能以及其他高级功能更详细的细节，所以请务必读完整个教程。