Vue学习记录-7
1、学习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js"></script>
<title>MVVM</title>
</head>
<body>
<!-- view -->
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<!-- <h1>测试1：{{$options}}</h1>
<h1>测试2：{{$emit}}</h1> -->
</div>
<script>
Vue.config.produtionTip=false
const vm = new Vue({//viewmodel
el:'#root',
data(){
return{
//model
name:'北方工业大学',
address:'北京市'
}
}
})
</script>
</body>
</html>
2、学习总结
MVVM模型：
- M：模型（model），data中的数据
- V：视图（View），模版代码
- VM：视图模型（ViewModel），Vue实例
观察发现：
- data中的所有属性，最后都会出现在vm身上
- vm身上的属性及Vue原型上所有属性，在Vue模版中都可以直接使用
1561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
