vue 实例化几种方式_2 Vue数据绑定、实例化多个Vue对象、基础指令

1、Vue框架的优点：

(1).相比于原生操作DOM元素，其更节省性能；原因：[1].原生DOM节点使用js操作，js需要和DOM节点建立连接才能有后续的操作，建立连接特别耗费性能，而且原生数据改变重新进行页面渲染时，其会将相关的标签都进行渲染，即使是没改变的标签；[2].Vue框架操作HTML模版，实际也是虚拟DOM，其比操作原生dom节省性能，同时其内部封装了daff比较算法，数据改变重新进行页面渲染时，其只会更新相应的部分；

(2).视图、数据相分离且"自动更新"；原生UI视图中的操作Dom节点的代码，一部分在html结构，一部分在js动态创建，代码可读性及维护性很差；Vue框架中视图、数据分离，数据改变自动更新视图层底层采用的便是“观察者模式”；

(3).维护成本低；基于第(2)条，Vue的代码量更少，逻辑更清晰；

2、Vue框架 -> 其是基于MVVM模式构建用户界面的渐进式框架，其让开发者聚焦到逻辑层数据，Vue的核心库来负责视图层(其也只关注视图层)，所谓渐进式：其可当作js库使用在小型项目中，小型项目使用其的一部分功能也是OK的，后续项目进行迭代、重构也可同第三方库或既有项目进行整合； -> Vue不兼容IE8及以下；

- - - - - - >>> Vue的学习成本较低，下面开启Vue学习之路

1、Vue基础安装：(1).引入script标签：下载vue.js文件开发版本或者生产版本，建议使用开发版本，其包含完整的警告和调试模式，生产版本删除了常见错误的警告； (2).使用脚手架Vue-CLI；新手建议使用第(1)种方式来熟悉Vue核心库的基础使用，然后上手脚手架；

2、Vue数据绑定(插值语法)：Vue.js使用的HTML模版，这些模版都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析，底层的实现过程：模版 -> 编译 -> ast树 ->数据绑定 -> render函数 -> 虚拟dom -> 真实的html；后期也可以直接使用render函数，跑起来的速度更快；

3、实例化多个Vue对象 - -> 很重要的一点：不同的Vue实例之间可互相访问数据；

4、指令：v-once/v-bind/v-html;  v-if/v-else-if/v-else;v-show; v-for;  v-on; v-model;

(1).v-once/v-bind/v-html;

(2).v-if/v-else-if/v-else条件渲染指令，v-show;

(3).v-for列表渲染；

:key=""参考网址：https://segmentfault.com/a/1190000013810844

(4).v-on事件指令与修饰符；(修饰符可多个连在一起使用)

事件修饰符：.stop/.prevent/.capture/.self/.once/.passive;

按键修饰符：.enter/.tab/.delete/.esc/.space/.up/.down/.left/.right;

系统修饰符：.ctrl/.alt/.shift/.meta;

鼠标按钮修饰符: .left/.right/.middle;

(5).v-model双向数据绑定：v-model是语法糖，底层实现就是v-bind:value初始化 + v-on:input事件；聚焦点就是input框的使用；

补充：v-on/v-bind的简写形式