Vue學習Day1——小案例快速入門Vue指令

這篇具有很好參考價值的文章主要介紹了Vue學習Day1——小案例快速入門Vue指令。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、Vue簡介

概念：是一套 構(gòu)建用戶界面 的 漸進式 框架
Vue2官網(wǎng)：https://v2.cn.vuejs.org/

1、什么是漸進式

所謂漸進式就是循序漸進，不一定非得把Vue中的所有API都學完才能開發(fā)Vue，可以學一點開發(fā)一點

Vue的兩種開發(fā)方式：

Vue核心包開發(fā)

場景：局部模塊改造
Vue核心包&Vue插件&工程化

場景：整站開發(fā)

二、創(chuàng)建Vue實例

Vue學習Day1——小案例快速入門Vue指令,前端,vue.js,學習,javascript
核心步驟（4步）：

準備容器
引包（官網(wǎng)） — 開發(fā)版本/生產(chǎn)版本
創(chuàng)建Vue實例 new Vue()
指定配置項，渲染數(shù)據(jù)
1. el:指定掛載點
2. data提供數(shù)據(jù)

三、插值表達式{{}}

插值表達式是一種Vue的模板語法

我們可以用插值表達式渲染出Vue提供的數(shù)據(jù)

1.作用：利用表達式進行插值，渲染到頁面中

表達式：是可以被求值的代碼，JS引擎會講其計算出一個結(jié)果

以下的情況都是表達式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()

2.語法

插值表達式語法：{{ 表達式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3.錯誤用法

1.在插值表達式中使用的數(shù)據(jù) 必須在data中進行了提供
<p>{{hobby}}</p>  //如果在data中不存在 則會報錯

2.支持的是表達式，而非語句，比如：if   for ...
<p>{{if}}</p>

3.不能在標簽屬性中使用 {{  }} 插值 (插值表達式只能標簽中間使用)
<p title="{{username}}">我是P標簽</p>

4.總結(jié)

1.插值表達式的作用是什么
利用表達式進行插值，將數(shù)據(jù)渲染頁面中

2.語法是什么
{{ 表達式 }}

3.插值表達式的注意事項

使用的數(shù)據(jù)要存在（data）
支持的是表達式，而非語句if、for等
不能在標簽屬性里面使用

四、響應(yīng)式特性

1、什么是響應(yīng)式？

簡單理解就是數(shù)據(jù)變，視圖對應(yīng)變。

數(shù) 據(jù) 改變，視圖自動更新

使用 Vue開發(fā) → 專注于業(yè)務(wù)核心邏輯即可

2、如何訪問和修改 data中的數(shù)據(jù)（響應(yīng)式演示）

data中的數(shù)據(jù), 最終會被添加到實例上

① 訪問數(shù)據(jù)： “實例.屬性名”

② 修改數(shù)據(jù)： “實例.屬性名”= “值”

Vue學習Day1——小案例快速入門Vue指令,前端,vue.js,學習,javascript

五、Vue開發(fā)者工具安裝

通過谷歌應(yīng)用商店安裝（國外網(wǎng)站）
極簡插件下載（推薦） https://chrome.zzzmh.cn/index

安裝步驟：

Vue學習Day1——小案例快速入門Vue指令,前端,vue.js,學習,javascript

六、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的帶有 v- 前綴 的特殊標簽屬性。

為啥要學：提高程序員操作 DOM 的效率。

vue 中的指令按照不同的用途可以分為如下 6 大類：

內(nèi)容渲染指令（v-html、v-text）
條件渲染指令（v-show、v-if、v-else、v-else-if）
事件綁定指令（v-on）
屬性綁定指令（v-bind）
雙向綁定指令（v-model）
列表渲染指令（v-for）

指令是 vue 開發(fā)中最基礎(chǔ)、最常用、最簡單的知識點。

七、內(nèi)容渲染指令

內(nèi)容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有如下2 個：

v-text（類似innerText）
- 使用語法：<p v-text="uname">hello</p>，意思是將 uame 值渲染到 p 標簽中
- 類似 innerText，使用該語法，會覆蓋 p 標簽原有內(nèi)容
v-html（類似 innerHTML）
- 使用語法：<p v-html="intro">hello</p>，意思是將 intro 值渲染到 p 標簽中
- 類似 innerHTML，使用該語法，會覆蓋 p 標簽原有內(nèi)容
- 類似 innerHTML，使用該語法，能夠?qū)TML標簽的樣式呈現(xiàn)出來。

代碼演示：

 
  <div id="app">
    <h2>個人信息</h2>
	// 既然指令是vue提供的特殊的html屬性，所以咱們寫的時候就當成屬性來用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">簡介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'wangkay',
                intro:'<h2>這是一個<strong>非常優(yōu)秀</strong>的boy<h2>'
            }
        })
