本文最后更新于:2 个月前
前言
其实硬刚源码的意义不是很大,不仅意义不是很大,而且过程还很痛苦,这是就有人嚷嚷了,没啥意义还痛苦,你是不是吃饱了撑的。没错,每天上班中午会有2个小时的空闲时间,12点吃午饭,吃饭算半个小时,然后有一个半小时的空闲时间,这个时间就属于吃撑了的时刻。既然都吃撑了,那我做什么也在情理之中嘛,嘿嘿嘿😁。
网抑云语录
我多想把嘴边的碎碎念,变成身边的岁岁年年。
碎碎念
其实我是一个后端程序员,奈何后端过于无聊,学的东西就那么点,现成的解决问题的方案太多了,乃至于人们口中所说的调包程序员,你把spring的包都给整明白了,能随心所欲的玩,随心的调包,就已经登堂入室了,Java难的从来都不是语言本身,难的就是那些框架。spring的依赖反转,以及面向切面编程。这个面向切面编程类似Js里的回调函数,可惜我也不是太懂,这是个很牛逼的东西。在Java中的spring框架里有这样一句话,在我们spring框架中,没有什么不是加一个注解解决不了的,如果有,那就加两个。妙啊。此处应有表情包

都说crud程序员是废物,可后端的分布式,微服务,本质上来说就是为了稳定的crud。难道我们努力变秃就是为了成为一个会分布式和微服务的大废物么。考核一个程序员的功力,算法,是最有效的途径。算法,设计模式,编程思想。编程语言可能会过时,这三样永远都不会过时。编程语言只是工具,Vue框架也是一个工具。万一哪天谷歌人浏览器直接就自带mvvn了,Vue也会被淘汰。
正文
js牛逼的一点我感觉就是,代码即文本,文本即代码。自由度高到离谱,你说它是代码,它也能是文本,说它是文本,它下一秒钟就变成了代码,你想怎么写(玩)就怎么写(玩),直接硬刚原生js不合适啊,我就用Jquey稍微简化一下操作,包括解析dom,更新dom,以及绑定数据。重要的是思想,重要的是思想,😄😄😄
正常的Vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg" /> <h1>{{msg}}</h1> <h1 v-html="msg"></h1> <button type="button" @click="changeEvent">修改msg</button> </div> </body> <script type="text/javascript"> let ops = { el: '#app', data: { msg: '从前从前', username: '王亮芳' }, methods: { changeEv: function() { this.msg = '有个人爱你很久' } } } let app = new Vue(ops) console.log(app); </script> </html>
|
Vue的原理
Vue是以数据驱动视图的一个前端框架。数据,就是视图,视图反过来也能驱动数据,这就是大家伙常说的MVVM,先说一下MVC,M是数据模型V是视图,
C是控制器,C用来控制视图和数据的交互。MVVM,就是没有C,VV这之间形成了绑定。我没学过别的MVVM框架,Vue就是一个实现了MVVM的前端框架。
对于数据绑定视图大家不难理解,直接$(“#xx”).val(),这就绑定上了,想要实时绑定输入的内容,
在绑定一下input事件。以下代码都用了Jqury,你如果钟爱原生js也可以把用到Jquery的代码换成原生Js。
这里实现了一个最基本的表单输入绑定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js"></script> </head> <body> <input type="text" name="" id="name" value="你好世界" oninput="updata()" /> <span id="span"></span> </body> <script type="text/javascript"> let name = $('#name').val() $('#span').html(name) let updata = function() { let name = $('#name').val() $('#span').html(name) } </script> </html>
|
数据驱动视图内容
我们操作js的值是不需要什么getXXX,setXXX什么的,但这并不代表js中没有喔,核心就是get和set方法,下面就是一个最最最简单的数据和视图的双向绑定,
在控制台中改变obj.name的值,视图也会跟着发生相应的改变。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js"></script> </head> <body> <input type="text" name="" id="name" value="你好世界" oninput="updata()" /> <span id="span"></span> </body> <script type="text/javascript"> let obj = {} Object.defineProperty(obj, 'name', { get: function() { return name; }, set: function(newValue) { name = newValue; console.log('set: ' + newValue); $('#name').val(name) $('#span').html(name) } }) obj.name = $('#name').val() $('#span').html(name)
let updata = function() { obj.name = $('#name').val() $('#span').html(name) } </script> </html>
|
Vue的基本理念就是这样,剩下的太考验算法,文本解析,以及对dom树的了解,要加上很多细节,一个技术火起来,代码硬实力是一部分,但社区维护以及文档的详细度,也是不能少的。
尾声
好兄弟,我怎么会鸽你呢,尴尬。
封面原图:
