一、環境
- webstorm / vs code
- node (nvm是node版本管理工具)
- Chrome調試+vue.js devtools
二、第一個小應用
VUE 可以減少dom操作，很棒！
前端開源項目 CDN 加速服務：https://www.bootcdn.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id ="bg">
<!--方法1
只會替換msg裏的內容，如果頁面解析到這裏沒有檢測到vue，則會引發閃爍問題
此時可以用 v-cloak 屬性解決
-->
<p v-cloak> {{msg}} </p> <!--插值表達式，引入vue數據-->
<!--方法2
此方法會覆蓋標籤內全部數據，但不會引發像插值表達式一樣的閃爍問題
-->
<p v-text ="msg"> </p>
<!--正確解析msg2裏的html標籤，和 v-text 一樣會覆蓋標籤內所以內容-->
<div v-html="msg2"></div>
<!--v-bind 綁定屬性變量，簡寫是 :title = "XX" -->
<input type ="button" value = "按鈕" v-bind:title = "mytitle + '123' ">
<!--v-on:click 事件綁定機制，簡寫用 @click 表示，這裏的方法必須在methords有定義-->
<input type ="button" value = "按鈕" v-on:click = "show">
</div>
<script>
new Vue({
el:"#bg", //指向文檔節點
//數據
data:{
msg:"hello vue!" ,
msg2:"<h3>我是標題</h3>",
mytitle:"我是自定義title"
},
//定義當前vue實例中所以可用的方法
methords:{
show:function(){
alert("hello")
}
},
//監聽
watch:{},
//計算
computed{}
})
</script>
</body>
</html>