VUE简介

VUE简介

前言

VUE作为一个前端语言的框架（？），他的底层依旧是基于JavaScript，只是在某些方面与JavaScript不太相同。总体来说，VUE在开发过程中比JavaScript更加方便，效率也要更高。

除此之外，我们都知道JavaScript是一个14天诞生的编程语言，由于当初开发这门语言的时候受到技术、理念等约束，在发展过程中发现该语言的BUG比较多（实际上太多了，这个不是更新和发布新版本能完全解决的问题，很多致命BUG是底层架构的缺陷，虽然后期也有补救，但总体代码过于冗余），所以诞生了VUE等前端框架或语言来完善JavaScriptBUG。

VUE最主要的并不是完善了JavaScript的Bug，它的最大优势为数据动态响应。即VUE语言是遵循响应式编程范式的，所谓响应式编程就是一种发布者-订阅者模式，即VUE会一直观察服务器端修改的数据并将其及时的渲染到前端的DOM中。

简单使用

在使用之前，请先将该vue.js文件下载并复制到项目中。

vue.js下载

VUE基础代码

<div id="app">
    {{message}}
</div>
<script src="../../js/vue.js"></script>
<script>
<!--  在原生的Vue中定义了Vue实例，所以可以在代码中实例化 Vue对象，而且在想Vue中传递参数的时候，需要传递对象作为参数  -->
/*声明式编程*/
    // let（在ES6里面定义变量）/ const（在ES6里面定义常量）
    let app = new Vue({
        // 在该代码块中书写的都是实例VUE时传入的参数，类似的参数有很多，后期会逐渐补充
        el: '#app',  /*用于挂载要管理的元素*/
        data: {
            // data 表示VUE实例中的数据，data本身是创建VUE实例的一个参数，该参数为对象类型
            message: 'hello vue!!!'
        }
    })
</script>

这串代码展示在页面的效果是将data中message数据赋值给上面的{{message}}中，而且这种数据显示方式是动态绑定的。可以通过浏览器开发者工具中的控制台进行操作：

在开发者工具的console中书写代码：app.message='hahaha'，这个时候可以看到页面中的message的值显示为修改后的值。这就是VUE响应式编程的一个简单的体现。

VUE实例

在上述代码中，我们通过了new Vue()这种实例化操作，该操作其实是一种预先生成好的类，由于博主是后端工程师，所以在这里使用后端思维解释这个操作：

就像我们使用Java语言的时候，手动创建的一个类在内部会自动隐式的继承一些基础的类，简单使用String来举例子：

• 这个类在项目文件中是已经存在的，由Java语言开发者书写完成并加载在项目中，所以我们在使用String类实例化字符串对象的时候直接进行new String()操作即可，且在该类文件中并不需要引入相应的工具包；
• vue也是如此，感兴趣的同学可以去看看源码，在vue.js文件中也为我们准备好了VUE对象，只需要我们将所需要的参数传递进去就可以了。

总结

本篇笔记没有记录太多东西，其实就是介绍一下VUE，我在前端中的VUE系列笔记完全是以实践为主，不会涉及底层方面的知识（原谅我是一个后端博主，前端真的理解不深）。