VUE-局部使用

来源:https://www.cnblogs.com/kohler21/p/18191528
-Advertisement-
Play Games

目錄VUE-局部使用快速入門常用指令v-forv-bindv-if & v-showv-onv-modelvue生命周期AxiosVue案例 VUE-局部使用 Vue 是一款用於構建用戶界面的漸進式的JavaScript框架。 （官方：https://cn.vuejs.org/） 快速入門 準備 準 ...


目錄

VUE-局部使用

Vue 是一款用於構建用戶界面的漸進式的JavaScript框架。 （官方：https://cn.vuejs.org/）

image-20240513214331028

image-20240513214422667

快速入門

準備

  • 準備html頁面,並引入Vue模塊（官方提供）
  • 創建Vue程式的應用實例
  • 準備元素(div)，被Vue控制

構建用戶界面

  • 準備數據
  • 通過插值表達式渲染頁面

vscode新建html文件並快速生成標準的html代碼：https://www.cnblogs.com/kohler21/p/18190122

示例代碼：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模塊 -->
    <script type="module">
        // 引入vue模塊
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //創建vue的應用實例
        createApp({
            data(){
                return{
                    //定義數據
                    msg: 'hello,vue'
                }
            }

        }).mount("#app");
    </script>
</body>
</html>

vscode安裝Live Server插件即可直接運行

image-20240513215229009

image-20240513215348572

運行效果：

image-20240513215455843

常用指令

指令：HTML標簽上帶有 v-首碼的特殊屬性，不同的指令具有不同的含義，可以實現不同的功能。

指令 作用
v-for 列表渲染，遍歷容器的元素或者對象的屬性
v-bind 為HTML標簽綁定屬性值，如設置 href , css樣式等
v-if/v-else-if/v-else 條件性的渲染某元素，判定為true時渲染,否則不渲染
v-show 根據條件展示某元素，區別在於切換的是display屬性的值
v-model 在表單元素上創建雙向數據綁定
v-on 為HTML標簽綁定事件

v-for

作用：列表渲染，遍歷容器的元素或者對象的屬性
語法： v-for = "(item,index) in items"
參數說明：

  • items 為遍歷的數組
  • item 為遍歷出來的元素
  • index 為索引/下標，從0開始 ；可以省略，省略index語法： v-for = "item in items"

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章標題</th>
                <th>分類</th>
                <th>發表時間</th>
                <th>狀態</th>
                <th>操作</th>
            </tr>
            <!-- 哪個元素要出現多次，v-for指令就添加到哪個元素上 -->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>編輯</button>
                    <button>刪除</button>
                </td>
            </tr>
            
        </table>
    </div>

    <script type="module">
        //導入vue模塊
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //創建應用實例
        createApp({
            data() {
                return {
                    //定義數據
                    articleList:[
                    {
                        title:"醫療反腐絕非砍醫護收入",
                        category:"時事",
                        time:"2023-09-5",
                        state:"已發佈"
                    },
                    {
                        title:"中國男籃緣何一敗塗地？",
                        category:"籃球",
                        time:"2023-09-5",
                        state:"草稿"
                    },
                    {
                        title:"華山景區已受大風影響陣風達7-8級，未來24小時將持續",
                        category:"旅游",
                        time:"2023-09-5",
                        state:"已發佈"
                    }

                    ]
                }
            }
        }).mount("#app")//控制頁面元素
    </script>
</body>
</html>

運行效果：

image-20240513220759989

註意：遍歷的數組，必須在data中定義； 要想讓哪個標簽迴圈展示多次，就在哪個標簽上使用 v-for 指令。

v-bind

  • 作用：動態為HTML標簽綁定屬性值，如設置href，src，style樣式等。
  • 語法：v-bind:屬性名="屬性值"
  • 簡化：:屬性名="屬性值"

