Vue.js—基本用法

1.Vue的介绍

1.1 Vue的简介

Vue是构建用户界面的渐进式框架，只关注视图层

1.2 Vue中的两个核心点

（1）响应的数据绑定

当数据发生改变->自动更新视图（利用Obiect.defineProperty中的setter/getter代理数据，监控对数据的操作）

（2）组合的视图组件(如果：http://element.eleme.io/无法打开，请打开：http://element-cn.eleme.io/#/zh-CN)

• UI页面映射为组件树
• 划分组件可维护、可重用、可测试

1.3 虚拟DOM

       运行Js的速度是很快的，大量的操作DOM就会很慢。经常在更新数据后会重新渲染页面，这样造成在没有改变数据得地方也重新渲染了DOM节点，这样曹成了很大程度上的资源浪费。

      虚拟DOM是指利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构即为虚拟DOM。

1.4 MVVM模式

M：Model 数据模型

V：View 视图模板

VM：view-model 视图模型

2.学习流程

2.1 基础语法

2.1.1 Vue实例

每一个应用都是通过Vue这个构造函数创建根实例（root instance）启动

           new Vue（选项对象）

需要传入选项对象，对象包含挂载元素，数据，模板和方法等

          el: 挂载元素选择器    String| HtmlElement

          data: 代理数据          Object | Function

每个Vue实例都会代理其data对象你所有的属性，这些被代理的属性是响应的，新添加的属性不具备响应功能，改变后不会更新视图

            methods: 定义方法   Object

暴露自身的属性和方法，以$开头，例如$el  $data……

2.1.2 模板语法

（1）html模板

（2）字符串模板

              

（3）模板render函数

2.1.3 计算属性、class和style绑定、条件和列表渲染、事件处理器、表单控件绑定、组件

2.2 高级进阶

vue插件编写、mixin混合、过渡效果、自定义指令、vue-router：路由系统的使用、vueX:状态管理器

2.3 构建工具

nodejs:javascript运行环境

webpack：模块管理和打包工具

vue-cli：脚手架配置