时间:2个小时左右
代码:230行左右
博客:1
知识点:双向数据绑定，v-model，mvvm等等
1.v-model
v-model是一个指令，限制在 <input>、<select>、<textarea>、components 中使用
<div id="app">
<div>{{msg}}</div>
<div>
当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>
2.mvvm
MVC 是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前 端的视图层，分为了 三部分 Model, View , VM ViewModel
m model：数据层 Vue 中 数据层 都放在 data 里面
v view ：视图 Vue 中 view 即 我们的HTML页面
vm （view-model）： 控制器 将数据和视图层建立联系 vm 即 Vue 的实例 就是 vm
3.v-on
用来绑定事件的 形式如：v-on:click 缩写为 @click;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
双向数据绑定
1、从页面到数据
2、从数据到页面
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
