第166天学习打卡（项目 谷粒商城8 前端基础ES6 promise 模块化 Vue）

前端基础ES6

8. promise

image-20210623190334168

目录

image-20210623192847207

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
     <script>
         //1.查出当前用户信息
         //2.按照当前用户id查出他的课程
         //3.按照当前课程id查出分数
          $.ajax({
             url: "mock/user.json",
             success(data) {
                 console.log("查询用户：", data);
                 $.ajax({
                     url: `mock/user_corse_${data.id}.json`,
                     success(data) {
                         console.log("查询到课程：", data);
                         $.ajax({
                             url: `mock/corse_score_${data.id}.json`,
                             success(data) {
                                 console.log("查询到分数：", data);
                             },
                             error(error) {
                                 console.log("出现异常了：" + error);
                             }
                         });
                     },
                     error(error) {
                         console.log("出现异常了：" + error);
                     }
                 });
             },
             error(error) {
                 console.log("出现异常了：" + error);
             }
         });
 ​
     </script>
 ​
 </body>
 </html>

image-20210623192908514

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
     <script>
        
         //1. Promiss可以封装异步操作
         let p = new Promise((resolve, reject)=>{
             // 异步操作
             $.ajax({
                 url: `mock/user.json`,
                 success:function(data){
                     console.log("查询用户成功:", data)
                     resolve(data);
                 },
                 error:function(err){
                     reject(err);
 ​
                 }
             });
            
         });
 ​
         p.then((obj)=>{
             $.ajax({
                 url: `mock/user_corse_${obj.id}.json`,
                 success:function(data){
                     console.log("查询用户课程成功:", data)
                    
                 },
                 error:function(err){
                     
 ​
                 }
             })
             
         }).catch((err)=>{
 ​
         })
 ​
     </script>
 ​
 </body>
 </html>

image-20210623195402524

 

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 ​
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head>
 ​
 <body>
     <script>
         
         //1. Promiss可以封装异步操作
         let p = new Promise((resolve, reject) => {
             // 异步操作
             $.ajax({
                 url: "mock/user.json",
                 success: function (data) {
                     console.log("查询用户成功:", data)
                     resolve(data);
                 },
                 error: function (err) {
                     reject(err);
 ​
                 }
             });
 ​
         });
 ​
         p.then((obj) => {
             return new Promise((resolve, reject) => {
                 $.ajax({
                     url: `mock/user_corse_${obj.id}.json`,
                     success: function (data) {
                         console.log("查询用户课程成功:", data)
                         resolve(data);
                     },
                     error: function (err) {
                         reject(err);
 ​
                     }
                 });
 ​
             })
 ​
 ​
         }).then((data) => {
             console.log("上一步的结果", data)
 ​
         })
 ​
     </script>
 ​
 </body>
 ​
 </html>

image-20210623200331799

 

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 ​
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head>
 ​
 <body>
     <script>
       
     //1. Promiss可以封装异步操作
         let p = new Promise((resolve, reject) => {
             // 异步操作
             $.ajax({
                 url: "mock/user.json",
                 success: function (data) {
                     console.log("查询用户成功:", data)
                     resolve(data);
                 },
                 error: function (err) {
                     reject(err);
 ​
                 }
             });
 ​
         });
 ​
         p.then((obj) => {
             return new Promise((resolve, reject) => {
                 $.ajax({
                     url: `mock/user_corse_${obj.id}.json`,
                     success: function (data) {
                         console.log("查询用户课程成功:", data)
                         resolve(data);
                     },
                     error: function (err) {
                         reject(err);
 ​
                     }
                 });
 ​
             })
 ​
 ​
         }).then((data) => {
             console.log("上一步的结果", data)
             $.ajax({
                     url: `mock/corse_score_${data.id}.json`,
                     success: function (data) {
                         console.log("查询课程得分成功:", data)
                        
                     },
                     error: function (err) {
                        
                     }
                 });
 ​
         })
 ​
     </script>
 ​
 </body>
 ​
 </html>

image-20210623200946827

简化版

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 ​
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head>
 ​
 <body>
     <script>
        function get(url, data) {
             return new Promise((resolve, reject) => {
                 $.ajax({
                     url: url,
                     data: data,
                     success: function (data) {
 ​
                         resolve(data);
                     },
                     error: function (err) {
                         reject(err);
 ​
                     }
 ​
                 })
             });
 ​
         }
 ​
         get("mock/user.json")
             .then((data) => {
                 console.log("用户查询成功--:", data)
                 return get(`mock/user_corse_${data.id}.json`);
             })
             .then((data)=>{
                 console.log("课程查询成功--:", data)
                 return get(`mock/corse_score_${data.id}.json`);
 ​
             })
             .then((data)=>{
                 console.log("课程成绩查询成功--：", data)
             })
             .catch((err)=>{
                 console.log("出现异常", err)
             });
 ​
    
     </script>
 ​
 </body>
 ​
 </html>

