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;
varvm = newVue({
el :'#app',
data : {
id :'',
name :'',
list : [
{id :1 , name :'奧迪' ,ctime :newDate()},
{id :2 , name :
{id :3 , name :'瑪莎拉蒂' ,ctime :newDate()}
]
},
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=>{
varresult = 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>
<divid="app">
<!--學習使用元件，直接把元件的名稱以html 標籤的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--在元件的結構外面，使用template元素，定義元件的HTML模板結構-->
<templateid="temp1">
<div>
<hr>
<h1>這個就有提示，友好一些</h1>
</div>
</template>
<script>
//第一種方式，三步驟，建立，註冊，使用
//1.1使用 Vue.extend 來建立全域性的Vue 元件
varcom1 = 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區域性元件/私有元件
<divid="app">
<!--學習使用元件，直接把元件的名稱以html 標籤的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--區域性元件使用-->
<divid="app2">
<h1>區域性元件使用</h1>
<login></login>
<test></test>
<test2></test2>
</div>
<!--在元件的結構外面，使用template元素，定義元件的HTML模板結構-->
<templateid="temp1">
<div>
<hr>
<h1>這個就有提示，友好一些</h1>
</div>
</template>
<templateid="test2">
<h2style="color:indianred">第二個呦</h2>
</template>
<script>
/
varvm = newVue({
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>
<!--需求，這個是實現動畫，-->
<divid="app">
<mycom1></mycom1>
<mycom1></mycom1>
</div>
<templateid="temp1">
<div>
<inputtype="button"value="+1" @click="increment">
<h1>{{count}}</h1><br>
<inputtype="button"value="+1" @click="increment">
<h1>{{count}}</h1>
</div>
</template>
<script>
//1.元件中帶有私有資料
//2.元件中使用外部資料，
vardataObj = {count :0 };
Vue.component('mycom1',{
template :'#temp1',
data :function(){
return {
count:0///這個是區域性資料
//也可以是外部 dataObj ,,但是會造成資料共享
};
},
//區域性方法
methods : {
increment(){
this.count++;
}
}
});
varvm = newVue({
el :'#app',
data : {
},
methods : {
}
});
5. 不同元件之間的切換
第一種，兩個元件之間的切換
<ahref="" @click.prevent="flag=true">登入元件</a>
<ahref="" @click.prevent="flag=false">註冊元件</a>
<loginv-if="flag">
</login>
<registerv-else="flag">
第二種，多個元件之間的切換
<body>
<!--需求，這個是實現動畫，-->
<divid="app">
<!--
//多個個元件之間的切換
//component 是一個佔位符，：is 屬性，用來指定要展示的元件的名稱
-->
<ahref="" @click.prevent="value='login'">元件一</a>
<ahref="" @click.prevent="value='register'">元件一</a>
<ahref="" @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>'
});
varvm = newVue({
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: all0.6sease;
}
</style>
</head>
<body>
<!--需求，這個是實現動畫，-->
<divid="app">
<!--
//多個個元件之間的切換
//component 是一個佔位符，：is 屬性，用來指定要展示的元件的名稱
-->
<ahref="" @click.prevent="value='login'">元件一</a>
<ahref="" @click.prevent="value='register'"<