<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初識Vue</title> <!-- 引入Vue --> <script type="text/javascript" src="./js/vue.js"></script> ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初識Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!--
初識Vue：
1.想讓Vue工作，就必須創建一個Vue實例，且要傳入一個配置對象；
2.root容器里的代碼依然符合html規範，只不過混入了一些特殊的Vue語法；
3.root容器里的代碼被稱為【Vue模板】；
4.Vue實例和容器是一一對應的；
5.真實開發中只有一個Vue實例，並且會配合著組件一起使用；
6.{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性；
7.一旦data中的數據發生改變，那麼頁面中用到該數據的地方也會自動更新；
註意區分：js表達式 和 js代碼(語句)
1.表達式：一個表達式會產生一個值，可以放在任何一個需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代碼(語句)
(1). if(){}
(2). for(){}
-->
<!-- 準備好一個容器 -->
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
//創建Vue實例
new Vue({
el:'#demo', //el用於指定當前Vue實例為哪個容器服務，值通常為css選擇器字元串。
data:{ //data中用於存儲數據，數據供el所指定的容器去使用，值我們暫時先寫成一個對象。
name:'atguigu',
address:'北京'
}
})
</script>
</body>
</html>
