Vue.js 是一个非常流行的前端js框架,对js语法做了大量的封装,使语法简洁,功能强大,体积小,并且具有更高的运行效率。
网页操作-->最原始的方式来操作-->框架
Vue实现数据和视图之间的双向数据绑定,简化dom操作。M(model) V(view) VM(vm)
举例:
要想将文本框里输入的值实时的复制到p标签里面,我们的做法是给input标签添加事件来调用js里面的函数来完成,通过Dom来进行一个值的传输。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function copy(value){
document.getElementById("p1").innerHTML = value;
}
</script>
</head>
<body>
<p id="p1">
</p>
<input type="text" onkeyup="copy(this.value)" />
</body>
</html>
Vue2.js(用户输入处理双向绑定)里面有对此的改进方法:
由此红色箭头可见,Input输入框数据的改变,会引起Vue里面的message变化,从而导致p标签里面的内容改变。反之蓝色箭头数据绑定也同理。