Vue框架的介紹與簡單使用

本文轉載自查看原文 2019-11-11 22:58 674 前端

Vue
vue的引入
Vue基礎
- 漸進式 JavaScript 框架
走進Vue
使用框架開展一個項目的時候，需要考慮哪些方面？
多頁面應用和單頁面應用
Vue基本演示
vue掛載點
vue變量
vue實例變量（創建實例）
vue事件
- methods事件
js對象
- 定義類
文本指令
- 插值表達式
過濾器
- 過濾器串聯（多層過濾器）
事件指令
屬性指令
實戰演練
知識點總結

Vue

vue官網：https://vuejs.org/

github：https://github.com/vuejs/vue

學習網站：https://www.runoob.com/vue2/vue-tutorial.html

官方文檔：http://vuejs.org/v2/guide/syntax.html

中文文檔: https://cn.vuejs.org/v2/guide/syntax.html

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 入門教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

vue的引入

本地的引入

在body和html之間

</body>
	<script src="vuejs/vue.js"></script>
</html>

CDN的引入

對於制作原型或學習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對於生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

npm install vue

構建工具 (CLI)

npm install -g @vue/cli
vue create my-project

Vue基礎

漸進式 JavaScript 框架

通過對框架的了解與運用程度，來決定其在整個項目中的應用范圍，最終可以獨立以框架方式完成整個web前端項目

走進Vue

what -- 什么是Vue

可以獨立完成前后端分離式web項目的JavaScript框架
vue框架：漸進式JavaScript框架
vue一個環境：可以只控制頁面中一個標簽、可以控制一組標簽、可以控制整個頁面、可以控制整個項目
vue可以根據實際需求，選擇控制前端項目的區域范圍

定義

Vue 是一套用於構建用戶界面的漸進式框架
使用Vue框架，可以完全在瀏覽器端渲染頁面，服務端只提供數據
使用Vue框架可以非常方便的構建單頁面應用 (SPA)

為什么學習vue

"""
1、html、css、js直接開發項目，項目雜亂，不方便管理，要才有前端框架進行開發，規范項目
2、Angular、React、Vue三個前端框架，吸取前兩個框架的所有優點，摒棄缺點，一手文檔是中文
3、Vue框架優點：
	輕量級
	數據驅動
	數據的雙向綁定
	虛擬DOM（嵌套頁面架構的緩存）
	組件化開發
	由全球社區維護
	
	單頁面應用、MVVM設計模式
"""
總結：
三大主流框架之一：Angular React Vue
先進的前端設計模式：MVM
可以完全脫離服務器端，以前端代碼復用的方式渲染整個頁面：組件化開發

special--Vue的優點

不存在依賴
輕量級（25k min）
數據驅動
數據的雙向綁定
虛擬DOM（嵌套頁面架構的緩存）
組件化開發
由全球社區維護
適用范圍廣(大中小型項目、PC、移動端、混合開發)
本土框架,社區非常活躍
語法簡單、學習成本低
雙向數據綁定（所見即所得）
單頁面web應用

前端框架

三足鼎立

React
Angular
Vue

Angular、Vue、React的區別

Vue與React

React與Vue 都采用虛擬DOM
核心功能都在核心庫中，其他類似路由這樣的功能則由其他庫進行處理
React的生態系統更龐大，由ReactNative來進行混合App開發; Vue更輕量
React由獨特的JSX語法; Vue是基於傳統的Web計數進行擴展(HTML、CSS、JavaScript)，更容易學習

Vue與Angular

Angular1和Angular2以后的版本是完全不同的兩個框架；一般Angular1被稱作Angular.js, Angular之后的版本被稱作 Angular
Vue與Angular的語法非常相似
Vue沒有像Angular一樣深入開發，只保證了基本功能。 Angular過於笨重
Vue的運行速度比Angular快得多
Angular的臟檢查機制帶來諸多性能問題

MVM

Model
View
ViewModel

使用框架開展一個項目的時候，需要考慮哪些方面？

1.性能

如果一個網站在性能方面存在問題，它將會損失超過一半以上的用戶。

