小白前端入门的第一个小项目
目标要求：制作一个如下图的网页，要求符合图片比例制作出来可以输入数值同时进行计算
首先祝大家新年快乐！
以下是一个大一狗的卑微学习经历和完整过程，第一次写CSDN，各位大佬轻喷。
下面是我制作的思维导图，整个小项目的思维导图：（水印忘去了，抱歉）
因为是刚刚入门前端，先通过W3C学习了HTML的基本语法到正则表达式部分，由于HTML是骨架嘛，所以光会了HTML也无法完成这个项目的设计，只能使用冗杂的代码将这个页面简单地表示出来。W3C还是有些看不太懂，又结合菜鸟教程和廖雪峰看了看，但是还是犯了做程序的兵家大忌，只看不练，耗时许久还是什么都不会
于是我习惯性地打开了CSDN，搜索了许久终于找到了先前一位大佬发的教程，@wuyxinu，他总结的教程很是完善，很适合零基础的小白HTML入门与进阶以及HTML5他还写过有关CSS和JS相关的教程。很是推荐。
寻寻觅觅寻不到学习前端的真理，b站MOOC鱼龙混杂，所谓过多的选择就相当于没有选择，被打击了n次之后，终于发现b站的pink老师讲的前端是amazing啊强烈推荐！
因此我写了以下三个版本的代码
- DOM
- jQuery
- Vue（Vue版本是完完全全使用HTML+CSS+JS）
DOM
以下是代码段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<h2>房源示例</h2>
<table>
<tr>
<td> 产品均价</td>
<td background="#CCCCCC"><input type="text" id="txt1" placeholder="请输入产品均价" size="22" /></td>
<td> 主力户型面积</td>
<td background="#CCCCCC"><input type="text" id="txt2" placeholder="请输入户型面积" size="22"/></td>
<td> 最低房款：<font color="red" id="txt3">0.00元</font></td>
</tr>
</table>
<h2>房源收支</h2>
<table>
<tr>
<td> 代理费点位</td>
<td background="#CCCCCC"><input type="text" id="c" placeholder="请输入代理费点位" size="22" /></td>
<td> 代理费固定佣金</td>
<td background="#CCCCCC"><input type="text" id="d" placeholder="请输入代理费固定佣金" size="20"/></td>
<td> 收入合计：<font color="red" id="txt4">0.00元</font></td>
</tr>
<tr>
<td> 分销佣金</td>
<td background="#CCCCCC"><input type="text" id="e" placeholder="请输入分销佣金" size="10" /></td>
<td> 其他的支出费用</td>
<td background="#CCCCCC"><input type="text" id="f" placeholder="请输入其他支出" size="20"/></td>
<td> 支出合计：<font color="red" id="txt5">0.00元</font></td>
</tr>
</table>
<h2>分公司收入</h2>
<table>
<tr>
<td> 合计支出比例</td>
<td> <font color="red" id="txt10">0.00元</font></td>
<td> 分公司收入比例</td>
<td background="#CCCCCC"><input type="text" id="g" placeholder="请输入分公司收入比例" size="20"/></td>
<td> 分公司毛收入：<font color="red" id="txt6">0.00元</font></td>
</tr>
<tr>
<td> 佣金税费补差额</td>
<td> <font color="red" id="txt7">0.00元</font></td>
<td><select id="i">
<option>0.0672</option>
<option>0.0336</option>
<option>0.0112</option>
</select></td>
<td> 分销开票税点</td>
<td background="#CCCCCC"><input type="text" id="h" placeholder="请输入分销开票税点" size="20"/></td>
<td> 分销奖励税差</td>
<td background="#CCCCCC"><input type="text" id="j" placeholder="请输入分销奖励税差" size="20"/></td>
<td> 转现成本（15%）：<font color="red" id="txt8">0.00元</font></td>
</tr>
</table>
<h2>分公司可分配参考 <font color="red" id="txt9">0.00元</font></h2>
<p>分公司利润计算公式：依照总支出比例核算总部管理费；收入合计-总部管理费-分销佣金-其他支出-税费补差-转现成本=分公司收入</p>
<script type="text/javascript">
var a = document.getElementById("txt1");
var b = document.getElementById("txt2");
var txt3 = document.getElementById("txt3")
b.onmouseout = function(){
txt3.innerHTML = a.value*b.value;//最低房款
}
var d = document.getElementById("d");
var c = document.getElementById("c");
var txt4 = document.getElementById("txt4");
d.onmouseout = function(){
txt4.innerHTML = parseFloat(a.value*b.value*c.value)+parseInt(d.value);//收入合计
}
var e = document.getElementById("e");//分销佣金
var f = document.getElementById("f");//其他支出
var txt5 = document.getElementById("txt5");
f.onmouseout = function(){
txt5.innerHTML = parseFloat(a.value*b.value*e.value)+parseFloat(f.value);//支出合计
}
var g = document.getElementById("g");//分公司收入比例
var txt6 = document.getElementById("txt6")//分公司毛收入
g.onmouseout = function(){
txt6.innerHTML = ( (parseFloat(a.value*b.value*c.value)+parseInt(d.value))*parseFloat(g.value))-(parseFloat(a.value*b.value*e.value)+parseFloat(f.value));
//分公司毛收入(txt6)=收入合计(txt4)*分公司收入比例(g)-支出合计(txt5)
}
var h = document.getElementById("h");//分销开票税点
var i = document.getElementById("i");//百分比
var txt7 = document.getElementById("txt7");//佣金税费补差额
i.onmouseout = function(){
txt7.innerHTML = (parseInt(a.value*b.value*c.value))*parseFloat(parseFloat(i.value)-parseFloat(h.value));
}
var txt8 = document.getElementById("txt8");
txt8.onclick = function(){
txt8.innerHTML = parseFloat(f.value/0.85)-parseFloat(f.value);//转现成本（15%）
}
var j = document.getElementById("j");//分销奖励税差
var txt9 = document.getElementById("txt9");//分公司可分配参考
j.onmouseout = function(){
txt9.innerHTML = (( ((parseFloat(a.value*b.value*c.value)+parseInt(d.value))*parseFloat(g.value))-(parseFloat(a.value*b.value*e.value)+parseFloat(f.value)))-((parseInt(a.value*b.value*c.value))*parseFloat(parseFloat(i.value)-parseFloat(h.value)))-parseFloat(j.value)-(parseFloat(f.value/0.85)-parseFloat(f.value)))
}//分公司可分配参考(txt9)=分公司毛收入(txt6)-佣金税费补差额(txt7)-分销奖励税差(j)-转现成本(txt8)
var txt10 = document.getElementById("txt10");//支出比例
txt10.onclick = function(){
txt10.innerHTML = parseFloat((parseFloat(a.value*b.value*e.value)+parseFloat(f.value))/(parseInt(a.value*b.value*c.value)+parseInt(d.value)))
}
</script>
</body>
</html>
此处是单纯用HTML来实现的代码效果，没有使用CSS，各种公式参考如下：
最低房款=钱*S
收入合计(txt4)=最低房款(txt3)*代理费点位©+代理费固定佣金(d)
支出合计(txt5)=最低房款(txt3)*分销佣金(e)+其他支出(f)
分公司毛收入(txt6)=收入合计(txt4)*分公司收入比例(g)-支出合计(txt5)
支出比例（txt10)=支出合计(txt5)/收入合计(txt4)
佣金税费补差额(txt7)=最低房款(txt3)代理费点位©（6.72%（i）-分销开票税点（h）)6.72（默认）；3.36；1.12
转现成本（15%）(txt8)=其他支出(f)/0.85-其他支出(f)
分公司可分配参考(txt9)=分公司毛收入(txt6)-佣金税费补差额(txt7)-分销奖励税差(j)-转现成本(txt8)
JS的DOM操作：监听器监听鼠标，mouse相关事件。以下是 鄙人总结的JS的笔记DOM操作：
document相关（文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。）：
querySelector是新版本通用的，但只能选中一个，要想选中多个，只能使用querySelectorAll
.执行事件的步骤：获取事件源；注册事件（绑定事件）；添加事件处理程序（采用函数赋值）
innerText无法识别HTML标签；innerHTML可以识别HTML（超文本标记语言）标签（区别）注：Hbuilder如果script部分没有完成编写，会导致功能使用不完备。
JS中oninput事件：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。
jQuery
以下是代码段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquerytest</title>
<style type="text/css">
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<h2>房源示例</h2>
<table>
<tr>
<td> 产品均价</td>
<td background="#CCCCCC"><input type="text" id="txt1" placeholder="请输入产品均价" size="22" /></td>
<td> 主力户型面积</td>
<td background="#CCCCCC"><input type="text" id="txt2" placeholder="请输入户型面积" size="22"/></td>
<td> 最低房款：<font color="red" id="txt3">0.00元</font></td>
</tr>
</table>
<h2>房源收支</h2>
<table>
<tr>
<td> 代理费点位</td>
<td background="#CCCCCC"><input type="text" id="c" placeholder="请输入代理费点位" size="22" /></td>
<td> 代理费固定佣金</td>
<td background="#CCCCCC"><input type="text" id="d" placeholder="请输入代理费固定佣金" size="20"/></td>
<td> 收入合计：<font color="red" id="txt4">0.00元</font></td>
</tr>
<tr>
<td> 分销佣金</td>
<td background="#CCCCCC"><input type="text" id="e" placeholder="请输入分销佣金" size="10" /></td>
<td> 其他的支出费用</td>
<td background="#CCCCCC"><input type="text" id="f" placeholder="请输入其他支出" size="20"/></td>
<td> 支出合计：<font color="red" id="txt5">0.00元</font></td>
</tr>
</table>
<h2>分公司收入</h2>
<table>
<tr>
<td> 合计支出比例</td>
<td> <font color="red" id="txt10">0.00元</font></td>
<td> 分公司收入比例</td>
<td background="#CCCCCC"><input type="text" id="g" placeholder="请输入分公司收入比例" size="20"/></td>
<td> 分公司毛收入：<font color="red" id="txt6">0.00元</font></td>
</tr>
<tr>
<td> 佣金税费补差额</td>
<td> <font color="red" id="txt7">0.00元</font></td>
<td><select id="i">
<option>0.0672</option>
<option>0.0336</option>
<option>0.0112</option>
</select></td>
<td> 分销开票税点</td>
<td background="#CCCCCC"><input type="text" id="h" placeholder="请输入分销开票税点" size="20"/></td>
<td> 分销奖励税差</td>
<td background="#CCCCCC"><input type="text" id="j" placeholder="请输入分销奖励税差" size="20"/></td>
<td> 转现成本（15%）：<font color="red" id="txt8">0.00元</font></td>
</tr>
</table>
<h2>分公司可分配参考 <font color="red" id="txt9">0.00元</font></h2>
<p>分公司利润计算公式：依照总支出比例核算总部管理费；收入合计-总部管理费-分销佣金-其他支出-税费补差-转现成本=分公司收入</p>
<script>
$(function(){//入口函数，不必考虑顺序问题
$("#txt2").mouseout(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
$("#txt3").html(a*b);
})
$("#d").mouseout(function(){
var c = $("#c").val();
var d = $("#d").val();
var a = $("#txt1").val();
var b = $("#txt2").val();
$("#txt4").html(parseFloat(a*b*c)+parseFloat(d));
})
$("#f").mouseout(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
var e = $("#e").val();
var f = $("#f").val();
$("#txt5").html(parseFloat(a*b*e)+parseFloat(f));
})
$("#g").mouseout(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
var c = $("#c").val();
var d = $("#d").val();
var e = $("#e").val();
var f = $("#f").val();
var g = $("#g").val();
$("#txt6").html(((parseFloat(a*b*c)+parseFloat(d))*parseFloat(g))-(parseFloat(a*b*e)+parseFloat(f)));
})
$("#i").mouseout(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
var c = $("#c").val();
var i = $("#i").val();
var h = $("#h").val();
$("#txt7").html(parseFloat(a*b*c)*(parseFloat(i)-parseFloat(h)))
})
$("#txt8").click(function(){
var f = $("#f").val();
$("#txt8").html(parseFloat(f/0.85)-parseFloat(f));
})
$("#j").mouseout(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
var c = $("#c").val();
var d = $("#d").val();
var e = $("#e").val();
var f = $("#f").val();
var g = $("#g").val();
var i = $("#i").val();
var h = $("#h").val();
var j = $("#j").val();
$("#txt9").html(((parseFloat(a*b*c)+parseFloat(d))*parseFloat(g))-(parseFloat(a*b*e)+parseFloat(f))-(parseFloat(a*b*c)*(parseFloat(i)-parseFloat(h)))-(parseFloat(f/0.85)-parseFloat(f))-parseFloat(j));
})
$("#txt10").click(function(){
var a = $("#txt1").val();
var b = $("#txt2").val();
var c = $("#c").val();
var d = $("#d").val();
var e = $("#e").val();
var f = $("#f").val();
$("#txt10").html(parseFloat((parseFloat(a*b*e)+parseFloat(f))/(parseFloat(a*b*c)+parseFloat(d))));
})
})
</script>
</body>
</html>
以下是鄙人当时总结的一些有关jquery的笔记：
常用 ( f u n c t i o n ( ) X x x x x x ) ; ! [ 在 这 里 插 入 图 片 描 述 ] ( h t t p s : / / i m g − b l o g . c s d n i m g . c n / 20210211230044825. p n g ) 3. (function(){ Xxxxxx });  3. (function()Xxxxxx);3.是jquery的顶级对象，相当于js中的windows
4.用原生DOM获取来的对象是DOM对象，只能使用原生javascript的属性和方法；而jQuery对象只能使用jQuery属性和方法
5.jQuery与DOM 的相互转化：
（1）直接 获 取 （ 2 ） D o c u m e n t 定 以 后 还 是 在 下 一 行 获取 （2）Document定以后还是在下一行 获取（2）Document定以后还是在下一行
（3）因为jQuery是 对 D O M 进 行 封 装 的 伪 数 组 ， 因 此 可 以 使 用 数 组 的 方 式 将 j Q u e r y 化 为 D O M ； （ 4 ） 对DOM进行封装的伪数组，因此可以使用数组的方式将jQuery化为DOM； （4） 对DOM进行封装的伪数组，因此可以使用数组的方式将jQuery化为DOM；（4）(“xxx”)[index].play();或$(“xxx”).get(0).play();注：play方法只能用于原生DOM
jQuery选择器：
隐式迭代：
$(‘div’).css(‘background’,”pink”)
筛选选择器：
Vue
以下是代码段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuetest</title>
<style type="text/css">
.color {
color: red;
};
.box0{/* 总体的大盒子 */
padding: 3em;
}
.title{/* 标题行 */
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: bold;
}
.box1{/* 是一行内容的盒子 */
height: 30px;
line-height: 30px;/* 两个值必须相同否则会出现错位 */
font-size: 16px;
/* overflow: hidden; */
}
.box2{/* 每一个需要输入的量的盒子 */
float: left;
padding-left: 40px;
}
.box3_1{
margin-right: 10px;/* 同一行两相邻之间的那个小格 */
}
.box3_1,.box3_2{
float: left;/* 向左浮动 */
}
.box3_2 input{/* 输入框内的样式 */
width: 150px;
height: 15px;
line-height: 30px;
}
.spanbox {
padding-left: 40px;
}
</style>
<script src="vue.min.js"></script>
</head>
<body>
<div id="content">
<div class="box0">
<div class="title">房源示例</div>
<div class="box1">
<div class="box2">
<div class="box3_1">产品均价</div>
<div class="box3_2"><input type="text" @input="f1()" v-model="txt1" placeholder="请输入产品均价" size="22" /></div>
</div>
<div class="box2">
<div class="box3_1">主力户型面积</div>
<div class="box3_2"><input type="text" @input="f1()" v-model="txt2" placeholder="请输入户型面积" size="22" /></div>
</div>
<div class="box2">
<div class="box3_1" >最低房款: <span class="color">{
{txt3}}元</span></div>
</div>
</div>
</div>
<div class="box0">
<div class="title">房源收支</div>
<div class="box1">
<div class="box2">
<div class="box3_1">代理费点位</div><!-- 用百分比 -->
<div class="box3_2"><input type="text" @input="f1()" v-model="c" placeholder="请输入代理费点位" size="22" /></div>
</div>
<div class="box2">
<div class="box3_1">代理费固定佣金</div>
<div class="box3_2"><input type="text" @input="f1()" v-model="d" placeholder="请输入代理费固定佣金" size="20" /></div>
</div>
<div class="box2">
<div class="box3_1">收入合计: <span class="color">{
{txt4}}元</span></div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3_1">分销佣金</div><!-- 用百分比 -->
<div class="box3_2"><input type="text" @input="f1()" v-model="e" placeholder="请输入分销佣金" size="10" /></div>
</div>
<div class="box2">
<div class="box3_1">其他的支出费用</div>
<div class="box3_2"><input type="text" @input="f1()" @change="f1()" v-model="f" placeholder="请输入其他支出" size="20" /></div>
</div>
<div class="box2">
<div class="box3_1">支出合计：<span class="color">{
{txt5}}元</span></div>
</div>
</div>
</div>
<div class="box0">
<div class="title">分公司收入</div>
<div class="box1">
<div class="box2">
<div class="box3_1">合计支出比例</div>
<div class="box3_1"><span class="color" @click="f1()">{
{txt6}}</span></div>
</div>
<div class="box2">
<div class="box3_1">分公司收入比例</div>
<div class="box3_2"><input type="text" @input="f1()" v-model="g" placeholder="请输入分公司收入比例" size="20" /></div>
</div>
<div class="box2">
<div class="box3_1">分公司毛收入：<span class="color">{
{txt7}}元</span></div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3_1">佣金税费补差额</div>
<div class="box3_1"><span class="color">{
{txt8}}元</span></div>
</div>
<div class="box2">
<div class="box3_1">分销开票税点</div>
<!-- <div class="box3_2"><input type="text" @input="f1()" v-model="h" placeholder="请输入分销开票税点" size="20" /></div> -->
<div class="box3_1"><select v-model="i" @change="f1(i)">
<option>6.72%</option>
<option>3.36%</option>
<option>1.12%</option>
</select></div>
<div class="box3_1">全部回款支付</div>
<!-- <div class="box3_2"><input type="text" @input="f1()" v-model="h" placeholder="请输入全部回款支付" size="20" /></div> -->
<div class="box3_1"><select v-model="k" @change="f1(k)"><!-- k代表全部回款支付 -->
<option>6.72%</option>
<option>3.36%</option>
<option>1.12%</option>
</select></div>
<div class="box3_1">分销奖励税差: <span class="color">{
{j}}元</span></div>
</div>
<div class="box2">
<div class="box3_1">转现成本（15%）：<span class="color">{
{txt9}}元</span></div>
</div>
</div>
</div>
<div class="box0">
<div class="title">分公司可分配参考<span class="color spanbox">{
{txt10}}元</span></div>
<div>分公司利润计算公式：依照总支出比例核算总部管理费；收入合计-总部管理费-分销佣金-其他支出-税费补差-转现成本=分公司收入</div>
</div>
<script src="vue.min.js"></script>
<script>
var new_1 = new Vue({
el: '#content',
data: {
txt1: '',
txt2: '',
txt3: "0.00", //字符串
c: '',
d: '',
txt4: "0.00",
e: '',
f: '',
txt5: "0.00",
txt6: "0.00",
txt7: "0.00",
g: '',
i: '6.72%',
j: '0.00',
k: '6.72%',
txt8: "0.00",
txt9: "0.00",
txt10: "0.00",
},
methods: {
func(num) { //这里使用了新的方法，可以再定义一个obj代表txt3但是此处obj所指向的txt3的地址和之后this里所指向的txt3的地址是不同的
if (isNaN(num)) { //this.txt3所指向的是new_1这个对象地址，因此必须使用return返回
alert('请输入有效数字')
} else {
return num;
}
},
numFilter(value) {
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2);
// num.toFixed(2)获取的是字符串
return parseFloat(realVal);
},
toPoint(percent){//百分数转小数
var str=percent.replace("%","");
str= str/100;
return str;
},
f1() {
if (this.txt1 != '' && this.txt2 != '') { //因为都在一个对象里，所以this指针指向的是同一个data
var a1 = this.txt1 * this.txt2;
new_1.txt3 = this.func(a1);
if (this.c != '' && this.d != '') {
var a2 = parseFloat(new_1.txt3 * new_1.c) + parseFloat(new_1.d);
this.txt4 = this.func(a2);
if (this.e != '' && this.f != '') {
var a3 = parseFloat(new_1.txt3 * new_1.e) + parseFloat(new_1.f);
this.txt5 = this.func(a3);
if (this.g != '') {
var a4 = this.txt4 * this.g - this.txt5;
this.txt7 = this.func(a4);
var a5 = parseFloat(new_1.txt3 * new_1.c) * parseFloat(0.0672-new_1.toPoint(new_1.i));
this.txt8 = this.numFilter(this.func(a5));
this.txt9 = this.numFilter(parseFloat(new_1.f / 0.85) - parseFloat(new_1.f));
this.txt6 = this.numFilter(parseFloat(parseFloat(this.txt5)/ parseFloat(this.txt4)));
this.j = new_1.toPoint(new_1.k)*new_1.txt3*(0.0672-new_1.toPoint(new_1.i));//税差
console.log(this.txt9)
this.txt10 = parseFloat(new_1.txt7) - parseFloat(new_1.txt8) - parseFloat(new_1.txt9) - parseFloat(new_1.j);
// if (this.j != '') {
// var a6 = parseFloat(new_1.txt7) - parseFloat(new_1.txt8) - parseFloat(new_1.txt9) - parseFloat(new_1.j);
// this.txt10 = this.numFilter(this.func(a6));
// this.txt6 = this.numFilter(parseFloat(parseFloat(this.txt4)/ parseFloat(this.txt5)));//合计支出比例
// this.txt9 = this.numFilter(parseFloat(new_1.f / 0.85) - parseFloat(new_1.f));//转现成本
// }
//}
}
}
}
}
},
} //对应methods
})
</script>
</body>
</html>
以下是鄙人当时总结的一些有关Vue的笔记：
BG：有关MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化对于第一次接触的人看了上面的解释之后，可能还是似懂非懂，那么让我们从基础的看起吧，刚才我们说过MVVM是它本质上就是MVC的改进版。那么MVC又是什么？它为什么需要改进呢？
MVC全名是Model View Controller，MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早，前端并不那么成熟，很多业务逻辑也是在后端实现，所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC，是因为大前端的来到，出现了MVVM模式的框架，我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。
为什么会有MVVM框架？
在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。
1.javascript框架，简化DOM操作，响应式数据驱动；
2.在Vue中不能使用分号结尾；
3.el:挂载器；设置vue实例挂载元素
4.Vue实例的作用范围：el选项命中的元素及其内部的后代元素
5.可以使用其他选择器，但是建议使用ID选择器；
6.可以设置其他的dom元素，可以使用其他的双标签，不能使用html和body
8.注意类之后的冒号和每一处逗号
9.vue指令:
(1).v-text指令用法放到标签里然后v-text=“message”；默认是替换全部内容
(2)部分内容替换使用差值表达式；
v-html：设置innerHTML内容
(4)v-bind是 Vue中，提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式，v-bind: 指令可以被简写为 :要绑定的属性
10.document.write(vm. d a t a = = = d a t a ) / / t r u e ； 11. d o c u m e n t . w r i t e ( v m . data === data) // true； 11.document.write(vm. data===data)//true；11.document.write(vm.el === document.getElementById(‘vue_det’)) // true
12.如何实现一串字符串的反转顺序输出？{
{message.split(‘’).reverse().join(‘’)}}
13.HTML中pre标签简单来说就是可以输出其中的代码和空格等格式，不会像别的标签一样去忽略空格等，要想显示源代码还应该加上.注意他可以输出HTML标签也可以使用href属性；但注意，文本过长时会出现代码溢出的现象，对此应该如何解决？
Solution：(1)给pre标签定义横向滚动条(2)使用text-wrapping
直接定义pre标签里的css属性white-space的值为pre-wrap。
Pre{
Overflow:auto;
}
Pre{
White-space:pre-wrap;
}
14.v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
15.v-on的简写是@
16.Vue文件中监听input输入事件v-on:input
可以简写为@input = “函数名”
17.vue中鼠标事件
@click//单击@mousedown//按下@mouseup//抬起@dblclick//双击@mousemove//移动@mouseleave//离开@mouseout //移出@mouseenter//进入@mouseover//在
18.截取两位小数：JS中toFixed() 方法可把 Number 四舍五入为指定小数位数的数字
numFilter(value) {
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2);
// num.toFixed(2)获取的是字符串
return parseFloat(realVal);
},
最后预祝大家牛年大吉，牛年牛逼！码力值满满！考研保研的成功！职场的顺利，头发不掉！