今天本仙女给大家来介绍一下最喜欢的JS框架Vue的基本用法。

Vue解答

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

vue的安装：

方法一：

可以从官网下载安装Vue：

下载地址：

https://vuejs.org/js/vue.min.js

将从官网下载安装Vue.min.js文件解压后复制到项目文件中。

引用：

<script src=" vue.min.js "></script>

方法二：

在国内也使用 Staticfile CDN 上的库。

引用：

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

Vue的声明式渲染

    Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。数据和 DOM 已经被建立了关联，所有东西都是响应式的。当我们打开浏览器的 JavaScript 控制台 ，并修改 数据的值，页面上的显示信息也会发生对应的变化。

    Vue可以定义数据对象。data 用于定义属性，methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。

示例：

    除了文本插值，我们还可以绑定元素特性。v-* 特性的被称为指令，指令用以表示它们是 Vue 提供的特殊特性，它们会在渲染的 DOM 上应用特殊的响应式行为。

    比如下面示例中的v-bind:title="message"指令表示：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

示例：

Vue组件

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

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。通过这个实例，可以在页面中声明若干个组件。

实例：

 如果是想学习更多的关于本文的知识，可以学习交流可以加我微信：xiang520and 或者QQ群：243771258一起探讨学习。

小结

    在前文中，本仙女跟大家一起对Vue进行了一个小小的学习，也利用了这些小小的例子，带大家领略了Vue前端框架的魅力。别忘记喜欢关注点赞么么哒~