vue---指令
v-bind:href //a标签里的链接
v-on:click //点击事件
</head> <body> <div id="test"> <button v-on:click="show()">d</button> </div> <script> new Vue({ el:"#test", methods:{ show : function(e){ console.log(e); } } }); </script> </body>
如果是 v-on:click="show" 则能调用起事件对象，也就是这个e有效。
但是v-on:click="show()" 这样调用，e就无效了，加括号后要想使形参e有效，则需按vue提供的，填入$event.
v-on:click="show($event,a,b)" ,$event表示事件对象，如果其他参数，可以接着传入。
v-on:click.stop = "show" .stop表示阻止时间冒泡。
v-on:click.prevent 阻止默认事件
<inoput type='text' v-model.number='value'>
v-model.lazy 失去焦点后才更新值
v-model.number 输入框输入后得到的是字符串，这个可以将其转为数字
v-model.trim 去掉前后的空格
v-html="html" 渲染html
<div v-once>{{msg}}</div> 只渲染一次
1 <body> 2 <div id="app"> 3 <p v-if="num > 50">货源充足</p> 4 <!-- 不符合条件的的p元素将被删除 --> 5 <p v-else-if="num>0">库存警告</p> 6 <p v-else>库存不足</p> 7 <input type="text" v-model="num"> 8 </div> 9 <script> 10 new Vue({ 11 el:'#app', 12 data : { 13 num : 100 14 } 15 }); 16 </script> 17 </body>
v-if是将整个元素删除，v-hide是添加display:hidden 隐藏元素。
<body> <div id="app"> <div v-cloak> {{num}} </div> </div> <script> setTimeout(function(){ new Vue({ el:'#app', data : { num : 100 } }); },5000); </script> </body>
当{{num}}没被渲染前，它的父级div会有个v-cloak属性，知道被渲染成100，v-cloak属性就会消失。凭借这一点，可以写个style样式
[v-cloak]{display:none;} 在为渲染前来隐藏{{num}}，会美观一点。
<body> <div id="app"> <div style="width:100px;height:100px;border:1px solid black;" v-bind:style="{background:color}"></div> <select v-model="color"> <option value="#f00">红色</option> <option value="#0f0">绿色</option> <option value="#00f">蓝色</option> <option value="#666">灰色</option> </select> </div> <script> new Vue({ el:'#app', data : { color:'#f00', } }); </script> </body>
v-bind:style="{css样式}",里面的样式会和原有样式融合，别忘了加上大括号，这里面的css样式值可以使用表达式。
<body> <div id="app"> <div style="width:100px;height:100px;border:1px solid black;" v-bind:style="[style1,style2]"></div> <select v-model="color"> <option value="#f00">红色</option> <option value="#0f0">绿色</option> <option value="#00f">蓝色</option> <option value="#666">灰色</option> </select> <button v-on:click="change">change</button> </div> <script> new Vue({ el:'#app', data : { color:'#f00', }, computed : { style1 : function(){ return {background:this.color}; }, style2 : function(){ return {borderRadius:'50%'}; } } }); </script> </body>
将样式对象写在computed里面，这样，data里的值有什么变化，就能同步。有对个样式对象时，v-bind:style="[style1,style2]";注意是数组的形式。
ps：css画三角形，把div的宽和高都设为0，然后border-left:100px solid transparent; border-right:100px solid transparent; border-top:150 solid green; 这样一个倒三角形就画出来了。如果是正三角，把border-top改为border-down就行了。
v-bind 简写为 ： 一个冒号。
v-on 简写为 @
