Vue的介紹及基礎指令

時間 2019-11-19

標籤 vue 介紹基礎指令简体版

原文原文鏈接

1、什麼是Vue

Vue.js是一個漸進式 JavaScript 框架

經過對框架的瞭解與運用程度，來決定其在整個項目中的應用範圍，最終能夠獨立以框架方式完成整個web前端項目javascript

爲何要學習Vue

三大主流框架之一：Angular React Vue
先進的前端設計模式：MVVM
能夠徹底脫離服務器端，之前端代碼複用的方式渲染整個頁面：組件化開發

特色

單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOM

如何使用Vue

開發版本：vue.js
生產版本：vue.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用vue</title>
</head>
<body>
    <div id="box1">
        {{ }}
    </div>
    <hr>
    <div class="box2">
        {{ }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /* 
        拿到jquery框架的對象 ($ | jQuery) ===> 使用jquery框架
        拿到vue框架的對象 ( new Vue() ) ===> 使用vue框架
    */

    // vue對象須要手動建立, 緣由是一個vue對象能夠只控制頁面中的某一部分, 若是一個頁面有多個部分都須要被控制, 那麼就須要建立多個vue對象

    /*
      vue對象如何與控制的頁面進行綁定關聯
        採用的是vue對象中的掛載點(掛載點能夠惟一標識頁面中的某一個區域)
    */
    new Vue({
        el: "#box1"
        // 掛載在id爲box1的div上, 那麼該div下的全部內容都由該vue對象來控制
    });

    new Vue({
        el: '.box2'
        // 掛載在class爲box2的div上, 那麼該div下的全部內容都由該vue對象來控制 (儘可能使用id, 惟一標識)
    })
</script>
</html>

Vue的掛載點（vue實例）

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // Vue實例會根據數據產生虛擬DOM,最終替換掉掛載點的真實DOM(不要掛在到body上)
    var app = new Vue({
        el: '#app',
        data: {
            msg: "開啓vue學習之路"
        }
    });

    // 若是須要使用vue對象(實例), 那麼就能夠接受Vue建立的結果, 反之就不須要接收
    console.log(app);
    console.log(app.$attrs); // vue實例的變量都是以$開頭
    console.log(app.$el);
    console.log(app.$data.msg);
    console.log(app.msg);
    // app對象 = new Vue()實例 = 標籤div#app組件

</script>

vue的基礎指令

文本指令

<body>
    <div id="app">
        <p>{{ info }}</p>
        <!-- v-text 爲vue的文本指令 ="info" , info爲vue實例data中的一個變量 -->
        <p v-text="info"></p>
        <p v-text="msg"></p>
        <p v-html="res"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            info: "插值表達式",
            msg: "文本指令",
            res: "<b>加粗的文本</b>"
        }
    })
</script>

屬性指令

<body>
    <div id="app">
        <!-- v-bind:屬性 = "變量" -->
        <!-- 若是abc自定義屬性被v-bind:指令綁定了,後面的值也會成爲vue變量, 若是就想是普通字符串, 再用''包裹 -->
        <!-- : 就是 v-bind: 的簡寫方式 (1.經常使用 2.必定且只操做屬性)-->
        <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>

        <!--最經常使用的兩個屬性 class | style-->

        <!--class-->
        <p :class="a"></p> <!-- 單類名 --> 
        <p :class="[a, b]"></p> <!-- 多類名 -->
        <p :class="{c: d}"></p> <!-- 瞭解: c爲類名,是否起做用取決於d值爲true|false 開關類名 -->
        <!--style-->
        <p :style="s1"></p> <!-- s1爲一套樣式 --> 
        <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 瞭解: s1,s2均爲一套樣式, ta是一個變量,專門賦值給textAlign("text-align") --> 

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            h_info: "懸浮提示",
            hehe: "呵呵",
            a: 'active',
            b: 'rule',
            d: false,
            s1: { // 樣式1: 值1, ..., 樣式n: 值n
                width: '200px',
                height: '200px',
                background: 'red'
            },
            s2: {
                borderRadius: '50%'
            },
            ta: 'center'
        }
    })
</script>

事件指令

<body>
    <div id="app">
        <!-- v-on:事件 = "變量 簡寫 @ -->
        <!-- 事件綁定的變量能夠在data中賦值,但建議在methods中賦值 -->
        <p v-on:click="fn1">11111111111111</p>
        <p @click="fn2">22222222222222</p>
        <!--vue事件的綁定能夠傳自定義參數-->
        <p @click="fn3(333)">3333333333333333</p>
        <!--vue事件的綁定不傳自定義參數, 默認將事件對象傳過去了-->
        <p @click="fn4">4444444444444444</p>
        <!--vue事件的綁定傳自定義參數, 還要將事件對象傳過去了, 要明確傳$event-->
        <p @click="fn5(555, $event)">5555555555555555</p>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            // 事件在data中提供一個函數地址,能夠實現事件
            fn1: function () {
                console.log("11111111111111")
            }
        },
        // 事件儘可能(要求)都放在vue實例的methods中
        methods: {
            fn2: function () {
                console.log("22222222222222")
            },
            fn3 (arg) {  // ES6語法
                console.log(arg)
            },
            fn4: function (ev) {
                console.log(ev)
            },
            fn5: function (arg, ev) {
                console.log(arg)
                console.log(ev)
            },
        }
    })
</script>

表單指令

<body>
    <div id="app">
        <!-- v-model = "變量" 本質操做的就是表單元素的value -->
        <!--v-model就是完成數據的雙向綁定-->
        <form action="">
            <input type="text" v-model="info"> <!-- info變量就是表明輸入框的value -->
            <input type="text" v-model="info">

        </form>
        <p> {{ info }} </p>
        <!--v-once只會被賦值一次,就再也不改變,而且要結合插值表達式使用-->
        <p v-once="info">{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
        // info: "初始value",
            info: ""
        },
    })
</script>

1. vue基礎---介紹
2. vue指令系統介紹
3. Vue基礎指令
4. electron-vue 介紹以及基礎使用
5. Vue基礎及指令總結
6. CMakeLists.txt基本指令介紹
7. Hadoop核心HDFS介紹以及基礎指令
8. Vue基礎語法介紹
9. Vue基礎-框架介紹
10. Vue基礎語法指令
更多相關文章...
• Spring目錄結構和基礎JAR包介紹 - Spring教程
• Kotlin 基礎語法 - Kotlin 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。