Vue框架的介紹與簡單使用

時間 2019-11-24

標籤 vue 框架介紹簡單使用简体版

原文原文鏈接

目錄javascript

Vue

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

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

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

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

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

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

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

vue的引入

本地的引入

在body和html之間webpack

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

CDN的引入

對於製做原型或學習，你能夠這樣使用最新版本：css3

<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

"""
一、html、css、js直接開發項目，項目雜亂，不方便管理，要纔有前端框架進行開發，規範項目
二、Angular、React、Vue三個前端框架，吸收前兩個框架的全部優勢，摒棄缺點，一手文檔是中文
三、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(){} }

文本指令

插值表達式

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

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

二、v-text：將全部內容作文本渲染

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

三、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)

知識點總結

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

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

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

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

五、v-on指令能夠給標籤綁定事件，事件函數由實例成員 methods 來提供

六、插值表達式{{ 變量 | 過濾器 }}的過濾器由實例成員 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}
        }
    })

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

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

九、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定義參數)"
    @click="fn"  |  @click="fn()"  |  @click="fn(10， 20)"  |  @click="fn($event, 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'

參考