對於框架性能，你可以在網上查詢到各類測試，你可以了解框架的代碼結構、邏輯處理，判斷是否能夠滿足你對性能的需求。

2.擴展性

對於一個需要長期維護的項目而言，經常會有各種各樣的功能添加進來，這時擴展性就顯得尤為重要，如果你在前期選擇了一款滿足前期的框架，但后期你需要使用某個插件來完成某個功能，或者基於什么完成一個功能，這時候你發現網上並沒有檢索到相關內容，內心是否充滿了心塞。

3.維護性

一個項目的生命周期不是三天兩天，而前端的發展則是爆炸式的。在你選擇框架的時候是否考慮過官方在后續的一段時間是否會一直對框架進行更新維護？如果不確定，是否已經有了官方放棄維護后的解決方案？

4.兼容性

這里的兼容性指的不是瀏覽器兼容，而是框架與其他框架及工具的兼容，使用這個框架對於你的開發環境是否有影響，對於你的開發 IDE 是否有影響。

Vue.js 適用具有以下性質的項目：

對瀏覽器兼容要求不高，不需要兼容至IE6-8；
SPA開發；
對性能較高要求;
組件化。

總的來說，如果你是一個 MVVM 框架新手，那么 Vue.js 就是你最好的進階工具，如果你是一個已經掌握了其他 MVVM 框架的老手，那你會發現 Vue.js 更加簡單輕便。

多頁面應用和單頁面應用

多頁面應用（MultiPage Application，MPA）

多頁面跳轉刷新所有資源，每個公共資源(js、css等)需選擇性重新加載，常用於 app 或客戶端等

單頁面應用（SinglePage Web Application，SPA）

只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源，公共資源(js、css等)僅需加載一次，常用於PC端官網、購物等網站

兩者對比

	單頁面應用	多頁面應用
組成	一個外殼頁面和多個頁面片段組成	多個完整頁面構成
資源公用(css,js)	共用，只需在外殼部分加載	不共用，每個頁面都需要加載
刷新方式	頁面局部刷新或更改	整頁刷新
url 模式	a.com/#/pagetwo a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用戶體驗	頁面片段間的切換快，用戶體驗良好	頁面切換加載緩慢，流暢度不夠，用戶體驗比較差
轉場動畫	容易實現	無法實現
數據傳遞	容易	依賴 url傳參、或者cookie 、localStorage等
搜索引擎優化(SEO)	需要單獨方案、實現較為困難、適用於追求高度支持搜索引擎的應用	實現方法簡易
試用范圍	高要求的體驗度、追求界面流暢的應用	適用於追求高度支持搜索引擎的應用
開發成本	較高，常需借助專業的框架	較低，但頁面重復代碼多
維護成本	相對容易	相對復雜

Vue基本演示

vue掛載點

<div class="" id="app">{{ }}</div>

<script>
    // console.log(Vue);
    new Vue({
        el: "#app",
    })


</script>

el為掛載點，建立關聯后控制頁面標簽，就是vue與頁面的關聯
采有css3選擇器語法與頁面標簽進行綁定，決定該vue對象控制的頁面范圍
掛載點只檢索頁面中第一個匹配到的結果，所以掛載點一般都才有id選擇器
html與body標簽不可以作為掛載點（組件中解釋）
被渲染的內容一般都放在父標簽下面，並且父標簽為掛載點
當div作為掛載點的時候，里面的所有的標簽都可以被渲染
可以創建多個

vue變量

頁面中可以出現多個實例，並且可以進行交互
實例成員中的data是為vue頁面模板通過數據變量的

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ info }}</p>

</div>

<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "message",
            info: "vue變量信息"
        }

    });
</script>

vue實例變量（創建實例）

創建vue實例（new Vue）傳進去的字典(對象)的key，稱之為vue實例成員(變量)
給vue命名 let
訪問vue成員，用.點

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ info }}</p>

</div>

let app=new Vue({
        el: '#app',
        data: {
            msg: "message",
            info: "vue變量信息"
        }

    });

console.log(app.info);
console.log(main.info)

訪問實例成員，用 vue實例.$成員名, eg：app.$el

console.log(app.$el);
console.log(app.$data);
console.log(app.$data.info);
console.log(app.info);