</script>

八、條件渲染指令

條件判斷指令，用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是：

v-show
1. 作用：控制元素顯示隱藏
2. 語法： v-show = “表達式” 表達式值為 true 顯示， false 隱藏
3. 原理：切換 display:none 控制顯示隱藏
4. 場景：頻繁切換顯示隱藏的場景

2.v-if

作用：控制元素顯示隱藏（條件渲染）
語法： v-if= “表達式” 表達式值 true顯示， false 隱藏
原理：基于條件判斷，是否創(chuàng)建或移除元素節(jié)點
場景：要么顯示，要么隱藏，不頻繁切換的場景

示例代碼：

  <div id="app">
    <div class="box">我是v-show控制的盒子</div>
    <div class="box">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

v-else 和 v-else-if
1. 作用：輔助v-if進行判斷渲染
2. 語法：v-else v-else-if=“表達式”
3. 需要緊接著v-if使用

示例代碼：

  <div id="app">
    <p>性別：♂ 男</p>
    <p>性別：♀ 女</p>
    <hr>
    <p>成績評定A：獎勵電腦一臺</p>
    <p>成績評定B：獎勵周末郊游</p>
    <p>成績評定C：獎勵零食禮包</p>
    <p>成績評定D：懲罰一周不能玩手機</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

九、事件綁定指令

使用Vue時，如需為DOM注冊事件，及其的簡單，語法如下：

<button v-on:事件名="內(nèi)聯(lián)語句">按鈕</button>
<button v-on:事件名="處理函數(shù)">按鈕</button>
<button v-on:事件名="處理函數(shù)(實參)">按鈕</button>
v-on: 簡寫為 @

內(nèi)聯(lián)語句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

事件處理函數(shù)

注意：
- 事件處理函數(shù)應(yīng)該寫到一個跟data同級的配置項（methods）中
- methods中的函數(shù)內(nèi)部的this都指向Vue實例

<div id="app">
    <button @click="fn">切換顯示隱藏</button>
    <h1 v-show="isShow">掛機的阿凱</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn(){
          this.isShow = !this.isShow
        }
      }
    })
  </script>

3.給事件處理函數(shù)傳參

如果不傳遞任何參數(shù)，則方法無需加小括號；methods方法中可以直接使用 e 當做事件對象
如果傳遞了參數(shù)，則實參 $event 表示事件對象，固定用法。

 <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自動售貨機</h3>
      <button @click="buy(5)">可樂5元</button>
      <button @click="buy(10)">雪碧10元</button>
      <button @click="buy(8)">檸檬茶8元</button>
    </div>
    <p>微信余額：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy(price){
          this.money -= price
        }
      }
    })
  </script>

十、屬性綁定指令

作用：動態(tài)設(shè)置html的標簽屬性比如：src、url、title
語法：v-bind：屬性名=“表達式”
v-bind：可以簡寫成 => :

比如，有一個圖片，它的 src 屬性值，是一個圖片地址。這個地址在數(shù)據(jù) data 中存儲。

