第一天
初識Vue
1矗漾、 引入Vue ?
?<script src="../vue/vue.js"></script>
[if !supportLists]2药薯、?[endif]準備一個容器
<div id=”app”>
<h2> 姓名：{{name}} </h2>
<h2> 年齡：{{age}} </h2>
<button ?v-on:click=“updateName”> 修改姓名</button>
</div>
[if !supportLists]3、?[endif]創(chuàng)建一個Vue對象
let vm=new Vue({
el:”#app”,?選定Vue操作的DOM容器
??????data:{ 定義當前Vue管理的數據
name:”張三”,
age:20
},
methods:{ 定義當前Vue管理的方法
updateName(){
this.name=”李四”
},
updataAge(){
this.age=33}
}
})
Vue的響應式原理
代理對象：
定義一個源對象obj1狂丝，然后let obj2=obj1换淆，obj2就是obj1的代理對象哗总，如果給代理對象進行修改重新賦值，那么源對象也會變
// 定義一份數據
let myData={
name:'lili',
age:23}
將一個數據傳遞給Vue的data選項倍试，它背后做了兩件事情
1讯屈、設置Vue實例的_data屬性，作為當前數據的代理對象（響應式核心
2县习、將_data里代理的所有數據涮母，再添加到當前Vue實例身上（為了Vue實例方便調用數據
let vm=new Vue({
data:myData
})
let obj3={}
方式一
obj3.name="張震"
方式二
obj3["age"]=40
方式三
通過object.defineProperty方法給對象添加屬性，默認不可被枚舉躁愿，不可被刪除叛本，對對象屬性的保護更嚴格
Object.defineProperty(obj3,"sex",{
value:'男',
enumerable:true,允許枚舉遍歷
configurable:true允許被刪除
})
console.log(obj3);
for (const key in obj3) {
???console.log(key);
}
通過delete可以刪除對象身上的屬性
delete obj3.name
delete obj3.sex
console.log(obj3);
Vue響應式原理
?1、定義一個源對象
let data={
????name:'happy',
????age:26
}
在頁面中顯示姓名和年齡
document.querySelector('#name').innerHTML=data.name
document.querySelector('#age').innerHTML=data.age
?2彤钟、定義一個代理對象（_data去代理data
let _data={}
3来候、使用object.defineProperty給_data添加屬性
Object.defineProperty(?_data,'name',{
get方法返回屬性的值（當我們調用name屬性獲取值時，會調用get方法
????get(){
????????return data.name
},
set方法用于設置屬性的值（當我們調用name屬性設置值時逸雹，會調用set方法
????????set(val){
?????????data.name=val
當代理對象監(jiān)聽到數據變化時营搅，會重新渲染頁面
??????document.querySelector('#name').innerHTML=data.name
????}
})
使用object.defineProperty給_data添加屬性
Object.defineProperty(_data,'age',{
get方法返回屬性的值（當我們調用name屬性獲取值時，會調用get方法
??????get(){
????????return data.age
?????},
set方法用于設置屬性的值（當我們調用name屬性設置值時梆砸，會調用set方法
????set(val){
??????data.age=val
當代理對象監(jiān)聽到數據變化時转质，會重新渲染頁面
??????document.querySelector('#age').innerHTML=data.age
???????}
})
Vue的常用指令
1、 v-bind：用于綁定屬性帖世，通過v-bind綁定過的屬性峭拘，可以直接寫插值表達式獲得屬性值
2、v-on：用于綁定事件狮暑，通過v-on綁定的事件可以指定Vue實例定義的方法
<input type="text " ??v-bind:value="name" ??v-on:input="updataName"> {{name}}
methods: {
updataName(e) {
獲取文本框里面的內容鸡挠，更新數據
this.name = e.target.value
}
}
3、v-bind:可以用：簡寫 ???v-on：可以用@簡寫
如果事件代碼不是很多搬男，可以寫在行內拣展，行內不能寫this，$event指的是事件對象
<input type="text " :value="age" @input="age =$event.target.value">{{age}}
?4缔逛、通過v-model指令备埃，可以實現對數據的雙向綁定，v-model指令是對v-bind：value和v-on：input的簡寫
????????????<input type="text " v-model="job">{{job}}
Vue的條件渲染和列表渲染
v-if ??v-else-if ?v-else-if ?v-else
v-if和v-show如何選擇：
如果頁面需要反復切換顯示和隱藏褐奴，用v-show按脚。
如果頁面中有很多模塊需要隱藏，用戶可能只對其中一兩個模塊感興趣敦冬，用v-if辅搬，
所有的模塊首屏加載時，全部不渲染脖旱，當用戶選擇指定模塊后只渲染指定模塊堪遂。
<ul>
<li?v-for="(item,index)?in foods" :key="index">{{index}}-{{item.name}}-{{item.price}} </li>
?</ul>?
Vue-輪播圖
<body>
? ? <div?id="app">
? ? ? ? <img?:src="imgs[showActive]"?alt="">
? ? </div>
? ? <script>
? ? ? ? Vue.config.productionTip?= false
? ? ? ? new?Vue({
? ? ? ? ? ? el:?'#app',
? ? ? ? ? ? data:?{
? ? ? ? ? ? ? ? showActive:?0,
? ? ? ? ? ? ? ? imgs:?["http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/10995",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/l0AHmu3gW293XmlQvn5LxQ==/109951166644",
? ? ? ? ? ? ? ? ? ? "http://p1.music.126.net/2lJxwhKKgzgIHsfiXRJXOQ==/109951166645”]
? ? ? ? ? ? },
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? setInterval(() =>?{
? ? ? ? ? ? ? ? ? ? this.showActive++
? ? ? ? ? ? ? ? ? ? if?(this.showActive?>= 4)
? ? ? ? ? ? ? ? ? ? ? ? this.showActive?= 0
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? },
? ? ? ? })
? ? </script>
</body>
