本文最后更新于：4 个月前
前言
其实硬刚源码的意义不是很大，不仅意义不是很大，而且过程还很痛苦，这是就有人嚷嚷了，没啥意义还痛苦，你是不是吃饱了撑的。没错，每天上班中午会有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树的了解，要加上很多细节，一个技术火起来，代码硬实力是一部分，但社区维护以及文档的详细度，也是不能少的。
尾声
好兄弟，我怎么会鸽你呢，尴尬。
封面原图：
