超碰最新上传,人摸人人人澡人人超碰,欧美成人精品高清在线观看

v-bind

目標: 給標簽屬性設置vue變量的值

語法：v-bind:屬性名="vue變量"
簡寫：:屬性名="vue變量"

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  <img v-bind:src="img" alt="">
  <a v-bind:href="url">點我</a>
  <!-- v-bind可以省略 -->
  <img :src="img" alt=""> 
  <a :href="url">點我</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:"你好呀!",
      obj: {
        name: "小vue",
        age: 5
      },
      img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      url:"http://www.baidu.com"
    }
  }
}
// console.log(1234566);
</script>

<style scoped>

</style>

目標:用v-bind給標簽class設置動態的值

語法 :class="{類名: 布爾值}" ,true使用, false不用

<template>
  <div>
    <button v-on:click="bool=!bool">切換類名</button>
    <div :class="{redClass:bool}">動態綁定class</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
     bool:true
    }
  },
  
}
</script>
<style scoped>
.redClass{
  color: red;
}
</style>

目標:給標簽動態設置style的值

語法 :style="{css屬性名: 值}"

<template>
  <div>
    <button @click="colorStr='green'">變成綠色</button>
    <button @click="colorStr='blue'">變成藍色</button>
    <button @click="colorStr='red'">變成紅色</button>
    <div :style="{color:colorStr,fontSize:'80 px'}">動態綁定 style</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    //設置默認顏色
     colorStr:'red'
    }
  },
  
}
</script>

<style scoped>

</style>

v-on

目標: 給標簽綁定事件

語法
- v-on:事件名="要執行的==少量代碼=="
- v-on:事件名="methods中的函數"
- v-on:事件名="methods中的函數(實參)"
簡寫: @事件名="methods中的函數"

<template>
  <div>
    <h1>當前數量:{{count}}</h1>
    <button v-on:click="()=>{count+=1}">點擊</button>
      <!--簡寫-->
    <button v-on:click="count=count+=1">點擊</button>
    <h1>當前金額:{{money}}</h1>
    <!-- 簡寫 -->
    <button v-on:click="money+=10">點擊</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count:1,
      money:10
    }
  }
}
</script>

<style scoped>

</style>

v-on事件對象

語法:

無傳參, 通過形參直接接收
傳參, 通過$event指代事件對象傳給事件處理函數

<template>
  <div>
    <h1>當前數量:{{count}}</h1>
    <button v-on:click="()=>{count+=1}">點擊</button>
    <!-- 簡寫 -->
    <button v-on:click="addFn">點擊觸發add</button>
    <button v-on:click="addFncount(-10)">減少10個</button>
    <!-- 增加10 -->
    <!-- v-on: 簡寫用  @ 替代 -->
    <button @click="addFncount(10)">增加10個</button>
  </div>
</template>

<script>
export default {
  data () {
    return {//返回的其實是一個對象
      count:1,
    }
  },
  methods:{
addFn(){
  console.log("點擊觸發add");
  this.count+=1
},
// 帶參數的寫法
addFncount(num){
  this.count+=num 
}
  },
}
</script>

<style scoped>

</style>

v-on修飾符

語法:

@事件名.修飾符="methods里函數"
- .stop - 阻止事件冒泡
- .prevent - 阻止默認行為
- .once - 程序運行期間, 只觸發一次事件處理函數

<template>
  <div>
<h1>事件修飾符</h1>
<div class="box" @click="faterFn">父元素</div>
  <!-- .stop阻止事件冒泡 -->
  <button @click.stop="btn">.stop阻止事件冒泡</button>
  <!-- .prevent阻止默認事件 -->
  <!-- 可以同時多個事件一起 阻止默認+阻止冒泡 -->
  <a  @click.prevent.stop="btn3">.prevent阻止事件冒泡</a>
  <button @click.once="btn">.once程序運行期間,只觸發一次事件處理函數</button>

  </div>
</template>

<script>
export default {
  methods:{
    faterFn(){
      console.log("faterFn被點擊了");
    },
    btn(){
      console.log(111);
    },
    btn3() {
      console.log("被點擊了,但是沒有跳轉,設置了阻止默認行為");
    }, 
  }

}
</script>

<style scoped>

</style>

v-on按鍵修飾符

語法:

@keyup.enter - 監測回車按鍵
@keyup.esc - 監測返回按鍵
@keyup.字母 - 監測返回對應的字母按鍵

<template>
  <div>
    <input type="text" @keydown.enter="enterFn" placeholder="enter鍵觸發" />
    <hr />
    <!-- 修飾符只能小寫字母 -->
    <!-- 但是鍵盤輸入大小寫都能觸發事件 -->
    <input type="text" @keydown.a="aFn" placeholder="a鍵觸發" />
    <hr />
    <input type="text" @keydown.K="KFn" placeholder="k鍵觸發" />
  </div>
</template>

