[TOC] ## 基础 ```javascript var vdata={ //弹出层状态 layerState:{}, //操作状态 doState:{}, }; var vm = new Vue({ el: '#v-view', data: vdata, components:{ }, methods:{ loadInfo:function(){ }, submitData:function(){ } }, created:function(){ }, }); ``` ## 简单版 ``` javascript var vm=new Vue({ el: '#v-view', data: { info:{}, recommend:[], }, methods:{ loadData:function(){ ajaxRequestWithWait('', {},function(data){ vm.info = data.info; vm.recommend = data.recommend; }); } } }); ``` ## cli模式 ``` //模板 <template> <div> </div> </template> <script> export default { components: { }, props:[], created(){ }, data () { return { } }, methods:{ loadInfo(){ this.$http.post('url',{}).then(()=>{ }).catch((err)=>{ }); } } } </script> <style scoped> </style> ``` ## vue常用复制 ``` <img :src="li.adimg"/> :style="{background:'url('+li.adimg+') no-repeat center','background-size': 'cover'}" //css样式污染 scoped //点击class dianji-opacity //返回上一级 @click="$router.back(-1)" //img 根目录 /static/img/ img替换 /geren_/static/img 删除 //ajax引入 import http from '@/lib/http.js' //引入公共底部 import PublicBottom from "@/page/public/bottomNavigation" //接口 this.$http.post(链接, {name:'嘻嘻嘻'}).then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); ``` ## 默认组件 ```javascript <template> <div> </div> </template> <script> export default { name: 'HelloWorld', components: { }, props:[], created(){ }, data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ } } </script> <style> </style> ```