一 获取后台数据用到的方式（在引入vue.js后引入vue-resource.js）
1.1使用get请求
（this.$http.get(‘请求的url‘, [可选参数对象，使用{}传参]).then(成功回调函数, 失败回调函数)）
1.2使用post请求
（this.$http.post(‘请求的url‘,[可选参数请求报文体对象body,使用{}传参], [可选参数对象，使用{}传参]).then(成功回调函数, 失败回调函数)）
注意点：$http.post()方法中的第二个参数固定写成：{emulateJSON:true},否则可能造成服务器无法接收到请求报文体中的参数值
1.3使用jsonp请求
this.$http.jsonp(‘请求的url‘, [可选参数对象，使用{}传参]).then(成功回调函数, 失败回调函数);
jsonp请求主要用来解决ajax跨域请求问题，使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式
二解决差值表达式闪烁问题
2.1<span v-cloak>{{name}}</span>
2.2<span v-text="name"></span>以文本的格式显示 <div v-html="name"></div>可以解析html标签 --->这两种都不需要加{{}}
三系统指令的使用及注意事项
3.1 v-bind:class的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bule{
color:blue;
}
.pink{
color: pink;
}
.ClassA{
color:orange;
}
.ClassB{
color:green;
}
</style>
</head>
<body>
<div id="dv">
<input type="text" v-bind:value="name">
<!-- v-bind也可以省略 -->
<input type="text" :value="name">
<a v-bind="{href:‘http://baidu.com/index/‘+id}">跳转</a>
<div :class="{ClassA:istrue}">orange</div>
<div :class="[ClassA]">pink</div>
<div :class="[ClassA,{ClassB:istrue}]">green</div>
</div>
</body>
<script src="vue221.js"></script>
<script>
new Vue({
el:‘#dv‘,
data:{
name:"hellow Vue",
id:1,
istrue:true,
ClassA:‘pink‘,
ClassB:‘blue‘
}
});
</script>
</html>
3.1.1 v-bind:src
动态获取图片的时候不能直接在img标签src中直接使用差值，需要用v-biand:src，<img v-bind:src="item.productImage" alt="烟">
3.2 v-model(双向数据绑定)
使用范围（input、select、textarea、components（Vue中的组件)）
3.3 v-for
vue1.0与vue2.0对于v-for使用区别总结：
1、vue1.0中有$index ，而vue2.0中将$index移除
2、vue1.0中 (index,item) in list 而 vue2.0 变成了 (item,index) in list的写法
3、vue1.0中使用 track-by来标记dom对象的唯一性，vue2.0中改成了 :key3.4 v-if和v-show
根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素v-if和v-show的总结：
v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中， 而v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的。3.4 v-on
(绑定事件监听，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。)<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>四 自定义过滤器(格式化金额和货币)
Vue2.0 使用写法：
<span>{{ msg | 过滤器id(‘参数1‘ ‘参数2‘ ....) }}</span>例：（toFixed() 方法可把 Number 四舍五入为指定小数位数的数字）
原文地址：https://www.cnblogs.com/pzh-1/p/8145056.html