vue事件

<div id="app">
    <p class="p1" v-on:click="fn">這是一個段落，被點擊了{{ count }}下</p>

</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
 let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            fn: function () {
                console.log(app.count);
                app.count ++ ;
                console.log(this)//this不是該vue實例對象，是頂級Window對象，並不是指當前對象


            }

        }
    })
</script>

methods事件

就是為vue實例提供事件函數的

<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            },
            methods:{
                fn:function () {
                    this.count ++// this代表當前該vue實例對象

                }
            }
    },

    );
</script>

<div id="app">
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >該便簽被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>

let app = new Vue({
        el: '#app',
        action: '渲染',
        data: {
            count: 0,
        },
        methods: {
            fn: function () {
                this.count++// this代表當前該vue實例對象
                

            },
            overAction: function () {
                this.action = '懸浮'
            },
			outAction: function () {
                this.action = '離開'
            }
        }
    });

js對象

js中沒有字典，只要對象類型，可以把對象當做字典來使用
key本質是屬性名，所以都是字符串類型（可以出現1，true），其實都是省略引號的字符串

<script>
    let sex='男';
    let hobby='籃球';
    let dic={
        'name':'Ocean',
        1:100,
        true:12345,
        age:18,
        sex:sex,
        hobby,//相同的時候是可以省略一個的

    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic[1]);
    console.log(dic['age']);
    console.log(dic['hobby']);
    console.log(dic['sex']);
    console.log(dic.sex);   
</script>

 dic.price=3.5;
console.log(dic.price);
console.log(dic['proce']);//不能這樣調用

定義類

聲明類創建對象，類可以實例化n個對象，哪個對象調用，this就代表誰
<script>
    function People(name,age) {
        this.name=name;
        this.age=age;
        this.eat=function () {
            console.log(this.name+'正在開炮');
            return 123

        }

    }
let p1 = new People('ocean',18);
console.log(p1.name);
let res=p1.eat();
console.log(res);
</script>

直接聲明對象，{}內的key都屬於當前對象的

{}中的方法通常會簡寫

let stu1={
        name:'張三',
        age:18,
     // eat: function () {
        //     console.log(this.name + '在吃飯');
        eat(){
            console.log(this.name+"打炮中")
        }
    };
    stu1.eat()

總結
1.{}中直接寫一個變量：key與value是同名，value有該名變量提供值
2.es5下，所有的函數都可以作為類，類可以new聲明對象，在函數中用 this.資源為聲明的對象提供資源
3.{}中出現的函數叫方法，方法可以簡寫 { fn: function(){} } => { fn(){} }

文本指令

插值表達式

1、插值表達式，能完成變量渲染，變量基礎運算，變量方法調用，不能完成復雜運算(一步解決不了的，不能出現；)

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ msg + '拼接內容' }}</p>//字符串拼接
    <p>{{ msg[1] }}</p>//字符串索引取值
    <p>{{ msg.slice(2,4) }}</p>//字符串切片
    <hr>
</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'文本信息'
        }
    })
</script>

2、v-text：將所有內容做文本渲染

<p v-text="msg + '拼接內容'"></p>

3、v-html：可以解析html語法標簽的文本，字符串拼接的時候出現字符串的時候方便使用

<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>


<p v-text="`<b>${msg}</b>`"></p>
<p v-html="`<b>${msg}</b>`"></p>

過濾器

在傳值的時候是各不干擾，個傳個的

<div id="app">
    <!-- 默認將msg作為參數傳給filterFn -->
    <p>{{ msg | filterFn }}</p>

</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"文本內容",
            num:1
        },
        filters:{
            filterFn(v1){
                console.log(v1);
                return `<b>${v1}</b>`;
            },
        }
    })

過濾器串聯（多層過濾器）

<p>{{ num | f1 | f2 }}</p>//可以多層過濾

new Vue({
        el: '#app',
        data: {
            msg: '文本內容',
            num: 1
        },
        filters: {
            f1(v1) {
                return v1 * 100;
            },
            f2(v1) {
                return v1 * 100;
            }
        }
    })

