MVC的核心理念是:你应该把管理数据的代码(Model)、业务逻辑的代码(Controller)、以及向用户展示数据的代码(View)清晰的分离开
模型:代表应用当前的状态
视图:用于展示数据,用于接口
控制器:用来管理模型和视图之间的关系
通过MVC框架又衍生出了许多其它的架构,统称MV*,最常见的是MVP与MVVM
MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。
Vue与Angular就是一个MVVM框架,MVVM与MVC最大的区别是模型与视图实现了双向绑定。
在Vue中用户自定义的实例就是vm,功能与Controller类似
Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人。
代码如下
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="../lib/vue.min.js"></script>
</head>
<body>
<h1 id="hid" >{{message}},{{hello()}}</h1>
<div id="did">
<h1 v-html="vhtml" v-bind:title="vbind">Vue快速学习</h1>
<h1 v-text="vtext">Vue的世界</h1>
</div>
<div id="div2">
<h1 style="color: purple ;text-align:center">流程控制和双向绑定</h1>
双向绑定框:<input type="text" v-model="vmodel" style="color: red">{{vmodel}}
<div v-if="vif">
<table v-for="x in vfor" border="3px" cellpadding="5px">
<tr>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
</div>
<div id="div3">
<h1 style="color: olivedrab">事件:{{vclick}}</h1>
<button v-on:click="show">点击吧</button>
</div>
<script>
new Vue({
el:"#div3",
data:{
vclick:"点击"
},
methods: {
show:function () {
this.vclick="The click";
alert("点击事件");
this.hide();
},
hide:function () {
alert("方法互相调用。。。")
}
}
})
</script>
<script>
new Vue({
el:"#div2",
data:{
vmodel:"This is v-model",
vif:true,
vfor:[
{name:"Tom",age:18},
{name:"Jack",age:31},
{name:"Sally",age:14}
]
}
})
</script>
<script>
var x=new Vue({
el:'#hid',
data:{
message:"Hello Vue.js",
title:"新的学习开始了。。。"
},
methods:{
hello:function () {
return this.title+"来了Vue!"
}
}
});
document.write("取到了Vue中的数据"+x.message+" "+x.hello());
document.write("取到了元数据。。。"+x.$el+" "+x.$data+"");
</script>
<script>
var base={one:"<h1 align='center'>Vue属性替换</h1>",two:"这是属性被替换了"};
var vh=new Vue({
el:"#did",
data:{
vhtml:base.one,
vbind:base.two,
vtext:"文本替换了呀"
}
})
</script>
</body>
</html>