前段引用
<div class="container"></div>//范围
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.js"></script>//Ajax数据交互插件,目前一般使用:Axios
<script src="js/vuecontain.js"></script>
vuecontain.js文件
var vm=new Vue({
el:".container",//调用范围
data:{
addressList:[],
limitNum:3,
adMorn:false
//定义属性的地方
},
filters:{//过滤器
formatMoney : function(value){
return "¥ "+value.toFixed(2); //添加小数点后两位
}
},
mounted : function(){//此处调用Ajax函数,mounted在整个实例生内置执行一次命
this.$nextTick(function(){//此方法保证dom成功渲染
this.address();
});
},
computed:{//实时调用方法,适合实时计算
filterAddress:function(){
return this.addressList.slice(0,this.limitNum);
}
},
methods:{//存放方法的地方
address:function(){//用插件vue-resource.js获取Ajax实例
var _this = this;
this.$http.get("data/address.json").then(function (response) {
var res = response.data;
if(res.status=="0"){//判断是否获取成功
_this.addressList = res.result;//存放获取数据
}
});
}
}
});
过滤器两种使用方法:
- 局部过滤器
filters:{
formatMoney : function(value){
return "¥ "+value.toFixed(2); //添加小数点后两位
}
}
html:{{ XXXX | formatMoney("元")}}
- 全局过滤器
Vue.filter("money",function(value,type){
return "¥ "+value.toFixed(2) + type;
});
html:{{ XXXX | money("元")}}
基本示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{a}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:1,
},
});
//vm就是实例对象
console.log(vm.$el); //这里就是div元素
vm.$el.style.background = 'red';
console.log(vm.$data);
console.log(vm.$data.a); //'1'
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="box">
{{a}}
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#box",//调用范围
data:{
a:1,//定义属性的地方
},
filters:{//过滤器
},
mounted : function(){//此处调用Ajax函数,mounted在整个实例生内置执行一次命
},
computed:{//实时调用方法,适合实时计算
},
methods:{//存放方法的地方
}
});
</script>
</body>
</html>
参考:
1.官方dpi:https://cn.vuejs.org/v2/api/
2.Vue实例的一些简单方法 http://blog.csdn.net/github_26672553/article/details/54632107