<!-- 準備好一個容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
	//創(chuàng)建Vue實例
	new Vue({
		el:'#demo', //el用于指定當前Vue實例為哪個容器服務，值通常為css選擇器字符串。
		data:{ //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用，值我們暫時先寫成一個對象。
			name:'hello,world',
			address:'北京'
		}
	});
</script>

<div id="root">
	<h1>插值語法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令語法</h1>
    <!-- 這里是展示被Vue指令綁定的屬性，引號內(nèi)寫的是js表達式 -->
	<a :href="school.url.toUpperCase()" rel="external nofollow"  x="hello">點我去{{school.name}}學習1</a>
	<a :href="school.url" rel="external nofollow"  x="hello">點我去{{school.name}}學習2</a>
</div>
<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
			school:{
				name:'百度',
				url:'http://www.baidu.com',
			}
        }
	})
</script>

<div id="root">
	<!-- 普通寫法 單向數(shù)據(jù)綁定 -->
    單向數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name"><br/>
    <!-- 簡寫 v-model:value 可以簡寫為 v-model，因為v-model默認收集的就是value值-->
    單向數(shù)據(jù)綁定：<input type="text" :value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model="name"><br/>
</div>
<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
</script>

<script>
   	// 第一種 
	const vm = new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
    // 第二種
    vm.$mount('#root')
</script>

<script>
    new Vue({
		el:'#root',
        // 第一種
		data:{
			name:'jack',
        }
        // 第二種
        data() {
        	return {
                name: 'jack'
            }
    	}
	})
</script>

let user = {
  name: "John"
};
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor)
/* 屬性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

let user = {
  name: "John"
};
Object.defineProperty(user, "name", {
  writable: false
});
user.name = "Pete";
// 打印后還是顯示 'John',無法修改name值

let obj = {
    get name() {
        // 當讀取 obj.propName 時，getter 起作用
    },
    set name() {
        // 當執(zhí)行 obj.name = value 操作時，setter 起作用
    }
}

let user = {
	surname: 'gao',
    name: 'han'
    get fullName() {
        return this.name + this.surname;
    }
}
console.log(user.fullName)

user.fullName = "Test"; // Error（屬性只有一個 getter）

let user = {
	surname: 'gao',
    name: 'han'
    get fullName() {
        return this.name + ' ' + this.surname;
    }
	set fullName(value) {
        // 這個用到了新語法 結(jié)構賦值
        [this.surname, this.name] = value.split(' ');
    }
}
user.fullName = 'Li Hua'
console.log(user.name);
console.log(user.surname);

例：
let obj = {
    x: 100
}
let obj2 = {
    y: 200
}

let obj = {
    x: 100
}
let obj2 = {
    y: 200
}
Object.defineProperty(obj2, 'x', {
    get() {
        return obj.x;
    },
    set(value) {
        obj.x = value;
    }
})

<!-- 準備好一個容器-->
<div id="root">
	<h2>學校名稱：{{name}}</h2>
	<h2>學校地址：{{address}}</h2>
</div>
<script>
	const vm = new Vue({
        el: '#root',
        data: {
            name: '浙江師范大學',
            address: '浙江金華'
        }
    })
</script>

<script>
	const vm = new Vue({
        el: '#root',
        // 我們在Vue 初始化的配置項中寫了 data 屬性。
        data: {
            name: '浙江師范大學',
            address: '浙江金華'
        }
    })
</script>

<script>
    let data1 = {
        name: '浙江師范大學',
        address: '浙江金華'
    }
	const vm = new Vue({
        el: '#root',
        // 我們在Vue 初始化的配置項中寫了 data 屬性。
        data: data1
    })
</script>

Object.defineProperty(vm, 'name', {
    get() {
        return vm._data.name;
    },
    set(value) {
        vm._data.name = value
    }
})

<!-- 準備好一個容器-->
<div id="root">
    <h2>歡迎來到{{name}}學習</h2>
    <!-- <button v-on:click="showInfo">點我提示信息</button> -->
    <button @click="showInfo1">點我提示信息1（不傳參）</button>
    <!-- 主動傳事件本身 -->
    <button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:'vue',
        },
        methods:{
            // 如果vue模板沒有寫event，會自動傳 event 給函數(shù)
            showInfo1(event){
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學你好！！')
            }
        }
	});
</script>

<div id="root">
    <h2>歡迎來到{{name}}學習</h2>
    <!-- 阻止默認事件（常用） -->
	<a  rel="external nofollow"  @click.prevent="showInfo">點我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點我提示信息</button>
        <!-- 修飾符可以連續(xù)寫 -->
        <!-- <a  rel="external nofollow"  @click.prevent.stop="showInfo">點我提示信息</a> -->
    </div>
    <!-- 事件只觸發(fā)一次（常用） -->
    <button @click.once="showInfo">點我提示信息</button>
</div>