Vue 学习 之 7.01 学习笔记
Vue ?學習 之 ?7.01 學習筆記
?
?
1.還是復習前面的那個“品牌案例管理”，但是數據不是靜態寫死哦，而是動態的管理，向數據庫發送相關請求實現，因此，小節和昨天所學就是掌握Vue 的Ajax 技術
一。導包
二。業務邏輯
三。代碼實現。
其中有查詢，增加，刪除等操作，這個就是框架的優勢，
附帶的學習的是 全局配置
Vue.http.options.root?= 'http://vue.studyit.io/';
//如果通過全局配置了全局的接口根域名，則發起http 請求，則以相對路徑開頭，前面不能再加/ ，
//全局啟用 ,{emulateJSON : true} 選項
?
注：本文所有實例都沒有實現，可能是那個請求的網址有問題。
?
<script>
//設置全局的變量，這個只是第一步，
Vue.http.options.root?= 'http://vue.studyit.io/';
//如果通過全局配置了全局的接口根域名，則發起http 請求，則以相對路徑開頭，前面不能再加/ ，
//全局啟用 ,{emulateJSON : true} 選項
Vue.http.options.emulateJSON?= true;
var?vm?= new?Vue({
el :'#app',
data :?{
id :?'',
name :?'',
list :?[
{id :?1?, name :?'奧迪'?,ctime :?new?Date()},
{id :?2?, name :?'法拉利'?,ctime :?new?Date()},
{id :?3?, name :?'瑪莎拉蒂'?,ctime :?new?Date()}
]
},
created?() {
//當 vm 的data 和methods 初始化完畢以后，vm 實例會自動執行created 鉤子函數，
this.getAllList();
},
methods :?{
add?(){
//將數據添加到后臺
//1.發送一個post 請求，this.$hhtp.post() 但是必須三個參數
//2.post 中方三個參數， 第一個參數，請求的URL地址，第二個參數，要提交的數據。以對象形式提交
///第三個參數，是一個配置對象，以哪種表單提交過去 emulateJSON: true 以普通表單格式提交給服務器
// application/x-www-form-urlencoded
//3. 在post 中設置成功的回掉函數，如果想要拿到成功的結果，就是result.body
this.$http.post('api/addproduct',{name :this.name}).then( result?=>
{
if(result.body.status?=== 0){
//添加完成后，手動調用一下getAllList(),把最新的數據拿回頁面，刷新數據
this.getAllList();
}else{
alert("添加失敗");
}
});
?
},
del(id){
this.$http.get("api/delproduct"?+id).then(result?=>{
if(result.body.status?=== 0){
this.getAllList(); //這個就是框架的好處，刪除數據，里面更新，添加完數據以后，里面更新，
}else{
alert("刪除數據失敗");
}
});
},
//獲取所有數據列表 ---->>>重點是在哪里調用，如何調用這個方法，應該是在初始化的時候調用，
//在 生命周期函數的某個階段調用這個，在鉤子函數中調用，，
getAllList(){
//業務邏輯，1.由于倒入了vue-resource。js 可以直接通過this.$http 發起請求
//2.根據接口文檔，發起get 請求獲得數據
//3. this.$http.get().then(function(result)); 獲取回到函數的數據
//4.通過制定回掉函數之后，在回掉函數中拿到數據，
//5.先判斷result.status 的狀態碼 ，然后把result.message 復制給list；如果不等于0 ，則處理異常
//'http://vue.studyit.io/api/getnewslist
//'http://vue.studyit.io/api/getprodlist
this.$http.get('api/getprodlist').then(result?=>{
var?result?= result.body;
if(result.status?=== 0){
this.list?= result.message;
}else{
alert("error");
}
});
}
}
?
});
?
?
2.Vue 中的動畫實現
2.1 自帶動畫實現
2.2 第三方插件 animate.css ??實現炫酷動畫
2.3 鉤子函數實現動畫，動畫的生命周期函數，，前半場或者后半場
@before-enter?= "beforeenter"
@enter?= "enter"
@after-enter?= "afterenter"
2.4 其他的相關動畫
?
3.Vue的組件化，相當于模塊化
組件： 根據功能劃分成為組件，功能的拆分，以不同組件劃分不同的功能模塊，用什么功能就調用對應的組件。
組件和模塊化的不同
+模塊化：是從代碼邏輯角度進行劃分的，node.js里面，根據功能來，方便代碼分層開發，保證每個功能模塊職能單一
+組件化：從UI界面角度進行劃分，方便UI的重用。
3.1 全局組件，以及相關不同使用形式
<body>
????
????<div?id="app">
<!--學習使用組件，直接把組件的名稱以html 標簽的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--在組件的結構外面，使用template元素，定義組件的HTML模板結構-->
<template?id="temp1">
<div>
<hr>
<h1>這個就有提示，友好一些</h1>
</div>
</template>
?
<script>
//第一種方式，三步驟，創建，注冊，使用
//1.1使用 Vue.extend 來創建全局的Vue 組件
?
var?com1?= Vue.extend({
template :?'<h1>這個是使用Vue.extend創建的組件</h1'?//通過template 屬性，指定了組件要展示的HTML結構
?
});
//1.2 使用Vue.component 使用前面創建的 Vue.component ('組件的名稱',創建出來的組件對象);
Vue.component('mycom1',com1); //注冊一下
/*
使用駝峰命名，那么前面的使用就是 my-com1 需要把大寫改成小寫，并且中間加-
不適用駝峰則是直接使用mycom1
*/
//第二種方式，簡化
Vue.component('mycom2',Vue.extend({
template :?'<div style="background:pink">這個是第二種方式創建的div<hr><h1>13</h1></div>',
}));
//第三種方式 進一步簡寫
Vue.component('mycom3',{
template :?'<div style="background:black">這個是第三種方式創建的div<hr><h1>13</h1></div>',
});
?
//上面的方式不靈活，提示不友好不明確，
Vue.component('mycom4',{
template :'#temp1'
});
?
3.2局部組件/私有組件
<div?id="app">
<!--學習使用組件，直接把組件的名稱以html 標簽的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--局部組件使用-->
<div?id="app2">
<h1>局部組件使用</h1>
<login></login>
<test></test>
<test2></test2>
</div>
?
<!--在組件的結構外面，使用template元素，定義組件的HTML模板結構-->
<template?id="temp1">
<div>
<hr>
<h1>這個就有提示，友好一些</h1>
</div>
</template>
<template?id="test2">
<h2?style="color:indianred">第二個呦</h2>
</template>
?
<script>
/
var?vm?= new?Vue({
el :?'#app2',
data :?{},
methods :{},
filters :?{}, //過濾器
directives :?{}, //指令
//組件 ---定義私有組件的
components :?{
login :{
template :?'<h1>這個是私有的login組件</h1>',
},
test :{
template :?'<h2>這個測試一下第二個私有屬性</h2>',
},
test2 :{
template :?"#test2"
}
},
//前面是屬性，后面是鉤子函數，
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdated(){},
updated(){},
beforeDestroy(){},
destroyed(){}
?
});
?
4. 全局數據與局部數據
<body>
???? <!--需求，這個是實現動畫，-->
????<div?id="app">
<mycom1></mycom1>
<mycom1></mycom1>
</div>
?
<template?id="temp1">
<div>
<input?type="button"?value="+1"?@click="increment">
<h1>{{count}}</h1><br>
<input?type="button"?value="+1"?@click="increment">
<h1>{{count}}</h1>
</div>
</template>
<script>
//1.組件中帶有私有數據
//2.組件中使用外部數據，
var?dataObj?= {count :?0?};
Vue.component('mycom1',{
template :?'#temp1',
data?:?function(){
return?{
count:?0?///這個是局部數據
//也可以是外部 dataObj ,,但是會造成數據共享
};
},
//局部方法
methods :?{
increment(){
this.count++;
}
}
?
});
var?vm?= new?Vue({
el :?'#app',
data :?{
},
methods :?{
}
?
});
?
?
5. 不同組件之間的切換
第一種，兩個組件之間的切換
<a?href=""?@click.prevent="flag=true">登錄組件</a>
<a?href=""?@click.prevent="flag=false">注冊組件</a>
<login?v-if="flag">
</login>
<register?v-else="flag">
?
第二種，多個組件之間的切換
<body>
???? <!--需求，這個是實現動畫，-->
????<div?id="app">
<!--
//多個個組件之間的切換
//component 是一個占位符，：is 屬性，用來指定要展示的組件的名稱
?
-->
<a?href=""?@click.prevent="value='login'">組件一</a>
<a?href=""?@click.prevent="value='register'">組件一</a>
<a?href=""?@click.prevent="value='forget'">組件一</a>
<conponent?:is="value"></conponent>
</div>
<script>
?
Vue.component('login',{
template :?'<h1 style="background-color:red">這個是登錄組件</h1>'
});
Vue.component('register',{
template :?'<h1 style="background-color:pink">這個是注冊組件</h1>'
});
Vue.component('forget',{
template :?'<h1 style="background-color:pink">這個是忘記組件</h1>'
});
?
var?vm?= new?Vue({
el :?'#app',
data :?{
value :?'login'?//component 組件中的值
},
methods :?{
}
});
?
</script>
?
</body>
?
?
6.組件切換的時候加動畫
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(180px);
}
?
.v-enter-active,
.v-leave-active{
transition: all?0.6s?ease;
}
</style>
?
</head>
<body>
???? <!--需求，這個是實現動畫，-->
????<div?id="app">
<!--
//多個個組件之間的切換
//component 是一個占位符，：is 屬性，用來指定要展示的組件的名稱
?
-->
<a?href=""?@click.prevent="value='login'">組件一</a>
<a?href=""?@click.prevent="value='register'">組件一</a>
<a?href=""?@click.prevent="value='forget'">組件一</a>
<!--
組件之間的動畫切換。 通過mode 屬性實現
-->
<transition?mode="out-in">
<conponent?:is="value"></conponent>
</transition>
?
</div>
<script>
?
Vue.component('login',{
template :?'<h1 style="background-color:red">這個是登錄組件</h1>'
});
Vue.component('register',{
template :?'<h1 style="background-color:pink">這個是注冊組件</h1>'
});
Vue.component('forget',{
template :?'<h1 style="background-color:pink">這個是忘記組件</h1>'
});
?
var?vm?= new?Vue({
el :?'#app',
data :?{
value :?'login'?//component 組件中的值
},
methods :?{
}
});
?
</script>
?
</body>
?
?
?
總結
以上是生活随笔為你收集整理的Vue 学习 之 7.01 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 颜值贷上征信吗
- 下一篇： Vue 学习第四天--第一部分 -