Javascript - Vue - 指令

时间 2019-11-18

原文原文链接

指令

v-cloak 无闪烁javascript

解决闪烁，闪烁是指在网速较慢的状况下可能会出现插值表达式{{}}尚未填充数据时会把该表达式直接显示在页面上，若是不但愿看到插值表达式则可使用v-cloak指令，具体作法以下html

v-text 插值vue

无闪烁问题，也即不须要使用插值表达式，它会在加载完成后自动插入纯文本的数据，与v-cloak的区别在于v-text无闪烁且会替换元素内包含的全部内容，而v-cloak只替换插值表达式内额内容，插值表达式先后若是有内容，这些内容不会被替换。若是你不须要在插入的数据先后放其它静态的内容，那么使用v-text比较方便，不然使用v-cloak。java

v-html 插值node

无闪烁问题，也即不须要使用插值表达式，它会在加载完成后自动插入html数据，v-text只能插入文本，若是放入html则会当成文本插入，v-html能够渲染htmlchrome

v-bind 属性值绑定express

专门向html元素的属性插入数据。
数组

<div id="app" v-cloak>
    <button v-bind:title="msg">你好</button> //鼠标放上去会显示hello，该指令也能够简写为一个冒号便可，如:title="msg"
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        }
    });
</script>

v-bind：筛选属性值浏览器

能够在[]括号里写三元运算符来筛选属性值，也能够在[]括号里直接使用{}括号，在{}里写属性名:属性值来筛选属性值app

div {
    height: 10px;
}

.bg1 {
    background: black;
}

.bg2 {
    background: red;
}
<div id="box">
    <div :class="['bg1',flag?'bg2':'' ]"></div>//用三元运算符筛选类名
    <div :class="['bg1',{bg2:flag} ]"></div> //用三元三元运算符筛选类名简写
    <div :class="{bg1:false,bg2:flag}"></div>//用匿名对象筛选类名
    <div :class="classArray"></div>//用匿名对象筛选类名
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            flag: true,
            classArray: { bg1: true, bg2: false }
        }
    });
</script>

设置内联样式

<body>
<div id="box">
    <div :style="{'font-size':'80px',color:'red','font-style':'italic'}">hello</div>
    <div :style="[style1,style2]">world</div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            style1: { 'font-size': '80px', color: 'red' },
            style2:{'font-style':'italic'}
        }
    });
</script>

v-if、v-else 条件判断

根据布尔值来选择是否执行使用了v-if的html元素，好比能够利用v-if实现根据布尔值切换显示或隐藏html元素，隐藏时是直接移除该元素，显示时会从新渲染该元素。能够利用v-if来实现tab项，根据按钮的主题来切换显示某个区域，但只能切换两个tab项，没法实现两个以上tab项的切换。

<div id="box">
<div v-if="flag">寒</div> flag为false，则执行v-else
<div v-else="flag">食</div>
</div>

v-for 循环

循环,使用v-for的html元素会根据计数器或对象的属性个数、数组的元素个数自动输出N个html元素

<div id="box">
   <p v-for="i in 10">循环第{{i}}次</p> //循环数字输出10个p标签
   <p v-for="(item,index) in list">循环索引：{{index}}，元素：{{item}}</p> //遍历数组输出数组元素总个数的p标签
    <p v-for="(obj,index) in objList">循环索引：{{index}}，编号：{{obj.id}}，名字:{{obj.name}}</p>//遍历数组里的对象输出数组里的对象总个数的p标签
    <p v-for="(keyVal,key,index) in obj">循环索引：{{index}}，键：{{key}}，值：{{keyVal}}</p>//遍历对象属性输出对象的属性总个数的p标签
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            list: [1, 2, 3, 4, 5],
            objList: [
                { id: 1, name: "sam" },
                { id: 2, name: "leo" },
                { id: 3, name: "korn" },
            ],
            obj:{
                id:1,
                name:"tim",
                age:20
            }
        }
    });
</script>

循环时的注意

当你向一个复选组添加新项时会遇到下面的状况，假设你选中的项是索引0，此时你再往复选组添加新项后，选中的项虽然仍是索引0，但由于添加的新项显示在复选组元素的最前面，这直接致使添加后多出一个复选框，因此索引为0的位置的选中项变成了新添加的项。

<div id="box">
    <input type="text" v-model="name" />
    <button v-on:click="add">add</button>
    <p v-for="item in objList">
        <input type="checkbox" :id="item.id" />{{item.name}}
    </p>
</div>
    var vm = new Vue({
        el: "#box",
        data: {
            name:"",
            objList: [
                { id: 1, name: "sam" },
                { id: 2, name: "leo" },
                { id: 3, name: "korn" },
            ]
        },
        methods: {
            add: function () {
                this.objList.unshift({ id: this.objList.length + 1, name: this.name });
            }
        }
    });

解决办法是指定须要循环的html元素的key，由于html只记录你选中项的索引，使用key能够改变记录目标为对象的id，以下：

v-show 显示或隐藏

根据布尔值切换显示或隐藏，隐藏时是设置该元素的diaplay:none，显示时切换该元素的diaplay。性能消耗<v-if。

<div id="box">
<button @click="flag=!flag">hideOrVisible</button>
<p v-show="flag">hello world</p>
</div>

var vm = new Vue({
     el: "#box",
     data: {
         flag:true
     }
});

v-model 数据双向绑定

这个指令能够将数据绑定到输入类的html元素上，它能够将用户输入的数据存入v-model指定的变量中，这个指令会一直监视输入框值的变化，一旦变化发生，就会当即在vue对象内部进行数据同步

