Vue.js 入门学习（一）

àì夳堔傛蜴生んèń 2022-05-20 01:18 262阅读 0赞

此课程是我跟随慕课网还有W3cschool学习的入门学习笔记！欢迎大家指导与学习![微笑][smile.gif]

Vuejs官方网站：[https://cn.vuejs.org/][https_cn.vuejs.org]

### 概述： ###

Vue.js是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现**响应的数据绑定**和**组合的视图组件**。

Vue.js只聚焦于视图层面，同时也能够完美的驱动复杂的单页应用。

#### 响应的数据绑定 ####

Vue.js的核心是一个相应的数据绑定系统，它让数据与DOM保持同步非常简单。Vue.js拥有**数据驱动的视图**的概念，即：在普通HTML末班中使用特殊的语法将DOM“绑定”到底层数据，一旦数据建立了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。

![70][]

注意：被绑定增强的 HTML 模板是底层数据状态的声明式的映射，数据不过是普通 JavaScript 对象。我们的视图完全由数据驱动。

\*\*\*指令：带有前缀v-，以指示它们是Vue.js提供的特殊特性。它们会对绑定的目标元素添加响应式的特殊行为。

例如 `v-for` 指令用于显示数组元素，`v-bind` 指令用于绑定 HTML 特性，`v-if` 指令用于数据判断……

同时：我们不仅可以绑定DOM文本到数据，还能够绑定DOM结构到数据；VUe.js还提供了一个强大的过渡效果系统，可以在Vue插入/删除元素时自动应用过渡效果。

####  ####

#### 组件系统    ####

组件系统提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

![70 1][]

实际上，一个典型的用 Vue.js 构建的大型应用将形成一个组件树。

组件的应用模板：

Vue.js组件类似于自定义元素——它是web组件规范的一部分。

[smile.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/smile.gif
[https_cn.vuejs.org]: https://cn.vuejs.org/
[70]: /images/20220520/fad6d3563d0b4c1a9c706030da8295f0.png
[70 1]: /images/20220520/62c0af836c0a44b0902c590274d731e3.png