碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（初體驗）
1、vue.js的引入
需要先去官網下載vue.js，然後在我們需要使用的html文件中引入該js文件
<script src="../js/vue.js"></script>
或者cdn引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、vue.js的使用
2.1、vue對象的創建與數據綁定
創建Vue對象，直接 new Vue() ，在new的時候傳入一個待vue解析的對象，這個對象含有一些屬性，比如：el（用於掛載要管理的元素），data（定義的數據，最終會替換html中指定的變量值）等等
{{屬性名}} 作爲值替換，會被傳入vue對象中的屬性值替換掉，該屬性定義在傳入對象的data屬性中，與花括號中的屬性名稱一致，解析的時候就會從data中找出相同名稱的屬性，把該屬性的值用來替換{{屬性名}}
v-for 是vue標籤中指定for循環的標籤，標籤對應的值的也就是類似python中for循環或者java中foreach的寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{屬性名}} 作爲值替換，會被傳入vue對象中的屬性值替換掉，該屬性定義在傳入對象的data屬性中，
與花括號中的屬性名稱一致，解析的時候就會從data中找出相同名稱的屬性，把該屬性的值用來替換{{屬性名}}-->
{{message}}
<ul>
<!-- v-for是vue標籤中指定for循環的標籤，標籤對應的值的也就是類似python中for循環或者java中foreach的寫法-->
<li v-for="item in lists">{{item}}</li>
</ul>
</div>
<script>
//let（變量）/const（常量）
//編程範式，聲明式編程
const app = new Vue({
el:'#app', //用於掛載要管理的元素，類似於jquery中$("#"),找到要操作的DOM節點
data:{ //定義的數據，這些定義的數據，只在el 掛在的元素標籤的內部才能使用解析
message:"你你好啊，兄弟",
lists:['星際','盜夢','少年'],
}
})
</script>
</body>
</html>
效果
2.2、vue監聽事件
vue事件，以 v-on: 開頭，指定不同的事件，事件的屬性值可以是方法，也可以是代碼片段，方法定義在傳入vue的對象的methods屬性中，vue內部調用data屬性中數據對象的屬性必須同 this 來指定
@ 是語法糖的一種寫法，等價於 v-on: ,爲了簡寫方便，用以替換v-on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>當前計數：{{counter}}</span>
<!-- vue事件，以v-on:開頭，指定不同的事件，事件的屬性值可以是方法，也可以是代碼片段-->
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<button v-on:click="add">+2</button>
<button v-on:click="sub">-2</button>
<!-- @是語法糖的一種寫法，等價於v-on:,爲了簡寫方便，用以替換v-on:-->
<button @click="counter++">@+</button>
<button @click="counter--">@-</button>
</div>
<script>
//let（變量）/const（常量）
//編程範式，聲明式編程
const app = new Vue({
el:'#app', //用於掛載要管理的元素，類似於jquery中$("#"),找到要操作的DOM節點
data:{ //定義的數據，這些定義的數據，只在el 掛在的元素標籤的內部才能使用解析
counter:0
},
methods:{//定義的方法，這些定義的方法也是隻有在el 掛在的元素標籤的內部才能使用解析
add: function () {
console.log("add被執行")
/*調用data屬性裏的數據，必須用this指定，因爲vue實例相當於爲我們做了一層代理，並不是app.data.counter這種調用方式，
這種是不能被識別的 */
this.counter += 2;
},
sub: function () {
console.log("sub被執行")
this.counter -= 2;
}
}
})
</script>
</body>
</html>
效果
