vue提供了一整套前端解决方案,可以提升企业开发效率
vue的处理过程
app.js
项目入口,所有请求最先进入此模块进行处理
route.js
由app.js调用,处理路由的分发
controller.js
处理各种业务
model.js
执行增删改查crud(create、read、update、delete)
MVC
即model(M)、html(V)、route、controller(c)
MVVM
VM是连接M和V的中介角色,VM提供了数据的双向绑定,作为view的html展示数据时需要调用VM,VM调用model取数据再返回给html,html需要操作数据则调用VM,VM调用model来完成对数据的增删改查
创建vue对象
vue不需要调用类似inser的js方法将数据插入dom元素,你只需要指定需要dom元素的class或id,然后指定数据,它会自动对元素所包含的内容中的任何具有插值表达式的地方进行填充。下面是一个简单的示例:
<script src="Scripts/vue-2.4.0.js"></script>
<body>
<div id="app">
{{msg}} //插值表达式,可以写vue对象中的data的任何变量,也即只有绑定了vue对象的html元素,它内部才可以使用插值表达式,否则会被当成纯文本输出
</div>
</body>
<script type="text/javascript">
var vm = new Vue({ //vue对象就是MVVM中的VM中介者
el: "#app",
data: { //data里可以自定义任意的多个变量
msg:"hello world!" //model
}
});
</script>
<body>
<div id="app">
{{msg}} //插值表达式,可以写vue对象中的data的任何变量,也即只有绑定了vue对象的html元素,它内部才可以使用插值表达式,否则会被当成纯文本输出
</div>
</body>
<script type="text/javascript">
var vm = new Vue({ //vue对象就是MVVM中的VM中介者
el: "#app",
data: { //data里可以自定义任意的多个变量
msg:"hello world!" //model
}
});
</script>