记账本简单应用-原生&vue的实现对比

1.vue框架简介

引用网上的说法：vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。这个等会通过记账本这个案例进行演示体现。

2.原生与vue框架对比

参考1
参考2

1.数据的自动绑定
2.页面参数传递和页面状态管理。
3.模块化开发、无刷新保留场景参数更新
4.代码的可阅读性（模块化开发带来的）
5.基于强大的nodejs，拥有npm包管理器，可以很好滴管理包的版本
6.各子组件样式不冲突
7.视图,数据,结构分离
8.虚拟dom
9.各种指令;过滤器

3.原生操作dom到jQuery的演变

基于原生，你想更新页面或者添加数据显示，避免不了要获取节点、创建节点、添加节点、赋值取值(Element.value Element.innerText等)… 直到后续出来一个jQuery框架，可以简化部分代码，并且兼容性很不错

//原生部分代码展示
var inputElements = document.querySelectorAll('input')
var remakeElement = inputElements[0] //输入文本
var moneyElement = inputElements[1] //输入金额
var addHistory = document.getElementById('add-history')
var historyListElement = document.getElementById('history-list')
var deleteHistoryElement = document.querySelectorAll('delete-btn')

var countMoneyElement = document.getElementById('countMoney')
var srElement = document.getElementById('srMoney')
var fyElement = document.getElementById('fyMoney')


function deleteHistory2(event) {
	var deleteMoney = event.target.parentNode.children[1].innerText
	console.log(event.target.parentNode.children[1].innerText)
	computedMoney(deleteMoney,true)
	historyListElement.removeChild(event.target.parentNode)
}

function appenHistory() {
	var remake = remakeElement.value
	var money = moneyElement.value
	if(!remake.trim().length || !money.trim().length){
		alert('请输入内容！')
		return
	}

	var str =
		`${remake}${money}
x
`

	var liElement = document.createElement('li')
	liElement.innerHTML = str
	liElement.classList.add(parseFloat(money) < 0 ? 'minus-wrap' : 'add-wrap')
	historyListElement.appendChild(liElement)

	// 清空输入
	remakeElement.value = ''
	moneyElement.value = ''
	computedMoney(money)

}

//jQuery 代码展示

//选择器
$(this)	//当前 HTML 元素
$("p")	//所有 
 元素
$("p.intro")	//所有 class="intro" 的 
 元素
$(".intro")	//所有 class="intro" 的元素
$("#intro")	//id="intro" 的元素
$("ul li:first")	//每个 
 的第一个 
 元素
$("[href$='.jpg']")	//所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	//id="intro" 的 
 元素中的所有 class="head" 的元素


//常见取值赋值
$("#test").text()
$("#test").html()
$("#val_test").val()
$("a").attr("href")

//事件
$("p").click(function(){
  $(this).hide();
});

4.jQuery到Vue框架

喜大普奔，我们在也不需要关注dom，不需要由我们直接操作dom，所有的dom操作交由Vue框架，我们只需要维护需要显示的数据即可。如下是基于vue框架开发的记账本简单应用的全部代码，可以直接复制打开。看不懂没关系，我们可以看到，整个script部分并没有发现操作dom的代码，但是他可以实现添加删除，并自动计算值。

操作：我们可以复制如下代码，本地新建一个文件，粘贴代码，改文件后缀为.html，然后双击打开！

	
		
		
		
		
		
		

	
	
		
		

			
账本记录
			

				
你的余额
				
{{countMoney}}元
				

					

						
收入
						
${{srMoney}}
					

					

						
费用
						
${{fyMoney}}
					
				

				

					

						历史记录
					
				
				

					

						{{history.text}}
						{{history.money}}
						
x
					
				


				

					

						添加新记录
					
				


				

					

						文本
						
					

					

						金额(负数为费用，正数为收入)
						
					

					添加记录
				

			
		
		
		
	

为了演示数据变化，页面自动更新，请挨个复制如下代码到控制台(Console)然后回车输出，然后注意页面变化，认真看页面变化别眨眼~

• vue.inputMoney = 967
• vue.historyList.push({id:91,text:‘hahah’,money:-54})
• vue.historyList.push({id:99,text:‘hahah’,money:9888})
• vue.historyList[0].money = 967
• vue.historyList[0].text = ‘改变了’
• vue.historyList.pop()

5.代码下载&演示图

代码链接