首先建立一个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 --savesave代表写入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';