最近接触了一个老项目，用的是JSP，于是有了这个随笔。。。
一、最常见的document方式
省略其中具体内容，给出样例代码：
<html>
<style>.table a:hover{color: #337ab7;text-decoration: underline;}
</style>
<div><table class="table table-hover"><thead><tr><th>1</th><th>1</th><th>1</th></tr></thead><tbody><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>2</td><td>2</td><td>2</td></tr></tbody></table>
</div>
</html>
二、JQuery方式
这个方式巨麻烦，不知道为什么要用
<div><table class="table table-hover" id="myTable"><thead><tr><th>1</th><th>1</th><th>1</th></tr></thead><tbody><tr><td id="myTd">2</td><td>2</td><td>2</td></tr></tbody></table><button id="bt2">button2</button>
</div>
<script>$(function(){$("#bt2").click(function(){const val = parseInt($("#myTd").text().trim())$("#myTd").text(val+1)})})
</script>
很容易可以看出，这个方法不好用，先使用$()装饰function，然后选取按钮元素，绑定点击事件，然后获取myTd元素的text，转化为int，然后计算，最后才能装入元素
三、Angular方式
只用一次的话，巨麻烦，但是如果一个页面要使用好多的响应式，兴许会方便一些？
一共5步：
- 先在html标签处声明app
- 在容器绑定ng-controller声明controller
- 响应数据倒是和vue的格式一致
- 按钮声明ng-click绑定事件
- 然后在js之中声明对应的东西
<html ng-app="myApp">
<style>.table a:hover{color: #337ab7;text-decoration: underline;}
</style>
<div ng-controller="myController"><table class="table table-hover" id="myTable"><thead><tr><th>1</th><th>1</th><th>1</th></tr></thead><tbody><tr><td>2</td><td>2</td><td>2</td></tr><tr><td id="myTd">{{ data.value }}</td><td>2</td><td>2</td></tr><tr><td>2</td><td>2</td><td>2</td></tr></tbody></table><button id="bt2" ng-click="inc()">button2</button>
</div>
<script>var app = angular.module('myApp', []);app.controller('myController', function($scope){$scope.data = {value: 2};$scope.inc = function(){$scope.data.value += 1;};});
</script>
</html>四、vue方式
真是神中神吧
<div><table class="table table-hover" id="myTable"><tbody><tr><td>{{ count }}</td><td>2</td><td>2</td></tr></tbody></table><button onclick="cl()">buttton</button>
</div>
<script>var app = new Vue({el:'#myTable',data:{count: 1}})function cl(){app.count ++;}
</script>
在这里不难看出，我们在声明一个响应式的变量时，需要选择一个等级较高的标签作为父标签，然后才能声明在这个父标签中，使用声明的响应式变量。
