碼上快樂

相關內容    簡體    繁體

Vue前端框架（JavaScript框架）

本文轉載自   查看原文   2019-06-26 20:49   1753 

web應用不管是css，html還是js都寄生於瀏覽器，所有與硬件內存交互的都是瀏覽器，如果瀏覽器卡了，js的優化做得再好也沒用

Vue是做了底層優化的，可以和內存打交道，有緩存

 

Vue優點：

單頁面：高效，流量低，i/o低，運行效率高

虛擬DOM：頁面緩存

數據的雙向綁定

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

 

Vue安裝：

https://cn.vuejs.org/

進入官網點學習》教程》安裝》點開開發版本》直接復制下來存為js文件》用script引入

 

 

 

 

 

 

 

Vue簡單使用

 

<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>vue初識</title></head><body><div id="app">

    <!-- {{ vue變量 }} 插值表達式 -->

    <h1>{{ h1_msg }}</h1>

    <h2>{{ h2_msg }}</h2></div></body><script src="js/vue.js"></script><script>

    new Vue({

        el: '#app',  // 掛載點        data: {  // 為掛載點的頁面結構提高數據            h1_msg: 'h1的內容',

            h2_msg: 'h2的內容',

        }

    })</script></html>

 

 {{ h1_msg }}       相當於是一個變量，

h1_msg: 'h1的內容'        相當於給變量賦值

el:'#app'           只有id為app的標簽里的{{}}才能被識別為變量

data:{     }         在這里面給變量賦值

（注意，只寫變量不賦值，前端會報錯，前端頁面能刷出來，沒有賦值的變量顯示不出來，相當於沒寫；

想不報錯就直接賦值''）

注意定義變量和賦值的時候不能給變量打引號，比如 {{ 'h1_msg' }}，'h1_msg': 'h1的內容' ，這樣寫是不會有效果的

 

 Vue完成簡單事件（函數變量）


<div id="app">
    <h1 v-on:click="clickAction">h1的內容是{{ msg }}</h1>
</div>
</body>
<script src="js/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'vue渲染的內容'
        },
        methods: {  // 為掛載點提供事件的
            clickAction: function () {
                alert(123)
            }
        }
    })
</script>

Vue操作簡單樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div  class="main">
    <h1>{{h1標簽里的變量}}sfgsdfgsdf{{x}}{{aaaaaaaaaaa}}</h1>
    <h2>{{h2標簽}}</h2>
    <h1 v-on:click="clickAction" v-bind:style="v_style"> alert框 </h1>
</div>  #這里v_style就是一個變量了，是變量就需要在下面的data里面給他賦值，可以給它添多個樣式，所以值用字典形式
我們可以把clickAction當成一個事件（函數）變量，v_style當成一個樣式變量

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'.main',
        data:{
            h1標簽里的變量:'h1變量值',
            x:'nbsp',
            v_style:{
                color:'red'
            }
        },
        methods:{
           clickAction :function () {

               this.v_style.color = 'green'
           }
        }
    });
</script>
</html>

 

1.vue通過 v-* 指令來控制標簽
2.vue通過 變量 來驅動頁面

 

 指令

 文本指令

<div id="app">
    <!-- 插值表達式就是 v-text的簡寫 -->
    <p>{{ msg1 }}</p>##可以在標簽里面加內容
    <p v-text="msg2"></p> ##在標簽里面寫內容是無效的，比如<p>adadas<p>是顯示不出來的 只會顯示<b>**msg2**</b>
    <p v-html="msg3"></p><!-- 可以解析html標簽 -->
    
    <!-- 必須賦初值，渲染的結果永遠不會發生改變 -->
    <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>',
        },
        methods: {
            action: function () {
                // var msg = this.$data.msg4;
                this.msg3 = '<i>**new msg3**</i>'
            }
        }
    })
</script>

 

事件指令

 如果有很多個相同或類似的變量，我們不可能一個一個賦值，我們就把他們的值放到一個容器里

<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="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msgs: ['11111', '22222']
        },
        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>

 

