智享笔记 Vue
-
编程式导航
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link> <router-link to="/register">Re
-
命名路由
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link> <router-link to="/register">Re
-
动态路由匹配4
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> <router-link to="/register">Register</router-link>
-
动态路由匹配3
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> <router-link to="/register">Register</router-link>
-
动态路由匹配2
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> <router-link to="/register">Register</router-link>
-
动态路由匹配1
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> <router-link to="/register">Register</router-link>
-
路由嵌套
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由占位符 --> <router-view></router-view> </div> <!-- 导入 vue 文件 --> <script src="./li
-
路由重定向
<body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由占位符 --> <router-view></router-view> </div> <!-- 导入 vue 文件 --> <script src="./li
-
vue-router的基本使用
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 导入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script>
-
模拟路由
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 导入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script>
-
async函数处理多个异步请求
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* async/await处理多个异步任务 */ axios.defaults.baseURL = 'http://localhost:3000'; async function queryData() { var info = await axios.get('async1'); var ret = await axios.get('async2?i
-
async函数基本用法
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* async/await 处理异步操作： async函数返回一个Promise实例对象 await后面可以直接跟一个 Promise实例对象 */ axios.defaults.baseURL = 'http:localhost:3000'; // axios.get('adata').then(function(ret){ // console.l
-
axios拦截器
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios拦截器 */ axios.interceptors.request.use(function(config) { console.log(config.url) config.headers.mytoken = 'nihao'; return config; }, function(err){ console.log(err) }) ax
-
axios响应结果与全局配置
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios 响应结果与全局配置 */ // axios.get('http://localhost:3000/axios-json').then(function(ret){ // console.log(ret.data.uname) // }) // 配置请求的基准URL地址 axios.defaults.baseURL = 'http://l
-
axios请求传参
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> /* axios请求参数传递 */ // axios get请求传参 // axios.get('http://localhost:3000/axios?id=123').then(function(ret){ // console.log(ret.data) // }) // axios.get('http://localhost:3000/axios
-
axios基本用法
<body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> axios.get('http://localhost:3000/adata').then(function(ret){ // 注意data属性是固定的用法，用于获取后台的实际数据 // console.log(ret.data) console.log(ret) }) </script></body>
-
Fetch响应结果的数据格式
<body> <script type="text/javascript"> /* Fetch响应结果的数据格式 */ fetch('http://localhost:3000/json').then(function(data){ // return data.json(); return data.text(); }).then(function(data){ // 1.若上面通过data.json();响应，则data为对象 // console.log(data.uname) // console.log(typeof data) // 2.若上面通过data.
-
FetchAPI参数传递
<body> <script type="text/javascript"> // Fetch API 调用接口传递参数 // GET参数传递-传统URL // fetch('http://localhost:3000/books?id=123', { // method: 'get' // }) // .then(function(data){ // return data.text(); // }).then(function(data){ // console.log(data) // }); // GET参数传递-restful形式的URL // fetch('
-
FetchAPI基本使用
<body> <script type="text/javascript"> /* Fetch API 基本用法 */ fetch('http://localhost:3000/fdata').then(function(data){ // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 return data.text(); }).then(function(data){ console.log(data); }) </script></body>