一、常用指令
1.什么是常用指令
用来扩展html标签的功能
2.vue中常用的指令
- v-mode
双向数据的绑定,一般用于表单元素 - v-for
对数组或对象进行循环操作 - v-on
用来把绑定事件,用法:v-on:事件名 = 函数 - v-show / v-if
用来显示或隐藏元素,v-show是通过display实现,v-if是每次都删掉元素再重新创建 - v-bind
用来给元素绑定行内样式:
普通方式:v-bind:href=“url”
简写方式::href=“url”>
字符串拼接::href="‘www.mermr.top’ + url"
二、事件和属性
1.事件
1.1事件简写
v-on:click=""
简写方式:@click=""
1.2获取事件对象:$event
包含事件相关信息,如事件源,事件类型,偏移量等等
target,type,offsetx ...
<a href="#" @click="fn($event)"></a>
js部分:function fn(e){
console.log(e.target)
}
1.3 事件冒泡:
阻止事件冒泡
1).原生js依赖于event对象,方法:event.stopPropagation();
2).vue不依赖event对象,直接在事件名后面加修饰符.stop
<a href="javascript:;" @click.stop="fn">
事件捕获:
事件捕获,先执行捕获的事件,再执行冒泡
<a href="javascript:;" @click.capture="fn">
忽略事件冒泡、捕获
关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用,因为它看起来 与.stop好像有一点像,但其实他们作用的对象不同。
1.4 事件默认行为
阻止默认行为
1).原生js依赖event对象,方法:event.preventDefault();
2).vue不依赖event对象,直接在事件名后面加修饰符:.prevent
<a href="javascript:;" @click.prevent="fn">
1.5 键盘事件
事件名:@keydown, @keypress, @keyup
1).原生js依赖event对象,需要判断event.keyCode
2).vue不依赖event对象,直接在事件名后面加(按回车为例):数字方式(.13),别名方式(.enter)
<a href="javascript:;" @keydown.13="fn">
<a href="javascript:;" @keydown.enter="fn">
3).默认没有@keydown.a/b/c/...事件,但是可以自定义键盘事件,也称为自定义键码或自定义键位别名;
例如:
<input type="text" @keydown.f1="show">
Vue.config.keyCodes = {
a:65,
f1:112
}
1.6 常用事件修饰符
.stop() // 阻止事件冒泡,调用原生的event.stopPropagation();
.prevent // 阻止默认事件,调用原生的event.preventDefault();
.once // 只触发一次事件
.native // 监听组件根元素的原生事件
.{keyCode | keyAlias} // 只当事件是从特定键触发时才触发回调
2.属性
2.1 属性绑定和属性的简写
v-bind: 可以绑定html中的行内属性
<img src="{{imgUrl}}" /> // 错误的做法
<img v-bind:src="imgUrl" /> // 可以直接访问到vue中的属性,不需要加 {{}} ;
v-bind:src="" 简写方式为 - :src
<img :src="imgUrl" />
2.2 class和style属性
绑定class和style属性时愈发比较复杂
1).class属性
------css部分------
.red{color:#f00;}
.bg{background-color:#ccc;}
------vue部分------
data:{
redSty:red,
bgSty:bg
}
方式1:变量形式 - <p :class="redSty">方式1:变量形式</p>
方式2:多个变量数组形式 - <p :class="[redSty, bgSty]">方式2:多个变量数组形式</p>
方式3:json方式 - <p :class="{red:true, bg:false}">方式3:json方式</p>
2).style属性
------vue部分------
data:{
styJson:{
color:"blue",
fontSize:"30px"
},
styJsonBg:{
backgroundColor:"red"
}
}
方式1:单个json方式 - <p :style="styJson">方式1:单个json方式</p>
方式2:多个json,数组传入方式 - <p :style="[styJson, styJsonBg]>方式2:多个json,数组传入方式</p>
三、模版
1.简介
vue.js使用基于HTML的模版语法,可以将DOM绑定到vue实例中的数据
模版就是:{{}},用来进行数据绑定,显示在页面中
也称为Mustache语法
2.数据绑定的方式
1).双向绑定
v-model + {{}}
2).单向绑定
方式1:使用两对大括号{{}},可能会出现闪烁的问题,可以使用v-cloak解决,需配合css样式一起使用
------css部分------
[v-cloak]{
display:none
}
------vue部分------
<p v-cloak>{{msg}}</p>
方式2:使用v-text 和 v-html
------vue部分------
data:{
msg:"哈哈<span>,呵呵</span>";
}
<p v-text=“msg”></p> // 输出:哈哈<span>,呵呵</span>
<p v-html=“msg”></p> // 输出:哈哈,呵呵
总结:v-text 无法识别字符串内 html标签
v-html 可以识别字符串内 html标签
3).其他绑定
msg:"这里是数据内容";
v-once // 数据只绑定一次, 写法:只需要把v-once写入标签内,数据还是用{{}}渲染
<p v-once>{{msg}}</p> // 输出:这里是数据内容
v-pre // 不编译,写入什么就显示什么
<p v-pre>{{msg}}</p> // 输出:{{msg}}