湖南做網(wǎng)站kaodezhu被國家禁止訪問的網(wǎng)站怎么打開
看文章可以得到什么？
1.可以快速的了解并會使用vue的指令
2.可以加深你對vue指令的理解，知道每個指令代表什么功能???????
目錄
什么是vue的指令？???????
vue常見指令的使用??
v-html
v-show?
v-if?
v-else 和v-else-if
v-on?
v-bind?
?v-for
v-model?
案例-小黑記事本?
-
什么是vue的指令？
指令：帶有 v- 前綴 的 特殊 標簽屬性
vue這個框架自己規(guī)定的特殊的規(guī)范，類似于html中的自己定義p等標簽
Vue 會根據(jù)不同的【指令】，針對標簽實現(xiàn)不同的【功能】
-
vue常見指令的使用??
v-html
作用：設(shè)置元素的 innerHTML
語法：v-html = "表達式 "
v-show?
1. 作用： 控制元素顯示隱藏
2. 語法： v-show = "表達式" 表達式值 true 顯示， false 隱藏
3. 原理： 切換 display:none 控制
4. 場景： 頻繁切換顯示隱藏的場景
v-if?
1. 作用： 控制元素顯示隱藏（條件渲染）
2. 語法： v-if = "表達式" 表達式值 true 顯示，false 隱藏
3. 原理： 基于條件判斷，是否 創(chuàng)建 或 移除 元素節(jié)點
4. 場景： 要么顯示，要么隱藏，不頻繁切換的場景
v-else 和v-else-if
1. 作用： 輔助 v-if 進行判斷渲染
2. 語法： v-else v-else-if = "表達式
3. 注意： 需要緊挨著 v-if 一起使用
v-on?
1. 作用： 注冊事件= 添加監(jiān)聽 + 提供處理邏輯
2. 語法：
① v-on:事件名 = "內(nèi)聯(lián)語句"
② v-on:事件名 = "methods中的函數(shù)名
3. 簡寫：@事件名
4. 注意：methods函數(shù)內(nèi)的 this 指向 Vue 實例
v-on 調(diào)用傳參?
v-bind?
1. 作用： 動態(tài)的設(shè)置html的標簽屬性
2. 語法： v-bind:屬性名="表達式"
3. 注意：
簡寫形式 :屬性名="表達式"
小案例案例：波仔的學(xué)習(xí)之旅
需求：點擊按鈕，切換圖片
?v-for
1. 作用： 基于數(shù)據(jù)循環(huán)， 多次渲染整個元素?→?數(shù)組、對象、數(shù)字
2. 遍歷數(shù)組語法：
v-for = "(item, index) in 數(shù)組"
- item 每一項， index 下標
- 省略 index: v-for = "item in 數(shù)組"
- v-for 中的 key
語法：key屬性 = "唯一標識"
作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復(fù)用。
注意：
key 的值只能是 字符串 或 數(shù)字類型
key 的值必須具有 唯一性
推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應(yīng)）
如果這個屬性不添加，那么在對數(shù)組進行操作的時候后重新渲染的數(shù)據(jù)會出現(xiàn)問題
例子：假設(shè)我們要刪除下圖中那個帶顏色的那個li，如果不添加 ：key=""?這個屬性，那么就會出現(xiàn)內(nèi)容被刪除了，但樣式還在的情況
不加 :key屬性的情況：
?加了 :key的屬性的情況
v-model?
1. 作用: 給 表單元素 使用, 雙向數(shù)據(jù)綁定?→ 可以快速 獲取 或 設(shè)置 表單元素內(nèi)容
- ① 數(shù)據(jù)變化 → 視圖自動更新
- ② 視圖變化 → 數(shù)據(jù)自動更新
2. 語法: v-model = '變量'
案例-小黑記事本?
① 列表渲染
② 刪除功能
③ 添加功能
④ 底部統(tǒng)計 和 清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>記事本</title>
</head>
<body><!-- 主體區(qū)域 -->
<section id="app"><!-- 輸入框 --><header class="header"><h1>小黑記事本</h1><input placeholder="請輸入任務(wù)" class="new-todo" v-model="todo" /><button class="add" v-on:click="add">添加任務(wù)</button></header><!-- 列表區(qū)域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in todoList" ><div class="view"><span class="index">{{index+1}}.</span> <label>{{item}}</label><button class="destroy" @click="del(index)"></button></div></li></ul></section><!-- 統(tǒng)計和清空 --><footer class="footer" v-show="todoList.length>0"><!-- 統(tǒng)計 --><span class="todo-count">合 計:<strong> {{todoList.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="delAll">清空任務(wù)</button></footer>
</section><!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList: [],todo: ''},methods:{add(){console.log(this.todo);this.todoList.push(this.todo)console.log(this.todoList);//加入本地存儲localStorage.setItem('todoList',JSON.stringify(this.todoList))this.todo = ''},delAll(){console.log('清空');this.todoList = []},render(){//讀取本地數(shù)據(jù)this.todoList = JSON.parse(getItem('todoList'))},del(index){// console.log(index);// 刪除指定數(shù)組元素this.todoList.splice(index,1)}}})</script>
</body>
</html>
?功能總結(jié)：
① 列表渲染：
v-for key 的設(shè)置 {{ }} 插值表達式
② 刪除功能
v-on 調(diào)用傳參 filter 過濾 覆蓋修改原數(shù)組
③ 添加功能
v-model 綁定 unshift 修改原數(shù)組添加
④ 底部統(tǒng)計 和 清空
數(shù)組.length累計長度
覆蓋數(shù)組清空列表
v-show 控制隱