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');