<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="UTF-8" />
? ? <title>理解MVVM</title>
? ? <!-- 引入Vue -->
? ? <script type="text/javascript" src="../js/vue.js"></script>
? </head>
? <body>
? ? <!--
? ? ? MVVM模型
? ? ? ? ? ? 1. M：模型(Model) ：data中的數(shù)據(jù)
? ? ? ? ? ? 2. V：視圖(View) ：模板代碼
? ? ? ? ? ? 3. VM：視圖模型(ViewModel)：Vue實例
? ? ? 觀察發(fā)現(xiàn)：
? ? ? ? ? ? 1.data中所有的屬性，最后都出現(xiàn)在了vm身上。
? ? ? ? ? ? 2.vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用。
? ? -->
? ? <!-- 準(zhǔn)備好一個容器-->
? ? <div id="root">
? ? ? <h1>學(xué)校名稱：{{name}}</h1>
? ? ? <h1>學(xué)校地址：{{address}}</h1>
? ? ? <!-- <h1>測試一下1：{{1+1}}</h1>
? ? ? <h1>測試一下2：{{$options}}</h1>
? ? ? <h1>測試一下3：{{$emit}}</h1>
? ? ? <h1>測試一下4：{{_c}}</h1> -->
? ? </div>
? </body>
? <script type="text/javascript">
? ? Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
? ? const vm = new Vue({
? ? ? el:'#root',
? ? ? data:{
? ? ? ? name:'尚硅谷',
? ? ? ? address:'北京',
? ? ? }
? ? })
? ? console.log(vm)
? </script>
</html>
