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系列笔记完全是以实践为主,不会涉及底层方面的知识(原谅我是一个后端博主,前端真的理解不深)。