Vue學習(7)————————元件以及生命週期函式，vue-resource請求資料
阿新 • • 發佈：2018-11-24
首先建立一個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';