參考網(wǎng)址：https://cn.vuejs.org/
一 检疫、初始Vue
（1）
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年齡：{{age}}</h2>

<button v-on:click="updateName">修改姓名</button>
<button v-on:click="updateAge">修改年齡</button>
</div>
（2）引入文件
// 引入vue.js文件
// 開發(fā)版本
<script src="../js/vue.js"></script>

// 生產(chǎn)版本
<script src="../js/vue.min.js"></script>

<script>
// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false

    // 第二步：創(chuàng)建一個Vue對象
    let vm = new Vue({
        //指定當(dāng)前Vue對象操作的DOM容器
        el:'#app',
        //定義當(dāng)前Vue對象管理的數(shù)據(jù)
        data:{
            name:'張三',
            age:20
        },
        //定義當(dāng)前Vue對象管理的方法
        methods: {
            //修改姓名的方法
            updateName(){
                this.name = '李四'
            },
            //修改年齡的方法
            updateAge(){
                this.age = 30
            }
        },
    })
</script>

</script>

二笆包、Vue的響應(yīng)式原理

// 理解什么式代理對象
// 1.定義源對象
let obj1 = {
name:'張三',
age:20
}

// 2.定義代理對象
let obj2 = obj1
console.log('obj2:',obj2);
let vm = new Vue({
// 2.將源對象傳遞給Vue的Data選項(xiàng)，背后做了兩件事情
// 一.設(shè)置Vue實(shí)例的_data屬性逗扒，作為當(dāng)前源對象的代理對象。（響應(yīng)式的核心）
// 二.將_data里面代理的所有數(shù)據(jù)箫柳，再添加到當(dāng)前Vue實(shí)例身上镀脂。（為了Vue實(shí)例方便調(diào)用數(shù)據(jù)）
data:myData
})
vm._data.name = '李四'
vm._data.age = 30
console.log(myData);
console.log('----------------------------------------');

// 因?yàn)閷ο笫且妙愋停趥鬟f時酒觅，傳的是地址
let _data = data;
// 代理對象的基本理解：
/* let data = {
name:'小明',
age:18
}
// 因?yàn)閷ο笫且妙愋痛橹矗趥鬟f時，傳的是地址
let _data = data;
// 操作_data舷丹，真正改變的是data抒钱，此時就可以將_data當(dāng)做是data的代理對象。
_data.name = '王瑞'
_data.age = 30
console.log(data); */
console.log('-------------------------------');

三颜凯、給對象添加屬性的幾種方式
let obj3 = {}
//方式一:
obj3.name = '張三'
//方式二：
obj3['age'] = 20
//方式三：通過Object對象的defineProperty方法谋币，給指定的對象添加指定的屬性
// 使用這種方式，給對象添加的屬性症概，默認(rèn)不可被枚舉蕾额，不能被刪除
// 使用這種方式，給對象添加的屬性穴豫，對屬性的保護(hù)措施更加嚴(yán)格

Object.defineProperty(obj3,'sex',{
//屬性值
value:'男',
//允許被枚舉（默認(rèn)不允許）
enumerable:true,
//允許被刪除（默認(rèn)不允許）
configurable:true
})
console.log(obj3);
//枚舉出對象的所有屬性（其實(shí)就遍歷出對象的所有屬性名）
for(let key in obj3){
console.log(key);
}
//通過delete關(guān)鍵凡简，可以刪除對象身上的指定屬性
delete obj3.name
delete obj3.sex
console.log(obj3);
console.log('----------------------------------------');

四、Vue響應(yīng)式的原理
// 01.我們先定義一份原始數(shù)據(jù)精肃，也就是被代理對象秤涩。
let data = {
name:'張三',
age:20
}
//在頁面中，顯示姓名和年齡
document.querySelector('#name').innerHTML = data.name
document.querySelector('#age').innerHTML = data.age

//02.定義一個代理對象（使用_data 去代理 data）
let _data = { }
//03.使用Object.defineProperty給代理對象添加屬性
Object.defineProperty(_data,'name',{
//get方法司抱，用于返回屬性的值（當(dāng)我們調(diào)用name屬性獲取值時筐眷，會調(diào)用get方法）
get(){
// console.log('get方法執(zhí)行了');
return data.name
},
//set方法，用于設(shè)置屬性的值（當(dāng)我們調(diào)用name屬性設(shè)置值時习柠，會調(diào)用set方法）
set(val){
// console.log('set方法執(zhí)行了');
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
//當(dāng)代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了武翎，就會重新渲染頁面
document.querySelector('#age').innerHTML = data.age
}
})

五烈炭、vue的常用指令
<div id="app">
<div>
<span>姓名：</span>


<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年齡：</span>



<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>工作：</span>

<input type="text" v-model="job">{{job}}
</div>
</div>

// 實(shí)例化一個Vue對象
let vm = new Vue({
el:'#app',
// data選項(xiàng)，可以是一個對象宝恶，也可以是一個方法符隙，由方法返回一對象。
data() {
return {
name:'兵哥',
address:'南京',
hobby:'敲代碼'
}
},
// methods選項(xiàng)垫毙，里面定義的是Vue管理的方法
methods: {
// 該方法更新name屬性值
// 注意：在調(diào)用方式時霹疫，如果沒有傳遞參數(shù)，那么事件方法會默認(rèn)傳一個事件對象參數(shù)综芥。
setName(e){
this.name = e.target.value
},
},
})

六丽蝎、條件渲染和列表渲染
<div id="app">

<button v-on:click="isShow=!isShow">顯示/隱藏</button>

<div class="box" v-if="isShow">
v-if
</div>

<div class="box" v-show="isShow">v-show</div>