<script>
export default {
  methods: {
    enterFn() {
      console.log("按下enter鍵");
    },
    aFn() {
      console.log("按下a鍵");
    },
    KFn() {
      console.log("按下K鍵");
    },
  },
};
</script>

<style scoped>
</style>

v-model

語法: v-model="vue數據變量"
雙向數據綁定
- 數據變化 -> 視圖自動同步
- 視圖變化 -> 數據自動同步

<template>
  <div>
<h1>v-model雙向數據綁定</h1>
用戶名<input type="text" v-model="username">
密碼<input type="password" v-model="password">
<button @click="loginBtn">登錄</button>
  </div>
</template>

<script>
export default {
  data () {
    return{
      username:"匿名用戶",
      password:"123456"
    
  },
  methods:{
    loginBtn(){
      console.log("用戶名:",this.username);
      console.log("密碼:",this.password);
    }
  }

}
</script>

下拉菜單寫在select,value在option上

<template>
  <div>
# 注意-model是給select標簽綁定,value在option上   
    <div>
      <select v-model="city">
        <option value="廣州">廣州</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
        <option value="北京">北京</option>
        <option value="深圳">深圳</option>
      </select>
    </div>
    <!-- 復選框 -->
    <div>
      <label
        ><input
          type="checkbox"
          name=""
          value="唱歌"
          v-model="hobby"
        />唱歌</label
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="爬山"
          v-model="hobby"
        />爬山</label
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="睡覺"
          v-model="hobby"
        />睡覺</labe
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="吃飯"
          v-model="hobby"
        />吃飯</label
      >
    </div>
    <!-- 單選框 -->
    <div>
      <label><input type="radio" value="男" v-model="gender" />男</label>
      <label><input type="radio" value="女" v-model="gender" />女</label>
    </div>
    <div>
      <!-- 自我介紹 -->
      <!-- 失去焦點再收集數據 -->
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 下拉框默認城市
      city: "廣州",
      // 設置為具體某個就["吃飯"]
      // 復選框收集多個數據,初始值要設置為數組
      hobby: [],
      // 單選框默認性別
      gender: "男",
      // 自我介紹
      intro: "",
    };
  },
};
</script>

v-model用在復選框時,v-model的vue變量分兩種

# 非數組 – 關聯的是checked屬性
# 數組  – 關聯的是value屬性
<template>
  <div><input type="checkbox" checked="text" v-model="text" />學習</div>
</template>

<script>
export default {
  data() {
    return {
    //text: true,
      text: "",
    };
  },
};
</script>

v-model修飾符

語法: v-model.修飾符="Vue數據變量"

# .number  以parseFloat轉成數字類型
# .trim     去除字符串首尾空白字符
# .lazy     失去焦點后才收集數據(change)而非inupt時
<template>
  <div>
    <input type="text" v-model.trim="username" />
    <input type="text" v-model.number="age" />
    <textarea name="" id="" cols="30" rows="10" v-model.lazy="text"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "哈哈哈",
      age: 18,
      text: "",
    };
  },
};
</script>

v-text/v-html

語法:

v-text="vue數據變量"
v-html="vue數據變量"

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一個span標簽</span>"
    }
  }
}
</script>

v-show/v-if

語法:

v-show="vue變量"
v-if="vue變量"

原理

v-show 用的display:none隱藏 (頻繁切換使用)
v-if 直接從DOM樹上移除
v-if可以配合v-else或者v-else-if使用

高級

v-else的使用

<template>
  <div>
#    <!-- true的看的見 -->
#    <!-- v-show后可接變量再去給變量設置布爾值,也可直接接布爾值 -->
    <h1>v-show后可接變量,也可直接接布爾值</h1>
    <h1 v-show="true">這是v-show的盒子接布爾值</h1>
    <h1 v-show="isok">這是v-show的盒子接變量</h1>
    <button @click="isok = !isok">顯示或隱藏接變量的</button>
#    <!-- 寫成事件型 -->
    <button @click="btnFn">顯示或隱藏接變量的</button>
#    <!-- false 看不見 -->
    <h1 v-if="isNo">v-if的盒子</h1>

    <div>
 #     <!-- 判斷語句 -->
 #     <!-- 如果滿足age>18就輸出v-if的,不滿足的就輸出v-else -->
      <p v-if="age > 18">滿18啦</p>
      <p v-else>18都沒有</p>
 #    v-show 讓盒子顯示或隱藏 display:none 
 #     v-if   讓盒子創建或者刪除  性能開銷更大
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //
      isok: true,
      isNo: false,
      age: 20,
    };
  },
  methods: {
  
    btnFn() {
#     取反
      this.isok = !this.isok;
    },
  },
};
</script>

v-if 和v-else

<template>
  <div>
    <button v-on:click="isShow = !isShow">切換狀態</button>

    <ul v-if="isShow">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
