前后端數據交互
異步編程
ajax的異步編程
通過url訪問地址獲取數據，數據獲取成功后通過ajax的success屬性方法進行回調，但是存在一個問題：當需要多次回調時，如果有需求這幾次回調的順序必須固定，那么ajax就只能進行success的嵌套處理，但是這明顯不符合程序的健壯性和代碼的解耦性，所以Promise更為優秀。
Promise的方式進行異步操作
Promise處理對象的優點：①可以避免多層異步調用嵌套問題（回調地域）②Promise對象提供了簡潔的API，使得控制異步操作更加容易。
基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Promise</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
/*實例化一個Promise的對象
* 內部參數：resolve：數據交互成功后實現的 reject：數據交互失敗之后實現的
* 用setTimeout來模擬 異步操作
* */
const p = new Promise(function (resolve , reject) {
setTimeout(function () {
var flag = false;
if (flag) {
resolve('flag是true');
}else{
reject('flag是false');
}
},100);
});
/*p.then 之后是當數據傳輸成功/失敗之后執行的 這時數據已經傳到resolve和reject中了*/
p.then(function (successInfo) {
console.log(successInfo);
},function (failInfo) {
console.log(failInfo);
});
const vm = new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
路由的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--引入vue的支持文件-->
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/vue-router.js"> </script>
</head>
<body>
<div id="app">
<!--to屬性相當於一個 a標簽-->
<router-link to="/login/1"> 登錄 </router-link>
<router-link to="/login/2"> 登錄 </router-link>
<router-link to="/login/3"> 登錄 </router-link>
<router-link to="/register"> 注冊</router-link>
<!--設置路由占位符-->
<router-view></router-view>
</div>
<script type="text/javascript">
/*定義子組件*/
const Login={
template:`<div>
//獲取動態路由的參數值
<h1>Login id : {{$route.params.loginId}}</h1>
<hr/>
<router-link to="/username">用戶名</router-link>
<router-link to="/password">密碼</router-link>
<router-view></router-view>
</div>`
};
const Register={
template: `<h1>Register模塊</h1>`
};
const username={
template: `
<div> username:<input type="text"></div>
`
};
const password = {
template: `
<div>password: <input type="password"></div>
`
};
/*初始化路由對象實例*/
const router = new VueRouter({
/*配置路由規則*/
routes:[
/*設置路由重定向*/
{path:'/' , redirect:'/login/1'},
/*通過restful的形式設置動態路由規則*/
{path:'/login/:loginId' , component:Login ,children:[
/*設置嵌套路由*/
{path:'/username' , component:username},
{path:'/password' , component : password}
]},
{path:'/register' , component:Register }
]
});
const vm = new Vue({
el:'#app',
data:{
},
router: router
});
</script>
</body>