<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初識Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="https://www.cnblogs.com/liuyz7975/archive/2022/04/20/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>
參考筆記
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/460857.html
標籤：其他
上一篇：Node.js基礎入門第十天