** v-model 双向数据绑定 **
ref(https://www.cnblogs.com/goloving/p/9404099.html)
<input type="text" ref="name" @keyup="show"/>
console.log(this.$refs.name.value);//作用2：获取DOM元素
this.msg=this.$refs.name.value;
v-for 数组，对象，数值 最后一位是索引
<li v-for="(value,index) in arr">{{value}}---{{index}}</li>
<li v-for="(value,key,index) in obj">{{value}}--{{key}}----{{index}}</li>
<h1 v-for="i in 10">{{i}}</h1>
<template v-for="a in arr">
<h1>a</h1>
<a href="">a</a>
</template>
1.当在组件中使用** v-for 时，key 现在是必须的。**
2.当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。
如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，
并且确保它在特定索引下显示已被渲染过的每个元素。
3.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，
你需要为每项提供一个唯一key 属性。
v-bind 绑定属性
<a v-bind:href="ahref">baidu</a>
简写：baidu
:style="{width:length+'%','background-color':'#ccc'}"
:class="[aa,bb,cc]" 变量
:class="{aa:true,bb:true,cc:false}"
<img v-for="v in src" :src="'img/'+v"/>
**1样式的使用**
** ### 使用class样式**
** 1. 数组**
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
** 2. 数组中使用三元表达式**
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
**3\. 数组中嵌套对象**
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
** 4. 直接使用对象**
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
**### 使用内联样式**
注意：font-size这样的一定要加' '
1. 直接在元素上通过 :style 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
2. 将样式对象，定义到 data 中，并直接引用到 :style 中
** + 在data上定义样式：**
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
** + 在元素中，通过属性绑定的形式，将样式对象应用到元素中：**
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 :style 中通过数组，引用多个 data 上的样式对象
** + 在data上定义样式：**
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
** + 在元素中，通过属性绑定的形式，将样式对象应用到元素中：**
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
v-html 将含有标签的字符串转化成为标签
v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，
前后可以添加内容，会被覆盖
v-show 显示和隐藏（display:none;） true显示 false 隐藏 可以判断 可以赋值 <h3 v-show="a==baba">3333</h3>
**v-if 隐藏：不会渲染该标签 相当于js中的if **
** v-else**
** v-else-if**
<div v-if="num>=90">
优秀
</div>
<div v-else-if="num>=60">
良好
</div>
<div v-else>
不及格
</div>
v-once <p v-once>{{num}}</p> 不会跟着改变的值
v-cloak {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容
<h1 v-cloak>{{msg}}</h1>
<style>
[v-cloak]{
display:none;
}
</style>
**v-on 事件 **
<h1 v-on:click="show">{{msg}}</h1>
简写：
{{msg}}
取消右键菜单@contextmenu.prevent="down()"
事件修饰符：
** https://www.cnblogs.com/xuqp/p/9406971.html **
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，阻止事件默认行为
.capture：与事件冒泡的方向相反，事件捕获 由外到内(先触发)
.self：只会触发自己(内容文本)范围内的事件，不包含子元素(标签)，该冒泡还是要冒泡
.once：只会触发一次,相当于把自己绑定的事件删除
.passive 不阻止事件默认行为
@click.self.prevent 自己 取消默认行为
@click.prevent.self 所有取消默认行为 自己
按键修饰符：
** .enter：回车键**
.tab：制表键
** .delete：含delete和backspace键**
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
用按键修饰符
<input type="text" @keyup.down="showTwo()"/>
** 用keyCode**
** <input @keydown.67="show()" />可以直接写键盘码值**
** 或**
用自己的名称，替换可以keyCode
<input @keydown.c="show()" />
Vue.config.keyCodes.c = 67;
组合版（单按a,b，c）
<input type="text" @keyup.a.b.c="showa"/>
鼠标修饰符：
** .left：鼠标左键**
.middle：鼠标中间滚轮
.right：鼠标右键
右键单击不出菜单栏，出效果
<div class="one" @mousedown.right="show"></div>
<div class="one" @contextmenu.prevent="down()"></div>
修饰键：
** .ctrl .ctrl.67 67-->c**
.alt
.shift
.meta
<input @keydown.ctrl.67="ctr" />
** <input @keydown.ctrl="ctrs($event)" />**
注意：在Mac系统键盘上，meta对应命令键 (⌘)。
在Windows系统键盘meta对应windows徽标键(⊞)。
在Sun操作系统键盘上，meta对应实心宝石键 (◆)。
在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，
比如Knight键盘，space-cadet键盘，meta被标记为“META”。
在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
网友评论