vue指令

時間 2020-02-12

標籤 vue 指令简体版

原文原文鏈接

目錄javascript

vue指令

vue指令

基礎指令

1）v-text：基本同{{}}
    2）v-html：能夠解析html語法的內容
    3）v-on：
        v-on:事件="方法"   =>  系統傳參，只默認傳$event
        v-on:事件="方法($event, ...)"  => 徹底自定義傳參，能夠手動傳入$event

文本指令

* 1) v-* 是vue指令，會被vue解析，v-text="num"中的num是變量（指令是有限的，不能夠自定義）
* 2）v-text:是原樣輸出渲染內容，渲染控制的標籤自身內容會被替換掉（<p v-text="num">123</p>會被num替換）
* 3）v-html:能夠解析渲染html語法的內容
* 4) v-once:控制的標籤只能被賦值一次

<div id="app">
    <!-- 插值表達式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本會被msg替換 -->
    <p v-text='msg'>原文本</p>
    <!-- 能夠解析帶html標籤的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的標籤只能被賦值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
    // 指令: 出如今html標籤中能夠被vue解析處理的全局屬性
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

斗篷指令

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
<!-- 避免頁面閃爍-->

屬性指令

<!-- 給自定義全局屬性綁定變量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式綁定全局屬性 -->
<p v-bind:title="'abc'"></p>

<!-- 單類名綁定 -->
<p v-bind:class="c1"></p>
<!-- 多類名綁定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 類名狀態綁定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多類名狀態綁定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 樣式綁定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        }
    })
</script>
<!-- v-bind: 指令能夠簡寫爲 : -->

事件指令

<!-- v-on: 指令 簡寫 @ -->
<!-- 不傳參事件綁定，但事件回調方法能夠獲取事件對象 -->
<p @click="fn"></p>
<!-- ()能夠傳入具體實參 -->
<p @click="fn()"></p>
<!-- ()狀況下，事件對象應該顯式傳入 -->
<p @click="fn($event)"></p>

"""
/**
 * 1、數據驅動
 *  1）操做是一個功能，使用須要一個方法來控制 2）方法名是變量，因此控制變量就能夠控制該方法
 *
 *
 * 2、事件指令
 *  1）在實例成員methods中聲明事件方法
 *  2）標籤經過事件指令綁定聲明的方法： v-on:事件名="事件方法名"
 *      eg: <button v-on:click="btnClick">按鈕</button>
 *  3）標籤經過事件指令綁定聲明的方法，且自定義傳參： v-on:事件名="事件方法名()"
 *      eg: <button v-on:click="btnClick()">按鈕</button>  不傳任何參數
 *      eg: <button v-on:click="btnClick($event)">按鈕</button>  傳入事件對象，同不寫()
 *      eg: <button v-on:click="btnClick(10)">按鈕</button>  只傳入自定義參數，固然也能夠傳入事件對象
 */
"""

<body>
    <div id="app">
        <button v-on:click="btnClick">{{ btn1 }}</button>

        <button v-on:click="btnClick">{{ btn2 }}</button>
        <hr>

        <!-- 直接綁定事件名：系統會在觸發事件時(點擊時)調用事件方法(fn1)，傳給事件方法一個參數(事件對象) -->
        <button v-on:click="fn1">按鈕3</button>

        <!-- 綁定的事件名後跟着()，不是主動調用事件方法，而是表示在觸發事件調用時，傳入的參數全由用戶本身決定 -->
        <button v-on:click="fn2($event, 10, 20)">按鈕4</button>

        <hr>
        <button v-on:click="fn(btn1)">{{ btn1 }}</button>

        <button v-on:click="fn(btn2)">{{ btn2 }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 對比DOM驅動：1）js選擇器獲取目標標籤 2）爲目標標籤綁定事件 3）在事件中完成相應邏輯
    // var btn = document.getElementsByTagName('button')[0];
    // btn.onclick = function () {
    //     console.log(111111111111);
    // };
    new Vue({
        el: '#app',
        data: {
            btn1: '按鈕1',
            btn2: '按鈕2',
        },
        methods: {
            btnClick () {
                console.log(666)
            },
            fn1 (ev) {
               console.log(ev.clientX, ev.clientY);
            },
            fn2(ev, n1, n2) {
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg) {
                console.log(msg);
            }
        }
    })
</script>

JS對象補充

1.普通對象與對象簡寫css

// 1）js沒有字典類型，只有對象類型，對象能夠徹底替代字典來使用
// 2）js中對象的屬性名，都採用字符串類型，因此就能夠省略字符串的引號標識
// 3）對象中屬性值爲函數時，稱之爲方法，方法建議簡寫: 方法名(){}
// 4）若是對象的屬性值是一個變量，且變量名與屬性名相同，還能夠簡寫：{屬性,}
var dic_obj = {
    // 屬性：值（數值，函數）
    'name': 'Bob',
    'eat': function () {
        console.log('在吃飯')
    }
};

console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();

// 屬性省略引號，方法簡寫
var obj = {
    name: 'Tom',
    eat () {
        console.log('在吃飯...')
    }
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()

// 屬性變量簡寫
var height = 180;
var p = {
    height,
    name: 'Jerry',
    eat() {}
};
console.log(p.name, p.height);

2.第一種類（瞭解）html

// 第一種聲明類的方法
    class People {
        constructor (name) {
            this.name = name
        }
        eat () {
            console.log(this.name + '在吃飯')
        }
    }
    let p1 = new People('Bob');
    let p2 = new People('Tom');
    console.log(p1.name, p2.name);
    p1.eat();

第二種類（瞭解）vue

// 第二種聲明類的方法(難點)：在函數內部出現了this語法，該函數就是類，不然就是普通函數
function Teacher(name) {
    this.name = name;
    this.eat =function () {
        console.log(this.name + '在吃飯')
    }
}
let t1 = new Teacher('Owen');
t1.eat();

類屬性java

// 類屬性：給類屬性賦值，全部對象都能訪問
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();

// 賦值類屬性
Fn.prototype.num = 100;

console.log(f1.num);
console.log(f2.num);

// 相似於單例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

js函數補充python

// 1）函數的形參與調用時傳入的實參關係（你傳你的，我收個人）
//      傳入和接受的參數個數不須要一致
//      可是必定按位進行賦值（沒有關鍵字參數）
//      沒有接收的實參會被遺棄，沒有被賦值的形參會被賦值爲undefined
function fn1(a, b) {
    console.log(a, b);
    return a + b;
}

let res = fn1(10, 20, 30);
console.log(res);

// 2）函數定義的演變
let fn2 = function (a, b) {
    return a + b;
};

// 省略關鍵字的箭頭函數
let fn3 = (a, b) => {
    return a + b;
};

// 沒有函數體，只有返回值的函數，能夠省略做用域{}，因爲只有返回值，因此return也省略
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));

// 若是形參只有一個時，聲明參數的()也能夠省略
let fn5 = num => num * num;
console.log(fn5(3));

// 弱語言
console.log(10 + '5');
console.log(10 - '5');
console.log(+'55555');

相關標籤/搜索

每日一句

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