? ? <div id="app">
? ? ? ? <div class="item">
? ? ? ? ? ? <span>姓名：</span>
? ? ? ? ? ? <!-- v-model指令，綁定文本框的內(nèi)容，實現(xiàn)雙向數(shù)據(jù)綁定 -->
? ? ? ? ? ? <input type="text" v-model="name">{{name}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>地址：</span>
? ? ? ? ? ? <!-- v-model指令，綁定多行文本框的內(nèi)容，實現(xiàn)雙向數(shù)據(jù)綁定 -->
? ? ? ? ? ? <textarea cols="80" rows="4" v-model="address"></textarea>{{address}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>是否同意：</span>
? ? ? ? ? ? <!-- 單個復選框，通過v-model綁定一個布爾值 -->
? ? ? ? ? ? <input type="checkbox" v-model="isOK">{{isOK}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>愛好：</span>
? ? ? ? ? ? <!-- 多個復選框，通過v-model綁定到同一個數(shù)組 -->
? ? ? ? ? ? <input type="checkbox" value="抽煙" v-model="hobbies">抽煙
? ? ? ? ? ? <input type="checkbox" value="喝酒" v-model="hobbies">喝酒
? ? ? ? ? ? <input type="checkbox" value="燙頭" v-model="hobbies">燙頭
? ? ? ? ? ? <input type="checkbox" value="唱" v-model="hobbies">唱
? ? ? ? ? ? <input type="checkbox" value="跳" v-model="hobbies">跳
? ? ? ? ? ? <input type="checkbox" value="籃球" v-model="hobbies">籃球
? ? ? ? ? ? {{hobbies}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>性別：</span>
? ? ? ? ? ? <!-- 多個單選框，通過v-model綁定同一個數(shù)據(jù) -->
? ? ? ? ? ? <input type="radio" value="男" name="sex" v-model="sex">男
? ? ? ? ? ? <input type="radio" value="女" name="sex" v-model="sex">女
? ? ? ? ? ? {{sex}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>學歷：</span>
? ? ? ? ? ? <!-- 通過v-model可以給下拉框綁定一個屬性 -->
? ? ? ? ? ? <select v-model="xueli">
? ? ? ? ? ? ? ? <option value="小學">小學</option>
? ? ? ? ? ? ? ? <option value="碩士">碩士</option>
? ? ? ? ? ? ? ? <option value="博士">博士</option>
? ? ? ? ? ? ? ? <option value="博士后">博士后</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? {{xueli}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>美食：</span>
? ? ? ? ? ? <!-- 下拉框設(shè)置multiple屬性后，就可以選擇多個項 -->
? ? ? ? ? ? <!-- 通過v-model可以給下拉框綁定一個數(shù)組 -->
? ? ? ? ? ? <select v-model="meishi" multiple>
? ? ? ? ? ? ? ? <option value="螃蟹">螃蟹</option>
? ? ? ? ? ? ? ? <option value="龍蝦">龍蝦</option>
? ? ? ? ? ? ? ? <option value="雞腿">雞腿</option>
? ? ? ? ? ? ? ? <option value="牛排">牛排</option>
? ? ? ? ? ? ? ? <option value="海鮮">海鮮</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? {{meishi}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>修飾符lazy</span>
? ? ? ? ? ? <!-- v-model指令，添加.lazy修飾符，在文本框失去焦點后在更新數(shù)據(jù) ?-->
? ? ? ? ? ? <input type="text" v-model.lazy="msg">{{msg}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>修飾符number</span>
? ? ? ? ? ? <!-- v-model指令，添加.number修飾符，在修改文本框內(nèi)容時，會將修改后的內(nèi)容轉(zhuǎn)為number類型 -->
? ? ? ? ? ? <input type="text" v-model.number="age">{{age+10}}
? ? ? ? </div>
? ? ? ? <div class="item">
? ? ? ? ? ? <span>修飾符trim</span>
? ? ? ? ? ? <!-- v-model指令，添加.trim修飾符，在修改文本框內(nèi)容時，會忽略前后的空格 -->
? ? ? ? ? ? <input type="text" v-model.trim="city">
? ? ? ? ? ? <span>長度：{{city.length}}</span>
? ? ? ? </div>
? ? </div>
? ? let vm = new Vue({
? ? el:'#app',
? ? data:{
? ? name:'張三',
? ? address:'北京市朝陽區(qū)',
? ? // 用于表示是否同意
? ? isOK:true,
? ? // 愛好數(shù)組
? ? hobbies:["燙頭","跳"],
? ? // 性別
? ? sex:'女',
? ? // 學歷
? ? xueli:'博士',
? ? // 美食
? ? meishi:[],
? ? // 消息
? ? msg:'',
? ? //年齡
? ? age:20,
? ? city:'北京'
? ? },
? ? })
綁定事件
?<div id="app">
? ? ? ? <!-- v-on:指令綁定事件，可以指定一個事件方法，事件方法要在methods里面定義。
? ? 指定事件方法時，如果沒有給方法傳遞參數(shù)，默認會傳遞一個事件對象參數(shù) -->
? ? ? ? <button v-on:click="sayHi">Say Hi</button>
? ? ? ? <br><br>
? ? ? ? <!-- 如果我們傳遞了一個參數(shù)，還想再傳遞事件對象參數(shù)，就要通過$event關(guān)鍵字設(shè)置。 -->
? ? ? ? <button v-on:click="sayHello('你好',$event)">Say Hello</button>
? ? ? ? <br>
? ? ? ? <br>
? ? ? ? <!-- 如果事件處理的邏輯比較簡單，可以直接在行內(nèi)編寫。 -->
? ? ? ? <button v-on:click="name+='*'">修改name</button>{{name}}
? ? ? ? <hr>
? ? ? ? <!-- @是v-on:的簡寫 -->
? ? ? ? <!-- 通過.prevent事件修飾符，阻止默認行為 -->
? ? ? ? <div class="a" @click="a" @contextmenu.prevent="cm">
? ? ? ? ? ? <!-- 通過.stop事件修飾符，阻止事件冒泡 -->
? ? ? ? ? ? <div class="b" @click.stop="b"></div>
? ? ? ? </div>
? ? ? ? <br>
? ? ? ? <!-- 通過.once事件修飾符，讓事件方法只執(zhí)行一次 -->
? ? ? ? <button @click.once="once">只觸發(fā)一次</button>
? ? ? ? <br><br>
? ? ? ? <!-- 通過.self事件修飾符，控制事件在當前元素自身觸發(fā)，不在內(nèi)部元素身上觸發(fā) -->
? ? ? ? <div class="c" @click.self="c">
? ? ? ? ? ? <div class="d"></div>
? ? ? ? </div>
? ? ? ? <br>
? ? ? ? <!-- 默認情況下，手機的捕獲模式是，從內(nèi)部往外部挨個執(zhí)行。
? ? 如果外部事件添加.capture修飾符，此時事件的不會模式就變成了，從外部外內(nèi)部挨個執(zhí)行。 -->
? ? ? ? <div class="e" @click.capture="e">
? ? ? ? ? ? <div class="f" @click="f"></div>
? ? ? ? </div>
? ? ? ? <br>
? ? ? ? <!-- passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作 -->
? ? ? ? <div class="g" @scroll.passive="g">
? ? ? ? ? ? <div class="h"></div>
? ? ? ? </div>
? ? </div>
? ? new Vue({
? ? el:'#app',
? ? data() {
? ? return {
? ? name:'張三'
? ? }
? ? },
? ? methods: {
? ? sayHi(e){
? ? console.log(e);
? ? console.log('Hi');
? ? },
? ? sayHello(val,e){
? ? console.log(val);
? ? console.log(e);
? ? },
? ? a(){
? ? alert('大家好！我是a')
? ? },
? ? b(){
? ? // 通過事件對象，阻止事件冒泡
? ? // e.stopPropagation();
? ? alert('大家好！我是b')
? ? },
? ? cm(){
? ? // 通過事件對象，阻止默認行為
? ? // e.preventDefault();
? ? console.log('哈哈');
? ? },
? ? once(){
? ? alert('你好呀！')
? ? },
? ? c(){
? ? alert('大家好！我是c')
? ? },
? ? e(){
? ? alert('大家好！我是e')
? ? },
? ? f(){
? ? alert('大家好！我是f')
? ? },
? ? g(){
? ? console.log(11);
? ? }
? ? },
深度響應式
1. 按鍵修飾符
? ?new Vue({
? ? el:'#app',
? ? // data選項，定義屬性，該選項可以是一個對象，也可以是一個方法返回一個對象。
? ? data:{
? ? // 商品數(shù)組
? ? goodses:['小米手機','華為電腦','蘋果手表','尼康相機'],
? ? // 搜索關(guān)鍵字
? ? keywords:'',
? ? // 搜索結(jié)果
? ? content:''
? ? },
? ? // methods選項，定義方法
? ? methods: {
? ? keydown(){
? ? // 字符串的includes()方法，用于檢查字符串中是否包含指定的內(nèi)容，包含返回true
? ? this.content = this.goodses.find(g=>g.includes(this.keywords))
? ? }
? ? },
? ? })
2. 深度響應式
? <div id="app">
? ? ? ? <button @click="name='李四'">修改姓名</button>
? ? ? ? <h2>{{name}}</h2>
? ? ? ? <hr>
? ? ? ? <button @click="obj.name='張飛'">修改姓名</button>
? ? ? ? <button @click="addJob">添加工作屬性</button>
? ? ? ? <button @click="delAge">刪除年齡屬性</button>
? ? ? ? <h2>{{obj}}</h2>
? ? ? ? <hr>
? ? ? ? <button @click="arr.push('可樂')">添加可樂</button>
? ? ? ? <button @click="arr.splice(1,1,'榴蓮')">通過方法修改元素</button>
? ? ? ? <button @click="updateArr">通過下標修改元素</button>
? ? ? ? <button @click="delArr">通過下標刪除元素</button>
? ? ? ? <h2>{{arr}}</h2>
? ? </div>
? ? // Vue實例，在初始化的時候，會將對象身上的所有數(shù)據(jù)，做響應式處理，
? ? // 之后再向?qū)ο笾刑砑訉傩?，這些屬性就不再具備響應式能力了。
? ? // 針對數(shù)組，只能通過以下方法，才能實現(xiàn)響應式：push() pop() unshift() shift() splice() reverse() sort()
? ? // 如何解決上面的問題？
? ? // 方式1：通過Vue的set方法，更新指定的對象屬性或數(shù)組成員；delete方法，刪除指定對象的屬性或數(shù)組的成員
? ? // 方式2：通過Vue實例的$set方法，更新指定的對象屬性或數(shù)組成員；$delete方法，刪除指定對象的屬性或數(shù)組的成員
? ? Vue.config.productionTip = false
? ? let vm = new Vue({
? ? el:"#app",
? ? data:{
? ? // 基本類型數(shù)據(jù)
? ? name:'張三',
? ? // 對象數(shù)據(jù)
? ? obj:{
? ? name:'張杰',
? ? age:20,
? ? sex:'男'
? ? },
? ? // 數(shù)組數(shù)據(jù)
? ? arr:['面包','餅干','薯片','巧克力']
? ? },
? ? methods: {
? ? // 給對象添加工作屬性的方法
? ? addJob(){
? ? // 通過觀察可以發(fā)現(xiàn)，我們可以給對象添加屬性，但是添加后的屬性，不具備響應式能力。
? ? // this.obj.job='前端開發(fā)工程師'
? ? // set方法的參數(shù)分別是：指定的對象，對象的屬性，屬性值
? ? // Vue.set(this.obj,'job','前端開發(fā)工程師')
? ? this.$set(this.obj,'job','前端開發(fā)工程師')
? ? },
? ? // 刪除對象身上年齡的方法
? ? delAge(){
? ? // delete this.obj.age
? ? // delete煩煩煩的參數(shù)分別是：指定的對象，對象的屬性
? ? // Vue.delete(this.obj,'age')
? ? this.$delete(this.obj,'age')
? ? },
? ? // 修改數(shù)組身上的成員
? ? updateArr(){
? ? // this.arr[1] = '蘋果'
? ? // 這里set方法的參數(shù)分別是：指定的數(shù)組，數(shù)組的下標，對應的數(shù)據(jù)
? ? this.$set(this.arr,1,'蘋果')
? ? },
? ? // 根據(jù)下標刪除數(shù)組元素
? ? delArr(){
? ? // delete this.arr[1]
? ? // 這里的delete方法的參數(shù)分別是：指定的數(shù)組，數(shù)組的下標
? ? this.$delete(this.arr,1)
? ? }
? ? },
? ? })
