初识vue
认识了mvvm的设计模式,MVVM将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。即,ViewModel 是一个 View 信息的存储结构,ViewModel 和 View 上的信息是一一映射关系。
最开始的小代码(别嘲笑哈,最基础的)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- vm viewmodel 关联view和model -->
</head>
<body>
<!-- view 视图部分 -->
<div id="app">
{{message}}
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
// model 模型部分
data:{
message:"hello world!",
msg:"前端框架",
}
})
</script>
</body>
</html>
运行
view视图部分
<div id="app">
{{message}}
<h1>{{msg}}</h1>
</div>
model模型部分
var app = new Vue({
el:'#app',
data:{
message:"hello world!",
msg:"前端框架",
}
})
今日目标:
- vue的入门
最终目标:
-完成一个在线阅读的网站!加油