创建vue_02_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
<input type="text" v-model="num1"/> +
<input type="text" v-model="num2"/>=
<span>{{num1+num2}}</span>
</div>
</body>
<script>
//编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
num1:2,
num2:3,
result:5,
}
});
</script>
</html>
运行
当改变为134则结果集自动变为1343
v-model:实现双向数据绑定:
a.由模型数据绑定到Dom对象,模型数据的值改变,Dom对象的值自动改变
b.由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值自动改变