則可以這樣設(shè)置屬性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello wangkay'
      }
    })
  </script>

案例

需求：默認展示數(shù)組中的第一張圖片，點擊上一頁下一頁來回切換數(shù)組中的圖片

實現(xiàn)思路：

1.數(shù)組存儲圖片路徑 [‘url1’,‘url2’,‘url3’，…]

2.可以準備個下標index 去數(shù)組中取圖片地址。

3.通過v-bind給src綁定當前的圖片地址

4.點擊上一頁下一頁只需要修改下標的值即可

5.當展示第一張的時候，上一頁按鈕應(yīng)該隱藏。展示最后一張的時候，下一頁按鈕應(yīng)該隱藏

 <div id="app">
    <button v-show="index > 0" @click="index--">上一頁</button>
    <div>
      <img src alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一頁</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

十一、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用來輔助開發(fā)者基于一個數(shù)組來循環(huán)渲染一個列表結(jié)構(gòu)。

v-for 指令需要使用 (item, index) in arr 形式的特殊語法，其中：

item 是數(shù)組中的每一項
index 是每一項的索引，不需要可以省略
arr 是被遍歷的數(shù)組

此語法也可以遍歷對象和數(shù)字

//遍歷對象
<div v-for="(value, key, index) in object">{{value}}</div>
value:對象中的值
key:對象中的鍵
index:遍歷索引從0開始

//遍歷數(shù)字
<p v-for="item in 10">{{item}}</p>
item從1 開始

1、案例

根據(jù)以下渲染出列表

 booksList: [
          { id: 1, name: '《紅樓夢》', author: '曹雪芹' },
          { id: 2, name: '《西游記》', author: '吳承恩' },
          { id: 3, name: '《水滸傳》', author: '施耐庵' },
          { id: 4, name: '《三國演義》', author: '羅貫中' }
        ]

<div id="app">
    <h3>小凱的書架</h3>
    <ul>
      <li v-for="(item,index) in booksList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.name }}</span>
        <button @click="del(item.id)">刪除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《紅樓夢》', author: '曹雪芹' },
          { id: 2, name: '《西游記》', author: '吳承恩' },
          { id: 3, name: '《水滸傳》', author: '施耐庵' },
          { id: 4, name: '《三國演義》', author: '羅貫中' }
        ]
      },
      methods:{
        //filter:根據(jù)條件，保留滿足條件的對應(yīng)項，得到一個新數(shù)組
        this.booksList = this.booksList.filter(item = > item.id !== id)
      }
    })
  </script>

2、v-for中的key

語法： key=“唯一值”

作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。

**為什么加key：**Vue 的默認行為會嘗試原地修改元素（就地復用）

實例代碼：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">刪除</button>
  </li>
</ul>

注意：

key 的值只能是字符串或數(shù)字類型
key 的值必須具有唯一性
推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應(yīng)）

十二、雙向綁定

所謂雙向綁定就是：

數(shù)據(jù)改變后，呈現(xiàn)的頁面結(jié)果會更新
頁面結(jié)果更新后，數(shù)據(jù)也會隨之而變

作用：給表單元素（input、radio、select）使用，雙向綁定數(shù)據(jù)，可以快速獲取或 設(shè)置 表單元素內(nèi)容

語法：v-model=“變量”

需求：使用雙向綁定實現(xiàn)以下需求

點擊登錄按鈕獲取表單中的內(nèi)容
點擊重置按鈕清空表單中的內(nèi)容

<div id="app">
    賬戶：<input type="text"> <br><br>
    密碼：<input type="password"> <br><br>
    <button @click="login">登錄</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        console.log(this.username,this.password)
      },
      rest(){
        this.username = ""
        this.password = ""                
      }                  
    })
  </script>

綜合案例

Vue學習Day1——小案例快速入門Vue指令,前端,vue.js,學習,javascript

