1、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;
2、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>
当在组件中使用 v-for 时，key 现在是必须的。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。 如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素， 并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素， 你需要为每项提供一个唯一 key 属性。
3、v-bind 绑定属性
<a v-bind:href="ahref">baidu</a>
简写：<a :href="ahref">baidu</a>
: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"/>
样式的使用
使用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这样的一定要加’’
直接在元素上通过 :style 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
将样式对象，定义到 data 中，并直接引用到 :style 中
+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
在 :style 中通过数组，引用多个 data 上的样式对象
+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
4.v-html 将含有标签的字符串转化成为标签
5.v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，
前后可以添加内容，会被覆盖
6.v-show 显示和隐藏（display:none;） true显示 false 隐藏 可以判断 可以赋值
<h3 v-show="a==baba">3333</h3>
7.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>
8.v-once
<p v-once>{{num}}</p> 不会跟着改变的值
9.v-cloak {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容
<h1 v-cloak>{{msg}}</h1>
<style>
[v-cloak]{
display:none;
}
</style>
10 v-on 事件
<h1 v-on:click="show">{{msg}}</h1>
简写： <h1 @click="show">{{msg}}</h1>
取消右键菜单 @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”。
