模版
{{msg}} 数据更新模板变化 相当与v-text
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出 相当与v-html
属性
v-bind:src=""
width/height/title....
简写 ::src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
v-model 一般表单元素(input) 双向数据绑定
v-for 循环 能获取到的有 {{$index}} {{$key}}
1. v-for="value in json" //数组
2. v-for="(k,v) in json" //对象
v-on:click="函数" @:click 简写
v-on:click/mouseout/mouseover/dblclick/mousedown.....
事件对象 $event
阻止事件冒泡 @click.stop=""
阻止默认行为 @click.prevent=""
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
v-show="false/true" 显示隐藏
class和style 注意: 复合样式，采用驼峰命名法
1. :class="json" //json:{red:true,blue:true} 结果:class="red blue" 赋值
2. :class="['red',d]" // data:{ red:'green'} 结果:class="red green" 数组形式
3. :class="{red:a,blue:b}" //data:{a:true,b:false} 结果:class="red" 对象形式
4. :class="['green',red,{'a':true,'b':false}]" //data:{ red:'c'} 结果:class="green c a" 混合
1. :style="{color:'red'}" // 结果style="color:red" 对象
2. :style="[c,d]" //data:{c:{color:'red'},d:{backgroundColor:'gray'}} 结果:style="color:red" 赋值
3. :style="c" //a:{color:'red',backgroundColor:'gray' } 结果: style="color:red; backgroundColor:gray;" 赋值
过滤器
{{'welcome'|uppercase}} //大写
{{'WELCOME'|lowercase}}//小写
{{'WELCOME'|lowercase|capitalize}} //先小写然后首字母大写
{{12|currency}}//转化美金
{{12|currency '￥'}}//转化人名币
....
$http （ajax） （注意要引入 vue-resource）
//get请求方式
//给服务发送数据:√
this.$http.get('get.php',{// 这个参数是发送的数据
a:1,
b:20
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
//post请求方式
this.$http.post('post.php',{//这个参数是发送的数据
a:1,
b:20
},{ //这个参数是标题头
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
//jsonp请求方式
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'a' //这个参数是发送的数据
},{
jsonp:'cb' //callback名字，默认名字就是"callback" 如果不是这定义名字
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
//如果请求有错误的话第二个参数改成{params: {word: 'a' }}