功能需求：

列表渲染
刪除功能
添加功能
底部統(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 v-model:id="toName" placeholder="請輸入任務(wù)" class="new-todo" />
        <button @click="add" class="add">添加任務(wù)</button>
    </header>
    <!-- 列表區(qū)域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
                    <button class="destroy" @click="del(item.id)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 統(tǒng)計和清空 -->
    <footer class="footer" v-show="list.length > 0">
        <!-- 統(tǒng)計 -->
        <span class="todo-count">合 計:<strong> {{ list.length }}</strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="clear">
            清空任務(wù)
        </button>
    </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            toName: '',
            list: [
                {id: 1,name: '微服務(wù)學習'},
                {id: 2,name: 'SpringBoot從入門到精通'},
                {id: 3,name: 'SpringCloud'}
            ]
        },
        methods: {
            del(id){
                this.list = this.list.filter(item => item.id !== id)
            },
            add(){
                if (this.toName.trim()=== ''){
                    alert('請輸入內(nèi)容')
                    return
                }
                this.list.unshift({
                    id: +new Date(),
                    name: this.toName
                })
                this.toName=''
            },
            clear(){
                   this.list=[]
            }
        }
    })

</script>
</body>
</html>

功能總結(jié)文章來源地址http://www.zghlxwxcb.cn/news/detail-610176.html

列表渲染
v-for、key的設(shè)置、 {{}}插值表達式
刪除功能
v-on調(diào)用傳參 filter過濾，覆蓋修改原數(shù)組
添加功能
v-model綁定 unshift修改原數(shù)組添加
底部數(shù)據(jù)和清空
數(shù)組.length累計長度
覆蓋數(shù)組清空列表
v-show控制隱藏

到了這里，關(guān)于Vue學習Day1——小案例快速入門Vue指令的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

Vue學習Day1——小案例快速入門Vue指令

一、Vue簡介

1、什么是漸進式

二、創(chuàng)建Vue實例

三、插值表達式{{}}

1.作用：利用表達式進行插值，渲染到頁面中

2.語法

3.錯誤用法

4.總結(jié)

四、響應(yīng)式特性

1、什么是響應(yīng)式？

2、如何訪問和修改 data中的數(shù)據(jù)（響應(yīng)式演示）

五、Vue開發(fā)者工具安裝

六、Vue中的常用指令

七、內(nèi)容渲染指令

八、條件渲染指令

九、事件綁定指令

十、屬性綁定指令

案例

十一、列表渲染指令

1、案例

2、v-for中的key

十二、雙向綁定

綜合案例

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

Vue學習Day1——小案例快速入門Vue指令

一、Vue簡介

1、什么是漸進式

二、創(chuàng)建Vue實例

三、插值表達式{{}}

1.作用：利用表達式進行插值，渲染到頁面中

2.語法

3.錯誤用法

4.總結(jié)

四、響應(yīng)式特性

1、什么是響應(yīng)式？

2、如何訪問 和 修改 data中的數(shù)據(jù)（響應(yīng)式演示）

五、Vue開發(fā)者工具安裝

六、Vue中的常用指令

七、內(nèi)容渲染指令

八、條件渲染指令

九、事件綁定指令

十、屬性綁定指令

案例

十一、列表渲染指令

1、案例

2、v-for中的key

十二、雙向綁定

綜合案例

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

1、什么是漸進式

二、創(chuàng)建Vue實例

三、插值表達式{{}}

1.作用：利用表達式進行插值，渲染到頁面中

四、響應(yīng)式特性

1、什么是響應(yīng)式？

2、如何訪問和修改 data中的數(shù)據(jù)（響應(yīng)式演示）

五、Vue開發(fā)者工具安裝

六、Vue中的常用指令

七、內(nèi)容渲染指令

八、條件渲染指令

九、事件綁定指令

1、案例

2、v-for中的key

十二、雙向綁定