image-20210623202517952

9.模块化

image-20210623202640759

1）export

 

image-20210623204526786

image-20210623204614296

image-20210623204916503

image-20210623204952657

hello.js

 //这里是未定义名字的写法
 export default {
     sum(a, b){
         return a + b;
     }
 }
 ​
 ​
 ​
 ​
 //第二种写法
 // export const util = {
 //     sum(a,b){
 //         return a + b;
 //     }
 // }
 ​
 ​
 ​
 //第一种写法  上面是第二种写法
 // const util = {
 //     sum(a, b) {
 //         return a + b;
 //     }
 // }
 // export{util}
 ​
 //export 不仅可以导出对象，一切js变量都可以导出。比如：基于类型变量、函数、数组、对象

main.js

 import { abc } from "./hello";
 import { name,add} from "./user";
 ​
 abc.sum(1,2);
 console.log(name);
 add(1,3);

user.js

 var name = "jack"
 var age = 21
 function add(a,b){
     return a + b;
 }
 ​
 export { name, age , add} //批量导出
 ​

Vue

官网地址：安装 — Vue.js (vuejs.org)

MVVM思想

image-20210623205256448

image-20210623205507172

Vue简介

image-20210623205628792

image-20210623205848634

image-20210623210245161

清空这个控制台命令 cls

image-20210623210503252

单向绑定

image-20210623212114609

image-20210623212133380

image-20210623212233231

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 ​
     <div id="app">
         <h1>{{name}}, 好看</h1>
 ​
     </div>
     
     <script src="./node_modules/vue/dist/vue.js"></script>
     <script>
         let vm = new Vue({
             el: "#app",
             data: {
                 name: "张三"
             }
 ​
         });
     </script>
 </body>
 </html>

双向绑定

image-20210623213017623

image-20210623213034701

image-20210623213144484

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 ​
     <div id="app">
         <input type="text" v-model="num">
         <h1>{{name}}, 好看, 有{{num}} 几人为她点赞</h1>
 ​
     </div>
     
     <script src="./node_modules/vue/dist/vue.js"></script>
     <script>
         //1.vue声明式渲染
         let vm = new Vue({
             el: "#app",
             data: {
                 name: "张三",
                 num: 1
             }
 ​
         });
         //2.双向绑定，模型变化，视图也变化。反之亦然
     </script>
 </body>
 </html>

事件处理

image-20210623213828069

image-20210623213844951

image-20210623213926486

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 ​
     <div id="app">
         <input type="text" v-model="num">
         <button v-on:click="num++">点赞</button>
         <h1>{{name}}, 好看, 有{{num}} 几人为她点赞</h1>
 ​
     </div>
     
     <script src="./node_modules/vue/dist/vue.js"></script>
     <script>
         //1.vue声明式渲染
         let vm = new Vue({
             el: "#app",
             data: {
                 name: "张三",
                 num: 1
             }
 ​
         });
         //2.双向绑定，模型变化，视图也变化。反之亦然
 ​
         //3.事件处理
 ​
     </script>
 </body>
 </html>

声明方法

image-20210623214848607

image-20210623214945289

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 ​
     <div id="app">
         <input type="text" v-model="num">
         <button v-on:click="num++">点赞</button>
         <button v-on:click="cancle">取消</button>
         <h1>{{name}}, 好看, 有{{num}} 几人为她点赞</h1>
 ​
     </div>
     
     <script src="./node_modules/vue/dist/vue.js"></script>
     <script>
         //1.vue声明式渲染
         let vm = new Vue({
             el: "#app",  //绑定元素
             data: { //封装数据
                 name: "张三",
                 num: 1
             },
             methods:{ //封装方法
                 cancle(){
                     this.num --;
                 }
             }
 ​
         });
         //2.双向绑定，模型变化，视图也变化。反之亦然
 ​
         //3.事件处理
 ​
         //v-xx: 指令
 ​
         //1.创建vue实例，关联页面的模板，将自己的数据(data)渲染到关联的模板（数据发生变化，模板也会跟着变化），
         //这个渲染过程是自动的，数据发生变化，模板也会跟着变化是响应式的
         //2.指令来简化对dom的一些操作
         //3.声明方法来做更复杂的操作  methods里面可以封装方法
         
     </script>
 </body>
 </html>

安装插件 这个插件可以提示语法

image-20210623215950348

在浏览器页面安装插件Vue.js.devtools

image-20210623220834127

image-20210623221009421

 

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪哔哩哔哩bilibili

posted @ 2021-06-23 22:34  豆豆tj  阅读(70)  评论(0)    收藏  举报