綁定事件
? ?<!-- 調(diào)用方法時傳如果沒有參數(shù)就把事件對象當成參數(shù)傳入 -->
? ? ? ? ? ? <button @click='r1'>返回事件對象</button>
? <!-- 調(diào)用方法時傳的是什么參數(shù)接的就是什么參數(shù) -->
? ? ? ? ? ? <button @click='r2(123)'>傳入?yún)?shù)</button>
? <!-- 調(diào)用發(fā)法時傳入$event參數(shù)昨登，該參數(shù)就是事件對象 -->
? ? ? ? ? ? <button @click='r3(123,$event)'>傳入?yún)?shù)和事件對象</button>
? ? ? <!-- 當前事件處理比較簡單時，可以寫在行內(nèi) 只能操作Vue管理的數(shù)據(jù)-->
? ? ? ? ? ? <button @click='r++'>年齡++</button>
?<!-- ? e.preventDefault(); -->
? ? ? ? <!-- 事件修飾符.prevent阻止默認事件 -->
? ? ? ? <div class="b1" @contextmenu.prevent='b1'></div>
? <!-- 事件修飾符.once用于只綁定一次事件方法 -->
? ? ? ? <div class="b3" @click.once='b3'></div>
?<!-- 事件修飾符.self只能在自身元素上觸發(fā)贯底，不能在子元素上觸發(fā) -->
? ? ? ? <div class="b4" @click.self='b4'>
? ? ? ? ? ? <div class="c4" @click='c4'></div>
? ? ? ? </div>
深度響應式
? new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? xs: {
? ? ? ? ? ? ? ? ? ? ? ? name: '張三',
? ? ? ? ? ? ? ? ? ? ? ? age: 17
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? sz: [11, 22, 33, 44]
? ? ? ? ? ? ? ? ? ? // obj對象里面的每一個屬性丰辣，都會采用object.defineProperty去封裝，實現(xiàn)響應式所謂響應式禽捆，指的是笙什，數(shù)據(jù)發(fā)生變化后，頁面自動更新睦擂。
? ? ? ? ? ? ? ? ? ? // 給對象后添加的數(shù)據(jù)不會采用Object.defineProperty去封裝得湘，所以，就失去了響應式顿仇。
? ? ? ? ? ? ? ? ? ? // vue通過$delete方法淘正，刪除對象的屬性摆马，并觸發(fā)響應式
? ? ? ? ? ? ? ? ? ? // vue通過$set方法，給對象添加響應式屬性
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? ? ? this.$set(this.xs, 'sex', '男')
? ? ? ? ? ? ? ? ? ? // this.$set(需要添加屬性的對象,需要添加的屬性名,需要添加的屬性值)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? del() {
? ? ? ? ? ? ? ? ? ? this.$delete(this.xs, 'sex')
? ? ? ? ? ? ? ? ? ? // this.$delete(需要刪除屬性的對象,需要刪除的屬性名)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? add1() {
? ? ? ? ? ? ? ? ? ? // 在Vue中操作數(shù)組鸿吆，并觸發(fā)頁面更新的只能使用數(shù)組的方法
? ? ? ? ? ? ? ? ? ? // push,shift,shift,pop,splice,sort,reseolve
? ? ? ? ? ? ? ? ? ? // 如果想通過下標操作數(shù)組也必須使用$set和$delete
? ? ? ? ? ? ? ? ? ? this.$set(this.sz, 4, 66)
? ? ? ? ? ? ? ? ? ? // this.$set(需要添加數(shù)據(jù)的數(shù)組,需要添加的位置(下標),需要添加的數(shù)據(jù))
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? del1() {
? ? ? ? ? ? ? ? ? ? this.$delete(this.sz, 1)
? ? ? ? ? ? ? ? ? ? // this.$delete(需要刪除數(shù)據(jù)的數(shù)組,需要刪除的位置(下標))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? })
v-model詳細用法
<body>
? ? <div id='app'>
? ? ? ? <div>
? ? ? ? ? ? <!-- v-model綁定單個文本框 默認綁定的是input事件-->
? ? ? ? ? ? <!-- 添加.lazy修飾符囤采，失去焦點時觸發(fā) 把input事件轉(zhuǎn)換成change事件 --> ?
? ? ? ? ? ? <!-- .trim修飾符會清除兩端空格 -->
? ? ? ? ? ? <input type="text" v-model:value.lazy.trim='r1'>
? ? ? ? ? ? <p style='color:red'>{{r1}}</p>
? ? ? ? </div>
? ? ? ? <!-- .number修飾符會把輸入的值轉(zhuǎn)為number -->
? ? ? ? <div>
? ? ? ? ? ? <!-- v-model綁定多行文本框 -->
? ? ? ? ? ? <textarea v-model:value='r2' name="" id="" cols="30" rows="10"></textarea>
? ? ? ? ? ? <p style='color:red'>{{r2}}</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? ?<!-- v-model綁定一組單選框 每個單選框指定相同的屬性 -->
? ? ? ? ? ? <input type="radio" name="sex" value="男" v-model='r3'>
? ? ? ? ? ? <input type="radio" name="sex" value="女" v-model='r3'>
? ? ? ? ? ? <p style='color:red'>{{r3}}</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? ?<!-- v-model綁定單個復選框 綁定一個boolean值 -->
? ? ? ? ? ? <input type="checkbox" v-model='r4'>
? ? ? ? ? ? <p style='color:red'>{{r4}}</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? ?<!-- v-model綁定多個復選框 綁定同一個數(shù)組 -->
? ? ? ? ? ? <input type="checkbox" v-model='r5' value="洗澡">洗澡
? ? ? ? ? ? <input type="checkbox" v-model='r5' value="吹頭發(fā)">吹頭發(fā)
? ? ? ? ? ? <input type="checkbox" v-model='r5' value="刷牙">刷牙
? ? ? ? ? ? <input type="checkbox" v-model='r5' value="洗臉">洗臉
? ? ? ? ? ? <p style='color:red'>{{r5}}</p>
? ? ? ? </div>
? ? ? ? <!-- 綁定一個屬性 -->
? ? ? ? <select name="" id="" v-model='r6'>
? ? ? ? ? ? <option value="上海">上海</option>
? ? ? ? ? ? <option value="北京">北京</option>
? ? ? ? ? ? <option value="西安">西安</option>
? ? ? ? ? ? <option value="滁州">滁州</option>
? ? ? ? </select>
? ? ? ? <div><p style='color:red'>{{r6}}</p></div>
? ? ? ? <div>
? ? ? ? ? ? <!-- 綁定一個數(shù)組 -->
? ? ? ? ? ? <select multiple name="" id="" v-model='r7'>
? ? ? ? ? ? ? ? <option value="上海">上海</option>
? ? ? ? ? ? ? ? <option value="北京">北京</option>
? ? ? ? ? ? ? ? <option value="西安">西安</option>
? ? ? ? ? ? ? ? <option value="滁州">滁州</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? <p style='color:red'>{{r7}}</p>
? ? ? ? </div>
? ? </div>
? ? <script src="../js/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? r1: '張三',
? ? ? ? ? ? ? ? ? ? r2: '123144214141245125215',
? ? ? ? ? ? ? ? ? ? r3: '男',
? ? ? ? ? ? ? ? ? ? r4: false,
? ? ? ? ? ? ? ? ? ? r5: [],
? ? ? ? ? ? ? ? ? ? r6: '上海',
? ? ? ? ? ? ? ? ? ? r7: []
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? })
? ? </script>
</body>