<div class="box">
   <h4>{{msg}}</h4>
    <input type="text" v-model="msg" />
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: ".box",
        data: {
            msg:"天下之大无奇不有"
        }
    });
</script>

v-on 事件

在vue中注册事件用v-on指令，v-on:可简化为@，dom元素的事件均可以使用这种格式，好比v-on:change或@change

click事件

<div id="app" v-on:click="show">
    {{msg}}
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            show: function () {
                alert("hello");
            }
        }
    });
</script>

change事件

var vm = new Vue({
    el: ".box",
    data: {
      v:0
    }
    methods: {
        select: function () {
            alert(this.v); //选中的值
        }
    }
});

一个跑马灯的效果

<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="start">start</button>
    <button v-on:click="end">end</button>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "天下之大无奇不有"
        },
        methods: {
            start: function () {
               var self = this;
               this.interval= setInterval(function () {
                    var s = self.msg.substring(0, 1);
                    var e = self.msg.substring(1);
                    self.msg = e + s;
                }, 400);
            },
            end: function () {
                clearInterval(this.interval);
            }
        }
    });

以上代码在连续点击屡次start后，点end就不能中止这个延时调用，由于内存中有了N个setInterval函数的执行。解决办法是判断setInterval的变量是否为null，只有为null时才执行，不然不执行。

事件修饰符（词缀）

事件修饰符的做用是对事件进行限制、修改事件的执行机制等

阻止当前事件向上冒泡 stop（vue事件的触发方式默认是事件冒泡）

阻止默认动做prevent（超连接、表单提交）

<a id="link" href="#" @:click.prevent="show1">click</a>

开启事件围捕capture（须要将指令写在祖先元素上）

阻止冒泡与捕获self

self表示不接受捕获或冒泡

<div class="grandfather">
    <div class="father" v-on:click.self="show2"> //只有点击我时才会触发事件，其它由冒泡或捕获的触发机制都不会触发个人事件
        <button v-on:click="show1">OK</button>
    </div>
</div>

事件只触发一次once

键盘事件keydown | keyup

<input type="text" class="form-control" v-model="obj.name" @keyup.enter="add"/> enter键抬起时触发

vue支持的按键别名只有如下几个，若是没有须要的按键，能够参考下面的键盘按键码

enter

tab

delete

esc

space

down

left

right

//js 里面的键盘事件常常用到，因此收集了键盘事件对应的键码来分享下：
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
//使用event对象的keyCode属性判断输入的键值
eg：if(event.keyCode==13)alert(“enter!”);
键值对应表
A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD
//若是要使用组合键，则能够判断是否同时按下了这几个键，好比ctrl键、shift键以及alt键的组合使用就能够判断是否多按下了ctrl键、shift键以及alt键

document.onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==27){ // 按 Esc
        //要作的事情
    }
    if(e && e.keyCode==113){ // 按 F2
        //要作的事情
    }
    if(e && e.keyCode==13){ // enter 键
        //要作的事情
    }
};
//只要你定义了这些键的动做，你在浏览器里按下这些键就会响应，兼容目前全部浏览器

键盘按键码

使用按键码

<input type="text" class="form-control" v-model="obj.name" @keyup.70="add"/> //按F键触发

还能够将按键码赋给vue

<input type="text" class="form-control" v-model="obj.name" @keyup.f="add"/>
Vue.config.keyCodes.f = 70;

总结：除了v-bind和v-on后面是跟：冒号之外，其它指令都是跟=符号。而事件修饰符是在事件名称后面跟.号。

指令中的变量与字符串

指令中的双引号里能够写vue中的数据变量、对象、函数，若是要拼接字符，字符必须使用单引号

自定义指令

vue的指令都是以v开头。你也能够自定义一些能简化dom操做的指令。

<input type="text" class="form-control" v-model="keyWords" v-focus/>
<input type="text" class="form-control" v-model="keyWords" v-color=" 'blue' "/>
Vue.directive("focus", {
    //当指令绑定到元素上的时候触发，只执行一次，这个事件发生在元素插入dom以前
    bind: function (el) {
    },
    //当元素插入到dom时触发
    inserted: function (el) {
        el.focus();
    },
    //当vue组件（vnode）发生更新时触发
    updated: function (el) {
    },
    componentUpdated: function () {
    },
    unbind: function (el) {
    }
});

//事件参数
//el：html元素对象
//binding：指令对象，
//binding的属性
//binding.value：指令=的值，如v-color=" 'blue' ", value返回‘blue’，如v-sum="1+1"，则value返回2
//binding.name：指令的名字，如v-color指令的名字是color（不包含v前缀）
//binding.expression：指令的原始表达式，如v-color=" 'blue' "，expression返回 " 'blue' "，如v-sum="1+1"，则expression返回"1+1"而不是2
//binding.arg：指令的额外参数，如v-color:alpha，arg返回"alpha"
Vue.directive("color", {
    bind: function (el,binding) {
        el.style.color = binding.value;
    }
});

私有自定义指令

在vue实例内部编写

directives: {
    "color": {
        bind: function (el, binding) {
            el.style.color = binding.value;
        }
    }
}

若是不指定事件名称，则默认是将你编写的代码设置到bind和updated事件中去。因此若是你须要同时在bind和updated上设置代码，则能够以下简写

Vue.directive("color", function (el,binding) {
el.style.color = binding.value;
});

directives: {
    "color": function (el, binding) {
            el.style.color = binding.value;
        }
}

Javascript - 学习总目录