1.重學Vue 初識Vue
阿新 • • 發佈：2022-01-09
<!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="root">
<h1>hello word!</h1>
<h1>我的名字是：{{name}},{{address}},{{Date.now()}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;//關閉F12開發者VUE引用提示
//建立Vue例項
new Vue({
el:"#root", //el用於指定當前Vue例項為哪個容器服務,值通常為css選擇器字串
data:{//data中用於儲存資料,資料供el所指定的容器去使用,值我們暫時先寫成一個物件.
name:"夢曉軒",
address:"上海"
}
});
</script>
</html>