可以同時對多個變量進行過濾，變量用，分割，過濾器還可以額外傳入參數輔助過濾
過濾器方法接收所有傳入的參數，按傳入的位置進行接收

 <p>{{ msg, num | f3(666, '好的') }}</p>

filters: {
            f3(v1, v2, v3, v4) {
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            }
        }

事件指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--事件指令：v-on:事件名="事件函數"  -->
        <!--簡寫：@事件名="事件函數"  -->
        <p v-on:click="f1">被點擊了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <hr>
        <!--綁定的事件函數可以添加()，添加括號就代表要傳遞參數-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        <ul>
            <li @click="f4(0)">{{ arr[0] }}</li>
            <li @click="f4(1)">{{ arr[1] }}</li>
            <li @click="f4(2)">{{ arr[2] }}</li>
        </ul>
        <hr>
        <!--綁定的事件函數如果沒有傳遞參數，默認傳入 事件對象 -->
        <div class="box" @click="f5"></div>
        <hr>
        <!--事件函數一旦添加傳參()，系統就不再傳遞任何參數，需要事件對象時，可以手動傳入 $event -->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            p2: '第二個p',
            arr: [1, 2, 3],
        },
        methods: {
            f1() {
                this.count ++
            },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num);
            },
            f4(index) {
                console.log(this.arr[index]);
            },
            f5(ev, b) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },
    })

</script>
</html>

屬性指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>屬性指令</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div標簽的屬性，屬性指令就是控制它們的-->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
        <!--2.屬性指令：v-bind:屬性名="變量"，簡寫方式 :屬性名="變量" -->

        <!--3.屬性指令操作 style 屬性-->
        <div style="width: 200px;height: 200px;background-color: greenyellow"></div>
        <!-- 通常：變量值為字典 -->
        <div :style="mys1"></div>
        <!-- 了解：{中可以用多個變量控制多個屬性細節} -->
        <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>


        <!--重點：一般vue都是結合原生css來完成樣式控制 -->
        <!--<div :class="c1"></div>-->

        <!--class可以寫兩份，一份寫死，一份有vue控制-->
        <div class="box1" :class="c2"></div>

        <!--{}控制類名，key為類名，key對應的值為bool類型，決定該類名是否起作用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>


        <!--[]控制多個類名-->
        <div :class="[c3, c4]"></div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    });

    setInterval(function () {
        // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
        if (app.c1 === 'box1') {
            app.c1 = 'box2';
        } else {
            app.c1 = 'box1';
        }
    }, 300)


</script>
</html>

實戰演練

有紅、黃、藍三個按鈕，以及一個200x200矩形框box，點擊不同的按鈕，box的顏色會被切換為指定的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <div :style="box"></div>
    <hr>
    <button @click="b1">按鈕1</button>
    <button @click="b2">按鈕2</button>
    <button @click="b3">按鈕3</button>
</div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    let app = new Vue({
        el: "#box",
        data: {
            box: {
                width: "200px",
                height: "200px",
                backgroundColor: "red"
            }
        },
        methods: {
            b1(v1, v2) {
                app.box = {
                    width: "200px",
                    height: "200px",
                    backgroundColor: "black"
                }
            },

            b2(v1, v2) {
                app.box = {
                    width: "200px",
                    height: "200px",
                    backgroundColor: "yellow"
                }
            },
            b3(v1, v2) {
                app.box = {
                    width: "200px",
                    height: "200px",
                    backgroundColor: "blue"
                }

            }

        }
    })

</script>
</html>

有一個200x200矩形框wrap，點擊wrap本身，記錄點擊次數，如果是1次wrap為pink色，2次wrap為green色，3次wrap為cyan色，4次重新回到pink色，依次類推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" :style="dic1" @click="fn">{{ count }}</div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            count: 0,
            dic1: {
                width: "200px",
                height: "200px",
                backgroundColor: "red"
            },
            arr: ['red', 'green', 'cyan']

        },
        methods: {
            fn() {
                app.count++;
                let n = this.count % 3;
                this.dic1.backgroundColor = this.arr[n]

            }
        }

    })
</script>
</html>