v-bind所綁定的數據，必須在data中定義 。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">愷龍的博客</a>
        //簡化寫法
        <a :href="url">愷龍的博客</a>
    </div>

    <script type="module">
        //引入vue模塊
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //創建vue應用實例
        createApp({
            data() {
                return {
                    url:'https://www.cnblogs.com/kohler21'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

運行效果：

點擊即可跳轉

image-20240513221310455

v-if & v-show

  • 作用：這兩類指令，都是用來控制元素的顯示與隱藏的

v-if

  • 語法：v-if="表達式"，表達式值為 true，顯示；false，隱藏
  • 其它：可以配合 v-else-if / v-else 進行鏈式調用條件判斷
  • 原理：基於條件判斷，來控制創建或移除元素節點（條件渲染）
  • 場景：要麼顯示，要麼不顯示，不頻繁切換的場景

v-show

  • 語法：v-show="表達式"，表達式值為 true，顯示；false，隱藏
  • 原理：基於CSS樣式display來控制顯示與隱藏
  • 場景：頻繁切換顯示隱藏的場景

v-if 與 v-show的區別：

  • v-if 是根據條件判斷是創建還是移除元素節點（條件渲染）。
  • v-show 是根據css樣式display來控制元素的顯示與隱藏 。

v-if 與 v-show的適用場景：

  • v-if 適用於顯示與隱藏切換不頻繁的場景 。
  • v-show 適用於顯示與隱藏切換頻繁的場景 。

v-if示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        手鏈價格為:  
        <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  
        <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> 
        <span v-else>29.9</span>

    </div>

    <script type="module">
        //導入vue模塊
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //創建vue應用實例
        createApp({
            data() {
                return {
                    customer:{
                        name:"張三",
                        level:2
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

效果：

image-20240514103627473

v-show實現：

手鏈價格為:  
        <span v-show="customer.level>=0 && customer.level<=1">9.9</span>  
        <span v-show="customer.level>=2 && customer.level<=4">19.9</span> 
        <span v-show="customer.level>=5">29.9</span>

v-on

  • 作用：為html標簽綁定事件
  • 語法：
    v-on:事件名="函數名"
    簡寫為： @事件名="函數名"
  • 函數需要定義在methods選項內部
createApp({ data(){需要用到的數據}, methods:{需要用到的方法} })

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="money">點我有驚喜</button> &nbsp;
        <button @click="love">再點更驚喜</button>
    </div>

    <script type="module">
        //導入vue模塊
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //創建vue應用實例
        createApp({
            data() {
                return {
                    //定義數據
                }
            },
            methods:{
                money:function(){
                    alert('送你錢100')
                },
                love:function(){
                    alert('愛你一萬年')
                }
            }
        }).mount("#app");//控制html元素

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

效果：

image-20240514144059468image-20240514144113601

image-20240514144130747

v-model

  • 作用：在表單元素上使用，雙向數據綁定。可以方便的 獲取 或 設置 表單項數據
  • 語法：v-model="變數名"
  • v-model 中綁定的變數，必須在data中定義。

image-20240514144321929

image-20240514144407886

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分類: <input type="text" v-model="searchCondition.category" />

        發佈狀態: <input type="text" v-model="searchCondition.state" />

        <button>搜索</button>
        <button @click="clear">重置</button>
        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章標題</th>
                <th>分類</th>
                <th>發表時間</th>
                <th>狀態</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>編輯</button>
                    <button>刪除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //導入vue模塊
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //創建vue應用實例
        createApp({
            data() {
                return {
                    //定義數據
                    searchCondition:{
                        category:'',
                        state:''

                    },
                    articleList: [{
                        title: "醫療反腐絕非砍醫護收入",
                        category: "時事",
                        time: "2023-09-5",
                        state: "已發佈"
                    },
                    {
                        title: "中國男籃緣何一敗塗地？",
                        category: "籃球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "華山景區已受大風影響陣風達7-8級，未來24小時將持續",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已發佈"
                    }]
                }
            },
            methods:{
                clear:function(){
                     //清空category以及state的數據
                    //在methods對應的方法里，使用this獲取到vue實例中轉杯的數據
                    this.searchCondition.category='';
                    this.searchCondition.state='';
                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

</html>

效果：

222

vue生命周期

  • 生命周期：指一個對象從創建到銷毀的整個過程。
  • 生命周期的八個階段：每個階段會自動執行一個生命周期方法(鉤子), 讓開發者有機會在特定的階段執行自己的代碼

image-20240514154939011

  • 生命周期的八個階段：每個階段會自動執行一個生命周期方法(鉤子), 讓開發者有機會在特定的階段執行自己的代碼
狀態 階段周期
beforeCreate 創建前
created 創建後
beforeMount 載入前
mounted 掛載完成
beforeUpdate 數據更新前
updated 數據更新後
beforeUnmount 組件銷毀前
unmounted 組件銷毀後

image-20240514155047511

Vue生命周期典型的應用場景 ：在頁面載入完畢時，發起非同步請求，載入數據，渲染頁面。

Axios

Axios 對原生的Ajax進行了封裝，簡化書寫，快速開發。官網：https://www.axios-http.cn/

Axios使用步驟：

  • 引入Axios的js文件（參照官網）

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  • 使用Axios發送請求，並獲取相應結果

image-20240514155537151

  • method：請求方式，GET/POST…
  • url：請求路徑
  • data：請求數據

Axios-請求方式別名

  • 為了方便起見，Axios已經為所有支持的請求方法提供了別名
  • 格式：axios.請求方式(url [, data [, config]])

get請求：

  axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

post請求：

  axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

Axios 發送非同步請求 :

  • GET:
    axios.get(url).then((res)=>{…}).catch((err)=>{…})
  • POST:
    axios.post(url,data).then((res)=>{…}).catch((err)=>{…})

Vue案例

image

https://gitee.com/kohler19/kohler19/blob/master/Vue學習/vue案例.md

歡迎關註我的公眾號，共同學習


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 鴻蒙HarmonyOS實戰-Stage模型（UIAbility組件）
    一、UIAbility組件 1.概述 HarmonyOS中的Stage模型是一種基於UIAbility組件的應用程式架構。UIAbility是HarmonyOS系統中用於構建用戶界面的基本組件之一。它負責處理應用程式界面的顯示和交互。 在Stage模型中，每個應用程式都有一個或多個Stage ...
  • 蘋果開發者是否審核歧視中國開發者？傲慢無恥的蘋果公司
    說來慚愧，作為差不多10年的開發者，第一次嘗試提審，結果卻收穫來了蘋果無休止的等待 我從4月24日替身，後續到現在沒有任何回饋，只告訴你 other 原因拒絕， 請問蘋果是只針對中國開發者，還是所有開發者？ 如果一個賬戶按年計費，一次等待按照一個月起算，耽誤多少開發者的時間和金錢。 我知道蘋果一向傲 ...
  • 我為什麼還要造一個前端輪子？
    有時候，我們需要在網頁判斷用戶是否處與非活躍狀態，如果用戶長時間沒有在頁面上進行任何操作，我們則判定該用戶是非活躍的。 在 javascript 中我們可以通過監聽某些滑鼠或鍵盤相關的事件來判定用戶是否在活躍中。 ...
  • JavaScript中執行上下文和執行棧是什麼？
    一、執行上下文 簡單的來說，執行上下文是一種對Javascript代碼執行環境的抽象概念，也就是說只要有Javascript代碼運行，那麼它就一定是運行在執行上下文中 執行上下文的類型分為三種： 全局執行上下文：只有一個，瀏覽器中的全局對象就是 window對象，this 指向這個全局對象 函數執行 ...
  • 記使用pdf.js過程遇到的坑
    最近項目中需要用到js庫來渲染pdf文件，調研後發現無論是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基礎上做了些許精簡，反而功能還不如原始的pdf.js來得全面。但是原始的庫幾乎沒有像樣的代碼示例，而能搜索到的大多數代碼不少都是十幾年前的了，在這個過程中踩了不少坑，做 ...
  • 說說webpack proxy工作原理？為什麼能解決跨域?
    一、是什麼 webpack proxy，即webpack提供的代理服務 基本行為就是接收客戶端發送的請求後轉發給其他伺服器 其目的是為了便於開發者在開發模式下解決跨域問題（瀏覽器安全策略限制） 想要實現代理首先需要一個中間伺服器，webpack中提供伺服器的工具為webpack-dev-server ...
  • 實現抖音 “視頻無限滑動“效果
    前言 在家沒事的時候刷抖音玩，抖音首頁的視頻怎麼刷也刷不完，經常不知不覺的一刷就到半夜了 不禁感嘆道 ＂垃圾抖音，費我時間，毀我青春＂ 這是我的 模仿抖音 系列文章的第二篇，本文將一步步實現抖音首頁 視頻無限滑動 的效果，乾貨滿滿 第一篇：200行代碼實現類似Swiper.js的輪播組件 第 ...
  • next-route
    一、錯誤類型 任何一個框架，對於錯誤的處理都是一種必備的能力 在Vue 中，則是定義了一套對應的錯誤處理規則給到使用者，且在源代碼級別，對部分必要的過程做了一定的錯誤處理。 主要的錯誤來源包括： 後端介面錯誤 代碼中本身邏輯錯誤 二、如何處理 後端介面錯誤 通過axios的interceptor實現 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類