<div>
  	<h1>
  			Hello!{{name}} {{Date.now()}} {{address}}
  	</h1>
  </div>

<script>
  Vue.config.productionTip = false  //阻止vue在生成時(shí)自動(dòng)產(chǎn)生提示
//創(chuàng)建Vue實(shí)例
new Vue({
	el:'#root', //el用于指定當(dāng)前Vue實(shí)例為哪個(gè)容器服務(wù)，值通常為css選擇器字符串。
	data:{ //data中用于存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用，值我們暫時(shí)先寫(xiě)成一個(gè)對(duì)象。
		name:'Tree',
		address:'China'
	}
})
  </script>

    1. 什么是js表達(dá)式？
       表達(dá)式可以產(chǎn)生一個(gè)值或者返回一個(gè)值
         (1) a = 1
         (2) a+b
         (3) Date.now() 函數(shù)
         (4) x = Y ? 1 : 2
                   
 	2. 什么是js代碼？（語(yǔ)句）
     	(1) if(){}
     	(2) for(){}
		js表達(dá)式就是一種特殊的js代碼

<div class="wrapper">
        <h1>你好啊！{{name}}</h1>
        <hr>
        <a :href="school.url">點(diǎn)擊進(jìn)入{{school.name}}</a>
        <a v-bind:href="school.url">點(diǎn)擊進(jìn)入{{school.name}}</a>
    </div>
   <script>
       Vue.config.productionTip = false
       new Vue({
        el:".wrapper",
        data:{
            name:"Tree",
            school:{
                name: "bilibili",
                url:"https://www.bilibili.com/"
            }
        }
       })
   </script>

    <div class="wrapper">
        <!-- 普通寫(xiě)法 -->
        <!-- 單項(xiàng)數(shù)據(jù)綁定: <input type="text" v-bind:value="name"><br>
        雙向數(shù)據(jù)綁定: <input type="text" v-model:value="name"> -->
        <!-- 簡(jiǎn)便寫(xiě)法 -->
        單項(xiàng)數(shù)據(jù)綁定: <input type="text" :value="name"><br>
        雙向數(shù)據(jù)綁定: <input type="text" v-model="name">
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:".wrapper",
            data:{
                name:"Hello"
            }
        })
    </script>

<div class="root">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>
    <script>
        Vue.config.productionTip = false   //阻止vue在生成時(shí)自動(dòng)產(chǎn)生提示
        new Vue({
            el:".root",
            data:{
                message:'Hello! Vue'
            }
        })
    </script>

 <div id="root">
        <form @submit.prevent="demo"> <!-- 當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)有默認(rèn)行為提交信息，刷新頁(yè)面-->
            <!-- v-model.trim表示去掉前后空格 -->
            賬號(hào)：<input type="text" v-model.trim="userinfo.account"><br><br>
            密碼：<input type="password" v-model="userinfo.password"><br><br>
            <!-- input類(lèi)型的number是限制用戶(hù)的輸入，而v-model.number是將收到的數(shù)據(jù)轉(zhuǎn)換為number類(lèi)型，二者配合使用 -->
            年齡：<input type="number" v-model.number="userinfo.age"><br><br>
            性別：
            <!-- 對(duì)于單選項(xiàng)，我們通過(guò)取相同的名字來(lái)表示是一組的 -->
            男<input type="radio" v-model="userinfo.sex" name="sex" value="男">
            女<input type="radio" v-model="userinfo.sex" name="sex" value="女"><br><br>
            愛(ài)好：
            <input type="checkbox" v-model="userinfo.hobby" value="打籃球">打籃球
            <input type="checkbox" v-model="userinfo.hobby" value="敲代碼">敲代碼
            <input type="checkbox" v-model="userinfo.hobby" value="干飯">干飯
            <br><br>
            所屬校區(qū)：
            <select v-model="userinfo.address">
                <option value="">請(qǐng)選擇地區(qū)</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="廣州">廣州</option>
                <option value="深圳">深圳</option>
            </select><br><br>
            <!-- v-model.lazy:表示當(dāng)失去焦點(diǎn)的時(shí)候再接收數(shù)據(jù) -->
            其他信息：<textarea cols="20" rows="3" v-model.lazy="userinfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userinfo.agree">同意并接受
            <a href="#" style="text-decoration: none;">《用戶(hù)協(xié)議》</a>
            <br><br>
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                userinfo:{
                    account:"",
                    password:"",
                    age:"",
                    sex:"",
                    hobby:[],
                    address:"",
                    other:"",
                    agree:""
                },
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userinfo));
                }
            },
        })
    </script>

 Object.defineProperty
                - 第一個(gè)參數(shù)：指定的對(duì)象
                - 第二個(gè)參數(shù)：要添加的屬性名
                - 第三個(gè)參數(shù)：配置項(xiàng)

<script>
        let number = 20
        Vue.config.productionTip = false  //阻止默認(rèn)提示
        var person = {
            name : "jack",
            address : "hgs"
        }
        Object.defineProperty(person,"age",{
            // value: 18 ,
            // enumerable:true,   控制屬性是否能夠進(jìn)行枚舉，默認(rèn)值false
            // writable:true,     控制屬性是否能夠被修改，默認(rèn)值false
            // configurable:true  控制屬性是否能夠被刪除，默認(rèn)值fasle
            // 上面屬于基本配置，下面get和set很重要
            //當(dāng)有人讀取person的age屬性時(shí)get函數(shù)（getter）就會(huì)被調(diào)用，返回的值就是age的值
            get(){
                console.log("讀取成功！");
                return number
            },
            //當(dāng)有人修改Person的age屬性時(shí)set函數(shù)（setter）就會(huì)被調(diào)用，修改后的值就會(huì)被獲取到value
            set(value){
                console.log("修改的值: "+value);
                number = value
            }
        })

    <div id="root">
    	<h1>Hello！{{_data.name}}</h1>
        <h1>Hello！{{_data.address}}</h1>
        <h1>Hello！{{name}}</h1>
        <h1>Hello！{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false  //阻止默認(rèn)的提示
        var vm = new Vue({
            el: '#root',
            data: {
                name:"Jack",
                address:"China"
            }
        })
    </script>