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模版中都可以直接使用