#  v-else書寫需要和v-if同級 
#  v-else和v-if互斥
#  應用場景: 列表狀態與空狀態切換,加載狀態切換
    <div v-else>空狀態</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

v-for

語法:

v-for="(值變量, 索引變量) in 目標結構"
v-for="值變量 in 目標結構"

目標結構:

可以遍歷數組 / 對象 / 數字 / 字符串 (可遍歷結構)

注意:

v-for的臨時變量名不能用到v-for范圍外

<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <ul>
#           v-for="值變量 in 目標結構"
#           :key ="唯一標識"

      <li v-for="item in arr" :key="item">{{ item }}</li>
      <!-- 注意:v-for的臨時變量不能用到v-for范圍外 -->
    </ul>
    <button @click="btn">11</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["劉備", "關羽", "張飛"],
    };
  },
  methods: {
    btn() {
#    重復添加就會報錯,出現重復鍵---key得唯一
      this.arr.push("11");
    },
  },
};
</script>

帶下標的

#           v-for="(值變量,下標) in 目標結構"
<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <h1>獲取下標(索引)</h1>
    <ul>
      <li v-for="(item, index) in arr" :key="item">{{ item }}---{{ index }}</li>
    </ul>
    <h1>數組的每一項是對象--項目常見</h1>
    <ul>
      <li v-for="(item, index) in arrObj" :key="item">
        {{ item.id }}----{{ index }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["劉備", "關羽", "張飛"],
      arrObj: [
        { id: "1", name: "劉備" },
        { id: "2", name: "曹操" },
        { id: "3", name: "孫權" },
      ],
    };
  },
};
</script>

其他的使用

# key的要求:唯一不重復的字符串或者數值
<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <h2>遍歷對象</h2>
    <div>
      <ul>
        <li v-for="(value, key) in obj" :key="key">{{ key }} : {{ value }}</li>
      </ul>
    </div>
    <h2>遍歷數字</h2>
    <div>
      <ul>
        <li v-for="item in 10" :key="item"></li>
      </ul>
    </div>
    <h1>數組的每一項是對象--項目常見</h1>
    <div>
      <ul>
        <!-- :key=item 報錯,因為沒有唯一   :key要唯一標識 -->
        <li v-for="(item, index) in list" :key="item.id">
          {{ item.id }}----{{ index }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        username: "哈哈",
        age: "18",
        sex: "女",
      },
      arr: ["劉備", "關羽", "張飛"],
      list: [
        { id: "1", name: "諸葛亮" },
        { id: "2", name: "曹操" },
        { id: "3", name: "孫權" },
      ],
    };
  },
};
</script>

v-for更新監測

# 數組采用會改變原始數據的更新方法, 才導致v-for更新頁面
# 這些方法會觸發數組改變, v-for會監測到并更新頁面
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

#  這些方法不會觸發v-for更新
slice()
filter()
concat()
# 注意: vue不能監測到數組里賦值的動作而更新, 如果需要請使用Vue.set() 或者this.$set(), 或者覆蓋整個數組

<template>
  <div>
    <button v-on:click="btn01">點擊翻轉</button>
    <button v-on:click="btn02">截取前兩位</button>
    <button v-on:click="btn03">將第一位修改為其他值</button>
    <h1>請選擇喜歡的項目</h1>
    <label v-for="item in arr" :key="item">
      <input type="checkbox" v-model="hobby" v-bind:value="item" />{{ item }}
    </label>
    <h2>選中的列表</h2>
    <ul>
      <li v-for="item in hobby" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["科幻", "喜劇", "動漫", "冒險", "科技", "軍事", "娛樂", "奇聞"],
      hobby: [],
    };
  },
  methods: {
    btn01() {
      this.arr.reverse();
    },
    btn02() {
      // this.arr.slice(0, 2)這樣是不會直接影響到原數組的,所以重新賦值給this.arr
      this.arr = this.arr.slice(0, 2);
    },
    btn03() {
      // vue2 常見問題:直接通過下標修改,數據變化,但是視圖不會更新
      // this.arr[0] = "嗚嗚嗚";
      // console.log(this.arr);
      // 解決方法 $set
      // this.$set(原數組,數組下標,'修改后的值')
      this.$set(this.arr, 0, "煩躁");
    },
  },
};
# 口訣:
# 數組方法會改變原數組,就會導致v-for更新,頁面更新
# 數組方法不會改變原數組,而是返回新數組,就不會導致v-for更新,可采用覆蓋原數組或者this.$set()
# 
</script>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vue指令

vue指令

v-bind

v-on

v-on事件對象

v-on修飾符

v-on按鍵修飾符

v-model

v-model修飾符

v-text/v-html

v-show/v-if

v-if 和v-else

v-for

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue指令

v-bind

v-on

v-on事件對象

v-on修飾符

v-on按鍵修飾符

v-model

v-model修飾符

v-text/v-html

v-show/v-if

v-if 和v-else

v-for

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频