VUE-區域性使用

愚生浅末發表於2024-05-14

Vue

VUE-區域性使用
- 快速入門
- 常用指令
  - v-for
  - v-bind
  - v-if & v-show
  - v-on
  - v-model
- vue生命週期
  - Axios
- Vue案例

VUE-區域性使用

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

快速入門

準備

準備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外掛即可直接執行

執行效果：

常用指令

指令：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>

執行效果：

注意：遍歷的陣列，必須在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>

執行效果：

點選即可跳轉

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>

效果：

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>

效果：

v-model

作用：在表單元素上使用，雙向資料繫結。可以方便的獲取或設定表單項資料
語法：v-model="變數名"
v-model 中繫結的變數，必須在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">

        文章分類: <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生命週期

生命週期：指一個物件從建立到銷燬的整個過程。
生命週期的八個階段：每個階段會自動執行一個生命週期方法(鉤子), 讓開發者有機會在特定的階段執行自己的程式碼

生命週期的八個階段：每個階段會自動執行一個生命週期方法(鉤子), 讓開發者有機會在特定的階段執行自己的程式碼

狀態	階段週期
beforeCreate	建立前
created	建立後
beforeMount	載入前
mounted	掛載完成
beforeUpdate	資料更新前
updated	資料更新後
beforeUnmount	元件銷燬前
unmounted	元件銷燬後

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

Axios

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

Axios使用步驟：

引入Axios的js檔案（參照官網）

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

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

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案例

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

【區域性特徵】ASIFT
2014-03-04
特徵
Java™ 教程（區域性類）
2019-01-19
Java
rtabmap 區域性建圖
2024-10-18
區域性內部類
2024-09-27
Python的區域性變數和全域性變數使用解惑
2017-08-16
Python變數
程式效能優化-區域性性原理
2019-01-17
優化
使用ajax實現頁面區域性重新整理
2021-09-09
python學習筆記區域性和全域性作用域
2019-03-20
Python筆記
vue.js全域性元件和區域性元件區別
2020-07-26
Vue.js元件
Flutter 區域性路由實現
2019-06-10
Flutter路由
影片區域性打馬賽克
2024-05-04
全域性變數與區域性變數
2019-10-21
變數
區域性線性嵌入(LLE)原理總結
2017-01-10
分割槽索引：區域性 locally & 全域性 global
2008-04-28
索引
Laravel-admin 區域性使用阿里圖示 Iconfont
2020-01-20
Laravel阿里
Flutter 使用Navigator進行區域性跳轉頁面
2020-05-26
Flutter
VUE的雙向繫結及區域性元件的使用
2018-11-28
Vue元件
C語言區域性變數、全域性變數、靜態區域性變數、靜態全域性變數
2017-11-21
C語言變數
javascript中的作用域（全域性變數和區域性變數）
2018-05-22
JavaScript變數
VUE-地區選擇器(V-Distpicker)元件使用心得
2018-05-07
Vue元件
Vue -- vue-全域性導航守衛
2020-12-27
Vue
Android中全域性變數與區域性變數的使用總結
2015-01-07
Android變數
重磅! flutter檢視區域性更新
2019-09-22
Flutter
jQuery重新整理區域性div
2020-11-10
jQuery
laravel 區域性排除中介軟體
2021-10-20
Laravel
Mac圖片區域性擦除工具
2020-10-15
Mac
區域性神經(Composite) (轉)
2008-01-31
區域性性原理——各類優化的基石
2019-08-05
優化
Java區域性變數與全域性變數
2018-12-21
Java變數
java 全域性變數和區域性變數
2018-07-27
Java變數
Python的全域性和區域性變數
2018-01-03
Python變數
JavaScript —— 區域性變數和全域性變數
2013-07-20
JavaScript變數
jmeter全域性變數和區域性變數
2024-04-02
JMeter變數
【c】全域性變數與區域性變數
2024-08-20
變數
用scikit-learn研究區域性線性嵌入(LLE)
2017-01-11
全域性分割槽索引和區域性分割槽索引
2015-12-08
索引
python全域性變數與區域性變數
2013-03-22
Python變數
RecyclerView 區域性重新整理的坑
2019-03-04
View

VUE-區域性使用

VUE-區域性使用

快速入門

常用指令

v-for

v-bind

v-if & v-show

v-on

v-model

vue生命週期

Axios

Vue案例

相關文章