参考网址：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文件
// 开发版本
<script src="../js/vue.js"></script>

// 生产版本
<script src="../js/vue.min.js"></script>

<script>
// 关闭生产提示
Vue.config.productionTip = false

    // 第二步：创建一个Vue对象
    let vm = new Vue({
        //指定当前Vue对象操作的DOM容器
        el:'#app',
        //定义当前Vue对象管理的数据
        data:{
            name:'张三',
            age:20
        },
        //定义当前Vue对象管理的方法
        methods: {
            //修改姓名的方法
            updateName(){
                this.name = '李四'
            },
            //修改年龄的方法
            updateAge(){
                this.age = 30
            }
        },
    })
</script>

</script>

二、Vue的响应式原理

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

// 2.定义代理对象
let obj2 = obj1
console.log('obj2:',obj2);
let vm = new Vue({
// 2.将源对象传递给Vue的Data选项，背后做了两件事情
// 一.设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
// 二.将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）
data:myData
})
vm._data.name = '李四'
vm._data.age = 30
console.log(myData);
console.log('----------------------------------------');

// 因为对象是引用类型，在传递时，传的是地址
let _data = data;
// 代理对象的基本理解：
/* let data = {
name:'小明',
age:18
}
// 因为对象是引用类型，在传递时，传的是地址
let _data = data;
// 操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。
_data.name = '王瑞'
_data.age = 30
console.log(data); */
console.log('-------------------------------');

三、给对象添加属性的几种方式
let obj3 = {}
//方式一:
obj3.name = '张三'
//方式二：
obj3['age'] = 20
//方式三：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
// 使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除
// 使用这种方式，给对象添加的属性，对属性的保护措施更加严格

Object.defineProperty(obj3,'sex',{
//属性值
value:'男',
//允许被枚举（默认不允许）
enumerable:true,
//允许被删除（默认不允许）
configurable:true
})
console.log(obj3);
//枚举出对象的所有属性（其实就遍历出对象的所有属性名）
for(let key in obj3){
console.log(key);
}
//通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex
console.log(obj3);
console.log('----------------------------------------');

四、Vue响应式的原理
// 01.我们先定义一份原始数据，也就是被代理对象。
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方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get(){
// console.log('get方法执行了');
return data.name
},
//set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val){
// console.log('set方法执行了');
data.name = val
//当代理对象，监听到数据发生变化了，就会重新渲染页面
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
}
})

五、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>

// 实例化一个Vue对象
let vm = new Vue({
el:'#app',
// data选项，可以是一个对象，也可以是一个方法，由方法返回一对象。
data() {
return {
name:'兵哥',
address:'南京',
hobby:'敲代码'
}
},
// methods选项，里面定义的是Vue管理的方法
methods: {
// 该方法更新name属性值
// 注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。
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>