Vue-基础简介

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();