vue基础

一、事件
事件对象： @click=show($event)
事件冒泡：
阻止冒泡:
1)ev.cancelBubble=true;
2)@click.stop 推荐

默认行为（默认事件）：鼠标左键或者右键的行为
阻止默认行为：
1）ev.preventDefault();
2)@contextmenu.prevent="函数名" 推荐

键盘事件：
keydown:
ev.keyCode 获取按下的键码，如回车键：13
keyup:

ev.keyCode 获取按下的键码，如回车键：13
@keyup.13 = "show" //直接锁定键码13或者
@keyup.enter = "show"

常用键码：
回车： 1)@keyup.13 = "show"
2)@keyup.enter = "show"

上下左右:
@keydown/@keyup.up
@keydown/@keyup.down
@keydown/@keyup.left
@keydown/@keyup.right

 

二、属性

1、v-bind:绑定属性名

eg.<img v-bind:src="imgUrl" alt=""/> 没有双括号的，否则没有效果

等同于<img :src="imgUrl" alt=""/>

2、特殊属性：

1）:class属性用法
a.以数组的身份来用
.red{color:red;}
.blue{color:blue;}
绑定：
data: {
reds:'red'
}
使用： <strong :class="reds">文本</strong>或<strong :class="[red]">文本</strong>

<strong :class="[reds,b,c,d....]">文本</strong>使用多个类往后添加即可。

<em :class="{red:false,blue:true}">两个类只作用一个</em>
注：在这里的red和blue都是类名不是变量

c.封装成json数据来使用
data:{
json:{
red:true,
blue:false
}
}
<b :class="json">这是使用的json数据封装的效果</b>

 

2）:style使用

a. <b :style="{color:'blue'}">json方式，直接写</b>

b.
data: {
r:{color:'red'}
}
<em :style="[r]">数组方式</em>

 

c.json数据格式使用
json:{
color:'red',
backgroundColor:'gray'
}

<p :style="json">json格式使用style</p>

三、模板
数据更新模板变化：{{message}}

数据只绑定一次： {{*message}} *貌似不管用！

html转义输出？ {{{message}}} 有问题