VUE框架学习基础入门
什么是库？：库是将代码集合成一个产品，我们可以调用库中的方法实现自己的功能。
什么是框架？：框架则是为解决一类问题而开发的产品，我们在指定的位置编写好代码，使用时框架帮我们调用。
- （背景）随着互联网技术的不断发展，程序员们用的前端框架也在不断的更新变化，前端框架从以前常用的jQuery、Bootstrap等框架，发展成现在的Vue、React、Angular三足鼎立的局面
Vue是一套用于构建用户界面的渐进式JavaScript框架。通过进行双向数据的绑定来驱动界面，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue自身不是一个全能框架——它只聚焦于视图层。
Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
Vue特点: 易用，灵活，高效，渐进式框架。
vue在国内能被广泛使用的首要原因是它是基于mvvm框架做开发的，mvvm是前端开发中一种很有影响力的模式，在mvvm中，m代表model 即模型，model中集中粗出变量以及变量的值，v代表view 即视图，集中存储html和css，vm是二者名字的结合，viewmodel，处理View和Model数据，该模式实现了响应式的双向数据绑定的。
MVC模式和MVVM模式对比：
在传统的mvc中除了model和view以外的逻辑都放在了controller中，导致controller逻辑复杂难以维护,在mvvm中view和model没有直接的关系，全部通过viewModel进行交互。
创建Vue实例代码：
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
<script src="VueJs/vue.js"></script>
<script>
//new一个vue对象
//objVue--data数据也会放到objVue中,成员属性以$开头-$data
//objVue.$nextTick()dom关联的元素执行完毕执行
// objVue.$mount('#app');关联元素和el等效
//页面加载完成之后获取元素并绑定
onload = function() {
var objVue = new Vue({
//element:元素(关联元素)
//el: '#app',//objVue.$mount('#app')等效
data: {
a: "欢迎使用Vue框架！",
imgUrl: "Images/坐标点.PNG"
},
});
objVue.$mount('#app'); //和el等效
objVue.a = "再见！";
//输出div中值
console.log(objVue.$el.innerHTML);
//每一次更改值都是异步去更改视图的，所以上面获取的还是"欢迎使用Vue框架！"，下面使用$nextTick作用是在Dom执行之后才执行的(可以获得异步更新后的值)
objVue.$nextTick(function() {
console.log(objVue.$el.innerHTML);
})
//关联第二个元素
//new Vue({
// el:''
//});
}
</script>
使用VUE：
-mustache语法：允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
VUE两大核心：
- 响应式数据绑定：当数据发生变化是，vue自动更新视图(它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。)
- 组合的视图组件：ui页面映射为组件书，划分组件可维护、可重用、可测试。
VUE优势：
- 提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
- 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写
易用灵活高效 - 组件化 和 响应式设计
- 数据的双向绑定 优点是减少了dom操作，提高了开发效率。
VUE缺点： 它不适于seo优化，而且封装的比较厉害，报错不明显，适合单人开发，适合中小型项目
Vue实例上的方法：
- vm.$el;
- vm.$data;
- vm.$options;
- vm.$nextTick();
- vm.$mount();
- vm.$watch();
- vm.$set();