如圖：圖形初始左紅右綠，點擊一下后變成上紅下綠，再點擊變成右紅左綠，再點擊變成下紅上綠，依次類推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px #0f0f0f solid;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .b1 {
            background-color: red;
            position: absolute;
        }

        .b2 {
            background-color: green;
            position: absolute;
        }

        .left {
            width: 100px;
            height: 200px;
            float: left;
            left: 0;

        }

        .right {
            width: 100px;
            height: 200px;
            float: left;
            right: 0;
        }

        .top {
            width: 200px;
            height: 100px;
            top: 0;

        }

        .bottom {
            width: 200px;
            height: 100px;
            bottom: 0;

        }

    </style>
</head>
<body>
<div id="app">
    <div class="box" @click="clickAction">
        <div class="b1 " :class="c1"></div>
        <div class="b2" :class="c2"></div>
    </div>
</div>

</body>
<script src="vuejs/vue.min.js"></script>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            count:1,
            c1:'left',
            c2:'right',
            c1Arr:['left','top','right','bottom'],
            c2Arr: ['right','bottom','left','top']
        },
        methods:{
            clickAction(){
                let n = this.count ++;
                this.c1 = this.c1Arr[n % 4];
                this.c2 = this.c2Arr[n % 4]
            }
        }
    })
</script>
</html>

可以將圖編程自動旋轉

基於第三題的編輯

利用時鍾定時器進行編輯

方法1

 setInterval(function () {
        let n = app.count++;
        app.c1 = app.c1Arr[n % 4];
        app.c2 = app.c2Arr[n % 4]

    }, 500)

方法2

setInterval(function () {
        app.clickAction();

    },500)

知識點總結

1、在html頁面中用script標簽導入vue環境
	<script src="js/vue.js"></script>

2、new Vue({ el: "#app" })掛載頁面標簽，建立關聯后控制頁面標簽
	掛載點才有css3選擇器語法
	掛載點就是vue與頁面的關聯
	掛載點只檢索第一個匹配結果

3、插值表達式{{ }}可以完成基礎運算
	num | num + 10 | str.split() + "拼接"

4、插值表達式中的變量有實例成員 data 來提供
	<p id="app">{{ msg }}</P>
	let msg = '12345'
	new Vue({
		el: "#app",
		data: {
			msg,
		}
	})

5、v-on指令可以給標簽綁定事件，事件函數由實例成員 methods 來提供

6、插值表達式{{ 變量 | 過濾器 }}的過濾器由實例成員 filters 來提供
	<p id="app" @click="fn">{{ msg | f1(1), 10 | f2(100, 200) }}</P>
	let msg = '12345'
	new Vue({
		el: "#app",
		data: {
			msg,
		},
		methods: {
			fn(){}
		},
		filters: {
			f1(v1,v2){return v1+v2},
			f2(v1,v2,v3,v4){return v1+v2+v3+v4}
		}
	})

7、面向對象js： { 變量, } | function Fn(值){ this.屬性 = 值 } | obj = { 方法(){} }
	function Fn(v1, v2){
		this.n1 = v1;
		this.n2 = v2;
	}
	let f1 = new Fn(10, 20);
	f1.n1

8、文本指令：{{ }} | v-text=""  | v-html=""

9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定義參數)"
	@click="fn"  |  @click="fn()"  |  @click="fn(10， 20)"  |  @click="fn($event, 10)"

10、屬性指令：v-bind:屬性名="" | :title="變量" | :style="字段變量" | 
			:class="變量" | :class="[變量1, 變量2]" | :class="{類1:真假, 類2:真假}"
	:title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" | 
	:class="{box: true|false}"
	
	var2 = 'box' | var2 = 'box circle'

參考

百科介紹： https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin
微博： https://weibo.com/arttechdesign?is_hot=1#1528176039582

免責聲明！

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

猜您在找 Vue框架的介紹及使用 spring框架介紹以及簡單使用 Vue框架簡介及簡單使用 Django REST Framework框架介紹以及簡單使用 vue3框架：vite簡單使用框架之Tornado（簡單介紹） Fitnesse框架簡單介紹 ReactiveObjC框架的簡單介紹 iOS開發網絡篇—簡單介紹ASI框架的使用 vue框架的介紹