在使用 Vue 時攻晒，在瀏覽器上安裝?Vue Devtools寂嘉。它允許你在一個更友好的界面中審查和調(diào)試 Vue 應(yīng)用奏瞬。
通過https://cn.vuejs.org/官方網(wǎng)站下載vue.js文件和vue.min.js文件枫绅，并用?<script>?標簽引入。
初始vue
第一步：準備一個容器
第二步：創(chuàng)建一個Vue對象（? new Vue({? })? ）
el：'? ?' ,指定當(dāng)前的vue對象操作DOM容器硼端。
data：{? } ,定義當(dāng)前vue對象管理的數(shù)據(jù)并淋。
methods：{? }，定義當(dāng)前vue對象管理的方法珍昨。
修改屬性值的方法寫在methods里面县耽，并用v-on綁定事件
vue的響應(yīng)式原理
一、理解什么是代理對象
1.定義源對象
let obj1 = {
? ? ? ? ? ? name:'張三',
? ? ? ? ? ? age:20
? ? ? ? }
2.定義代理對象
let obj2 = obj1
? ? ? ? console.log('obj2:',obj2);
代理對象修改了源對象的數(shù)據(jù)
? ? ? ? obj2.name = '李四'
? ? ? ? obj2.age = 30
二镣典、看一下Vue是如何使用代理對象
1.定義源對象
? ? ? ? let myData = {
? ? ? ? ? ? name:'張三',
? ? ? ? ? ? age:20
? ? ? ? }
? ? ? ? let vm = new Vue({
2.將源對象傳遞給Vue的Data選項兔毙，背后做了兩件事情
一.設(shè)置Vue實例的_data屬性，作為當(dāng)前源對象的代理對象兄春。（響應(yīng)式的核心）
二.將_data里面代理的所有數(shù)據(jù)澎剥，再添加到當(dāng)前Vue實例身上。（為了Vue實例方便調(diào)用數(shù)據(jù)）
? ? ? ? ? ? data:myData
? ? ? ? })
? ? ? ? vm._data.name = '李四'
? ? ? ? vm._data.age = 30
三赶舆、給對添加屬性的幾種方式
方式一:
? ? ? ? obj3.name = '張三'
方式二：
? ? ? ? obj3['age'] = 20
方式三：通過Object對象的defineProperty方法哑姚，給指定的對象添加指定的屬性
使用這種方式，給對象添加的屬性涌乳，默認不可被枚舉蜻懦，不能被刪除
使用這種方式甜癞，給對象添加的屬性夕晓，對屬性的保護措施更加嚴格
Object.defineProperty(obj3,'sex',{
? ? ? ? ? ? ?value:'男',
? ? ? ? ? ? 允許被枚舉（默認不允許）
? ? ? ? ? ? enumerable:true,
? ? ? ? ? ? 允許被刪除（默認不允許）
? ? ? ? ? ? configurable:true
? ? ? ? })
枚舉出對象的所有屬性（其實就遍歷出對象的所有屬性名）
? ? ? ? for(let key in obj3){
? ? ? ? ? ? console.log(key);
? ? ? ? }
通過delete關(guān)鍵，可以刪除對象身上的指定屬性
? ? ? ? delete obj3.name
四悠咱、Vue響應(yīng)式的原理
1定義一個源對象
?let data = {
? ? ? ? ? ? name:'張三',
? ? ? ? ? ? age:20
? ? ? ? }
在頁面中蒸辆，顯示姓名和年齡
?document.querySelector('#name').innerHTML = data.name
? document.querySelector('#age').innerHTML = data.age
2.定義一個代理對象（使用_data 去代理 data）
? ? ? ? let _data = {}
3.使用Object.defineProperty給代理對象添加屬性
? ? ? ? Object.defineProperty(_data,'name',{
? ? ? ? ? ? get方法，用于返回屬性的值（當(dāng)我們調(diào)用name屬性獲取值時析既，會調(diào)用get方法）
? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? return data.name
? ? ? ? ? ? },
? ? ? ? ? ? set方法躬贡，用于設(shè)置屬性的值（當(dāng)我們調(diào)用name屬性設(shè)置值時，會調(diào)用set方法）
? ? ? ? ? ? set(val){
? ? ? ? ? ? ? ? data.name = val
? ? ? ? ? ? ? ? //當(dāng)代理對象眼坏，監(jiān)聽到數(shù)據(jù)發(fā)生變化了拂玻，就會重新渲染頁面
? ? ? ? ? ? ? ? document.querySelector('#name').innerHTML = data.name
? ? ? ? ? ? }
? ? ? ? })
Object.defineProperty(_data,'age',{
? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? return data.age
? ? ? ? ? ? },
? ? ? ? ? ? set(val){
? ? ? ? ? ? ? ? data.age = val
? ? ? ? ? ? ? ? document.querySelector('#age').innerHTML = data.age
? ? ? ? ? ? }
? ? ? ? })
