首先建立一个Home.vue文件

<template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> </div> </template> <script> export default{ data(){ return{ msg:'我来组成头部' } }, methods:{ headRun(){ alert('一点我就跑'); } } } </script> <style lang="scss" scoped="scoped"> p{ font-family: "微软雅黑"; color: aquamarine; } </style>

在app.vue中引入就可以调用该组件

<template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> </div> </template> <script> export default{ data(){ return{ msg:'我来组成头部' } }, methods:{ headRun(){ alert('一点我就跑'); } } } </script> <style lang="scss" scoped="scoped"> /*scoped表示只在这个vue里有效果*/ p{ font-family: "微软雅黑"; color: aquamarine; } </style>

再加一个组件

<template> <div> <h1>{{msg}}</h1><br/> <ul> <li v-for="item in listA">{{item}}</li> </ul> <ul> <li v-for="item in listB">{{item}}</li> </ul> </div> </template> <script> export default{ data(){ return{ msg:'这是一个新闻组件', listA:['热点1','热点2','热点3'], listB:['国事1','国事2','国事3'], } }, methods:{ } } </script> <style lang="scss" scoped="scoped"> </style>

引入两个组件

import HomeA from './components/Home.vue'; import News from './components/News.vue';

—————————————————————————————————————————————

生命周期函数

<script> export default{ data(){ return{ msg:'生命周期函数的演示', } }, methods:{ setMsg(){ this.msg = '我是改变后的数据' } }, beforeCreate(){ //生命周期函数创建之前 console.log('实例创建之前') }, created(){ //实例创建已完成 console.log('实例创建已完成') }, beforeMount(){ //模板渲染之前 //比较重要 console.log('模板渲染之前') }, mounted(){ //模板渲染完成 console.log('模板渲染完成') }, beforeUpdate(){ console.log('数据更新之前') }, updated(){ console.log('数据更新完成') }, beforeDestroy(){ console.log('实例销毁之前') }, destroyed(){ console.log('实例销毁完成') } } </script>

在主组件里挂载或者关闭组件

<template> <div id="app"> <p v-for="(item,key) in list"> {{item}}----{{key}} </p> <v-home></v-home> <a v-bind:href="link">看看是不是百度</a> <!--这里v-if标签，如果是true他就挂载，false就关闭--> <v-news v-if="flag"></v-news> <button v-on:click="stopVNew()">挂载以及卸载v-news组件</button> </div> </template> <script> import HomeA from './components/Home.vue'; import News from './components/News.vue'; export default{ components:{ 'v-home':HomeA, 'v-news':News }, data(){ return{ hello:'world', list:{ name:'sola', age:'99', money:'5块' }, flag:true, link:'http://www.baidu.com' } }, methods:{ stopVNew(){ this.flag = !this.flag; } } } </script>

————————————————————————————————————————————

Vue请求数据

有三种方式

vue-resource 官方提供的 vue的一个插件

axios

fetchj-jsonp

——————————————————————————————————

vue-resource

首先得安装一下

在命令行中进入项目，输入

cnpm install vue-resource --save

save代表写入package.json

安装完成后进入main.js 加入

//相当于引入一个工具库 并付给Vue引用 import Vue from 'vue'; import App from './App'; import VueResource from 'vue-resource';//新加入 //并使用插件 Vue.use(VueResource); new Vue({ el:'#app', render: h => h(App) })

修改完后运行项目

写入调用接口的方法，并遍历一下下

<template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> <button v-on:click="getcode()">随便获取一个码表</button> <table border="1" cellspacing="" cellpadding=""> <tr v-for="item in carcode"> <td>{{item.code}}</td> <td>{{item.name}}</td> </tr> </table> </div> </template> <script> export default{ data(){ return{ msg:'我来组成头部', carcode:[], } }, methods:{ headRun(){ alert('一点我就跑'); }, getcode(){ var api = 'http://192.168.66.63:30000/business/code/dept/getcartype'; this.$http.get(api).then(function(response){ console.log(response); this.carcode = response.body; },function(err){ console.log(err); }) } } } </script>

再测试一下下

<template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> <button v-on:click="getcode()">随便获取一个码表</button> <table border="1" cellspacing="" cellpadding=""> <tr v-for="item in carcode"> <td>{{item.code}}</td> <td>{{item.name}}</td> </tr> </table> </div> </template> <script> export default{ data(){ return{ msg:'我来组成头部', carcode:[], } }, methods:{ headRun(){ alert('一点我就跑'); }, getcode(){ var token = 'znjtbril'; var api = 'http://192.168.66.63:30600/code/business/code/dept/getcartype'+'?token='+token; this.$http.get(api).then(function(response){ console.log(response); this.carcode = response.body; },function(err){ console.log('errorrrrrrrr--------'); console.log(err); }) } } } </script>

传参调用接口

<template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> <button v-on:click="getcode()">随便获取一个码表</button> <table border="1" cellspacing="" cellpadding=""> <tr v-for="item in carcode"> <td>{{item.code}}</td> <td>{{item.name}}</td> </tr> </table> <br /> <button @click="postCycle()">提交一个自行车数据</button> <button @click="getLogin()">登陆</button> </div> </template> <script> export default{ data(){ return{ msg:'我来组成头部', carcode:[], } }, methods:{ headRun(){ alert('一点我就跑'); }, getcode(){ var token = 'znjtbril'; var api = 'http://192.168.66.63:30600/code/business/code/dept/getcartype'+'?token='+token; this.$http.get(api).then(function(response){ console.log(response); this.carcode = response.body; },function(err){ console.log('errorrrrrrrr--------'); console.log(err); }) }, getLogin(){ var api = 'http://192.168.66.63:30600/systemmgr/system/mgr/login'; var user = '192012'; var pass = '192012'; this.$http.get(api,{params: {username:user,pwd:pass}}).then(function(response){ console.log(response); },function(err){ console.log('errorrrrrrrr--------'); console.log(err); }) } } } </script>

Post传参

addCycle(){ var api = 'http://192.168.66.63:30600/resource/resource/addCycle'; let carObj = { id:'120', deptno:'120', plateno: '120', description: '120' } this.$http.post(api,carObj/*,{emulateJSON:true}*/).then(function(response){ console.log(response); },function(err){ console.log('errorrrrrrrr--------'); console.log(err); }) } } }

三种对象的建立

/*let carObj = { id:'120', deptno:'120', plateno: '120', description: '120', token:'znjtbril' }*/ /*var carObj = { id:'120', deptno:'120', plateno: '120', description: '120', token:'znjtbril' }*/ var carObj = new Object(); carObj.id='120'; carObj.deptno='120'; carObj.plateno='120'; carObj.description='120';