當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Vue框架初识01

發布時間：2023/12/29 综合教程 33 生活家

生活随笔收集整理的這篇文章主要介紹了 Vue框架初识01 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

摘要

vue簡介
vue使用

一、Vue簡介：

簡介：

Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。

Vue是前端三大框架之一(Angular、Vue、React)

JS漸進式框架：一個頁面小到一個變量，大到整個頁面，均可以有vue控制，vue也可以控制整個項目

# 思考：vue如何做到一次引入控制整個項目 => 單頁面應用 => vue基于組件的開發

初識vue，我們可以思考一下vue的工作原理：vue如何渲染一個頁面

vue學習曲線：vue的指令 vue的實例成員 vue組件 vue項目開發

vue的優點：

①單頁面：高效

②虛擬DOM：頁面緩存

③數據的雙向綁定：數據具有監聽機制

④數據驅動：從數據觸發，不是從DOM出發

vue的使用：

1、下載地址：https://cn.vuejs.org/v2/guide/installation.html

2、在html頁面用<script>標簽引入使用

在html中書寫掛載點的頁面結構，用id表示
在自定義的script標簽實例化Vue對象，傳入一個大字典
在字典中通過 el與掛載點頁面結構綁定，data為其通過數據

二、vue的基本使用：

點擊事件：v-on:click="點擊事件產生動作名稱"

<body>
<div id="app">
    <!--{{ vue變量 }} 插值表達式-->
    <h1 v-on:click="clickAction">{{ h1_msg }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 掛載點
        data: {
            h1_msg: 'vue利用插值表達式渲染的變量內容',
        },
        methods: {
            clickAction:function () {
                alert(123)
            }
        }
    })
</script>

vue操作簡單樣式

<body>
<div id="app">
    <p v-on:click="btnClick1" v-bind:style="v_style">點擊p標簽文字顏色變綠</p>
    <div v-on:click="btnClick2" v-bind:style="v_style">點擊div標簽文字顏色變綠</div>

</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 掛載點
        data: {
            v_style: {color: 'black'},
        },
        methods: {
            btnClick1:function () {
                this.v_style.color = 'green'
            },
            btnClick2:function () {
                this.v_style.color = 'red'
            }
        }
    })
</script>

小結：vue是通過v-*指令來控制標簽，同時通過變量內的數據來驅動頁面的渲染

vue相關指令認識：

文本指令

<body>
<div id="app">
    <!--插值表達式另一種形式 v-text-->
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
    <!--可以通過v-html來解析html標簽-->
    <p v-html="msg3" v-on:mouseover="action1"></p>

    <!--v-once，必須賦初值，且渲染的結果不會變化-->
    <p v-once="msg4" v-on:mouseover="action">{{ msg4 }}</p>

</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 掛載點
        data: {
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>',
            msg4: '**msg4**',
        },
        methods: {
            action:function () {
                this.msg4 = '**新的msg4**'
            },
            action1:function () {
                this.msg3 = '**新的msg3**'
            },
        }
    })
</script>

事件指令

<body>
<div id="app">
    <!--v-on:事件名="函數名"，這種表示可以進行簡寫：@事件名="函數名"，也就是將v-on:簡寫成一個@代替-->
    <p v-on:click="action1">{{ msgs[0] }}</p>
    <p @click="action2">{{ msgs[1] }}</p>

    <!--事件的傳參-->
    <ul>
        <li @click="liAction(100)">列表組1</li>
        <li @click="liAction(200)">列表組2</li>
        <li @click="liAction(300)">列表組3</li>
    </ul>
    <!--鼠標事件對象：直接寫函數名，默認將鼠標事件對象傳入-->
    <div @click="func1">func1</div>
    <!--鼠標事件對象，一但添加()，就必須手動傳參，$event就代表鼠標事件對象-->
    <div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 掛載點
        data: {
            msgs: ['111', '222']
        },
        methods: {
            action1:function () {
                alert(this.msgs[0])
            },
            action2:function () {
                alert(this.msgs[1])
            },
            liAction:function (num, msg) {
                console.log(num, msg)
            },
            func1:function (ev) {
                console.log(ev)
            },
            func2:function (ev,msg) {
                console.log(ev);
                console.log(msg)
            },
        }
    })
</script>

屬性指令

    <style>
        .rDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .gDiv {
            width: 100px;
            height: 50px;
            background-color: blue;
        }
        .br {
            border-radius: 50%;
        }


    </style>
</head>
<body>
<div id="app">
    <!--屬性指令：用vue綁定屬性，將屬性內容交給vue處理-->
    <!--語法：v-bing:屬性名="變量" (v-bind:可以簡寫為:)-->
    <p class="" v-bind:sgt="oo" :jason="xx"></p>

    <!--class 屬性-->
    <p :class="c1" @click="action1"></p>
    <!--多個類名-->
    <p :class="[c1, c2]"></p>
    <!--'br'固定寫死的數據，不再是變量-->
    <p :class="[c1, 'br']"></p>

    <!--style屬性-->
    <!--一個變量：該變量的值為{}，{}內部完成了一個個屬性的設置-->
    <p class="gDiv" :style="s1">12345</p>
    <!--一個{}，{}內是一個個屬性，由一個個變量單獨控制-->
    <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 掛載點
        data: {
            oo: 'SGT',
            xx: 'JASON',
            c1: 'rDiv',
            c2: 'br',
            s1: {
                fontSize: '30px',
                color: 'black'
            },
            fs: '10px',
            c: 'orange'
        },
        methods: {
            action1:function () {
                if (this.c1=='rDiv'){this.c1='gDiv'}
                else{this.c1='rDiv'}
            }
            },

    })
</script>

if條件指令

通過變量控制元素或組件的渲染與否，即控制相關元素的銷毀與重建

<body>
<div id="app">
    <!-- 條件指令 v-show | v-if-->
    <!-- v-show：消失是以 display: none渲染 -->
    <div class="div" v-show="s1">123</div>
    <!-- v-if：消失時不會被渲染 -->
    <div class="div" v-if="s2">456</div>

</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            s1: false,
            s2: true
        }
    })
</script>
</body>

#).v-show也用于根據條件控制元素的顯示與隱藏，不同的是，v-show無論取何值，元素都會被渲染到dom結構，v-show的取值只是影響元素的display取值。

#).v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

v-model雙向綁定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">

</div>
<script src="vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data:{
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

總結

以上是生活随笔為你收集整理的Vue框架初识01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
框架

上一篇：网络设备选型（网络布线）
下一篇： eth客户端安装 & geth使