mvvm（前端） m:model（数据） v:view（视图） vm:viewmodel 数据和视图的桥梁
双向数据绑定 m---->mv----->v m<----mv<-----v
angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器) v—>c—>m m—>v
优点： 轻量级 高效率 上手快 简单易学 文档全面简洁
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> 2-1. 当在组件中使用v-for 时，key 现在是必须的。 2-2.当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 "就地复用" 策略。 如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 2-3.为了给 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样式
数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>数组中使用三元表达式 <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>数组中嵌套对象 <h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>直接使用对象 <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
<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()"
事件修饰符： link. .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)" />