鼠標對象打印出來

 

 屬性指令

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <style>
        .rDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .gDiv {
            width: 200px;
            height: 50px;
            background-color: green;
        }
        .br {
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 屬性指令：用vue綁定屬性，將屬性內容交給vue處理 -->
    <!-- 語法：v-bind:屬性名="變量"  (v-bind: 可以簡寫為 :) -->
    <p class="" style="" v-bind:owen="oo" :jason="jj"></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="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            oo: 'Owen',
            jj: 'Jason',
            c1: 'rDiv',
            c2: 'br',
            s1: {
                // 'font-size': '30px'
                fontSize: '30px',
                color: 'pink'
            },
            fs: '20px',
            c: 'orange'
        },
        methods: {
            action1: function () {
                if (this.c1 == 'rDiv') {
                    this.c1 = 'gDiv'
                } else {
                    this.c1 = 'rDiv'
                }
            }
        }
    })
</script>
</html>

 

表單指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <!-- 表單指令：v-model:value="變量"，簡寫 v-model="變量" -->
    <form action="">
        <p>
            <input type="text" v-model="val" name="user">
        </p>
        <p>
            <input type="text" v-model="val">
        </p>

        <!-- 單選框 v-model綁定的變量是單選框中某一個input的value -->
        <p>
            男: <input v-model="r_val" value="male" type="radio" name="sex">
            女: <input v-model="r_val" value="female" type="radio" name="sex">
        </p>

        <!-- 復選框 v-model綁定的變量是一個列表，列表存存放0到任一個復選框的value  -->
        <p>
            男: <input v-model="c_val" value="m" type="checkbox" name="h">
            女: <input v-model="c_val" value="f" type="checkbox" name="h">
            哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
        </p>

        <button type="submit">提交</button>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            val: '',
            r_val: 'female',
            c_val: []
        }
    })
</script>
</html>

 

 條件指令

<meta charset="UTF-8">
<style>
    .div {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        border-radius: 50%;
    }
</style>
<div id="app">
    <!-- 條件指令 v-show | v-if-->
    <!-- v-show：消失是以 display: none渲染 -->
    <div class="div" v-show="s1"></div>
    <div class="div" v-show="s1"></div>
    <!-- v-if：消失是不會被渲染渲染，所以建議建立緩存, 用key屬性 -->
    <div class="div" v-if="s2" key="div1"></div>
    <div class="div" v-if="s2" key="div2"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            s1: false,
            // s2: false  沒寫默認為false
        }
    })
</script>

 

 

 

<meta charset="utf-8">
<style>
    ul li {
        border: 1px solid black;
        width: 60px;
        float: left;
    }
    ul {
        list-style: none;
    }
    ul:after {
        content: "";
        display: block;
        clear: both;
    }
    .wrap {
        width: 500px;
        height: 200px;
    }
    .red { background-color: red; }
    .blue { background-color: blue; }
    .green { background-color: green; }
</style>
<div id="app">
    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @click="changeWrap(0)">red</li>
        <li @click="changeWrap(1)">green</li>
        <li @click="changeWrap(2)">blue</li>
    </ul>
    <!-- red頁面邏輯結構 -->
    <div class="wrap red" v-if="tag == 0" key="aaa"></div>
    <!-- green頁面邏輯結構 -->
    <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
    <!-- blue頁面邏輯結構 -->
    <div class="wrap blue" v-else key="ccc"></div>
    <!-- v-if相關分支操作,在未顯示情況下,是不會被渲染到頁面中 -->
    <!-- 通過key全局屬性操作后,渲染過的分支會建立key對應的緩存,提高下一次渲染速度 -->
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            tag: 0,
        },
        methods: {
            changeWrap (num) {
                this.tag = num;
            }
        }
    })
</script>

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 VUE前端框架 Vue—前端框架 前端框架Vue-認識 VUE 與其他常見前端框架對比 常用vue前端UI框架 React前端框架以及和Vue的對比 Vue 淺談前端js框架vue 2017年 JavaScript 框架回顧 -- 前端框架 Vue前端框架面試問題 Cesium取代leaflet，和Vue等前端框架結合
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM