什么是Vue
Vue是一套用于构建用户界面的 渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
这是官网给出的介绍，可能不是那么容易理解。简单来说，Vue是一个视图层框架，帮助我们更好的构建应用。
使用Vue和原生JS一个最显著的差别就是，Vue不再对DOM直接进行操作，而是通过对数据的操作，来改变页面。使用Vue构建的页面，是有一个个的组件组成的，当组件中定义的数据发生变化时，组件的显示也会跟着变化，且此过程无需刷新页面。
如何用Vue构建一个页面
下面，我会用一个非常简单的demo演示一下Vue中组件的常见结构
<!DOCTYPE html>
复制这段代码用浏览器打开，会看到这样的效果，说明运行成功。下面我们分析一下这段代码中的结构
这段代码一共定义了三个组件，一个根组件vm，一个全局组件try，一个局部组件test
根组件中：
- 创建组件时传入一个对象作为参数，组件内的各个属性的值也是对象或函数
- el表示与DOM的绑定，括号内是一个选择器来选择DOM元素
- data中用来定义数据
- components中用来注册局部组件
- methods中定义函数，当给组件绑定事件时用到的回调函数要在这里定义
- beforeCreate是一个生命周期钩子，声明周期钩子有11个，常用的有8个，这里只列一个作为展示
- computed是计算属性
- watch是侦听器，监视变量的变化
全局组件和局部组件：
- 区别：局部组件要在跟组件中进行注册，全局组件可以直接使用
- 子组件中的props用来接收父组件传来的值
- 子组件中的data的值不是一个对象而是一个函数而不是对象，在函数中返回一个对象
- 子组件中用到的函数，要在子组件的methods中定义
- 子组件中的template用来定义模板，这是一段可以复用的HTML代码
以上就是组件中常用的一些结构，这里只是简单的介绍一下。使用Vue的过程，就是基于组件的结构，以及Vue提供的一些指令，对页面完成一系列高效的操作。具体的使用流程，将会在后面继续讲解。
水平有限，如有纰漏恳请赐教。
如果对你有所帮助的话，点个赞再走吧~
3525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
