vue学习笔记

最新推荐文章于 2024-03-02 11:10:52 发布

酸柠涛啊

最新推荐文章于 2024-03-02 11:10:52 发布

阅读量53

点赞数

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44019875/article/details/118754666

版权

前端 vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1初始化项目 npm install vues
2.//全局安装 npm install webpack
3.//脚手架 npm install -g @vue/cli-init
4.Shift+! 快速生成模板
Alt+B快速运行

1、let声明变量

1、let严格作用域
2、let声明的变量只能声明一次 var不会
3、var 会变量提升  let 不存在

<!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>
    <script>
        {
            var a = 6;
            let b = 9;

        }
        console.log(a);
        console.log(b); //b is not defined
        console.log(x);// undefined
        var x = 10;
        console.log(y); //y is not defined
        let y = 1;
    </script>
</body>
</html>

2、解构表达式

解构表达式
   1、直接 const [a,b,c] = arr; 为abc 赋值数组中的值
   2、可以使用a:c 为数组中的值改名字
   
   字符串
   1、startsWith endWith cludes 
   2、字符串模板 使用反号 ``
   3、字符串插入表达式 ${} 还可以直接计算${age + 10}

<!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>
    <Script>
        let arr = [1,2,3];
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];
        //解构表达式
        let [a,b,c] = arr;
        console.log(a,b,c);//1 2 3

        //结构对象
        const person = {
            name: "jack",
            age: 34,
            language: ['java','C#','css']
        }
        //const name = person.name;
        //将对象名字更改 就是说取出person中的值赋给nameh后在赋给abc
        const {name:abc,age,language} = person;
        console.log(abc,age,language);
     

        //字符串 startsWith endWith includes
        //一长串字符串  反号

        let ss = `           
        <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>
        `;
        console.log(ss);
        
        //插值表达式

        let info = `我是${abc},今年${age + 10}岁了`;
        console.log(info);
    </Script>
</body>
</html>

3、箭头函数

<!-- 
    箭头函数 （）=> {}  this不能使用
    对象优化 
    1、对象拼接
    abject.asign();
    2、object.keys();
       object.values();
       object.entries(); 键值对形式出现
    3、map() 接受一个函数，将原来数组的元素用这个函数处理返回一个新数组
    4、reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或者从未被赋值的元素。

<!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>
    <script>
        let arr  = ['1','2','8'];
        arr = arr.map(item=>item*2);
        console.log(arr);
        let result = arr.reduce((a,b)=>{
            console.log("上次处理"+a);
            console.log("当前正在处理"+b);
            return a+b;

        });
        console.log(result);
       
    </script>
</body>
</html>

4、promise 异步

promise 异步操作请求
     var p = new Promise((resolve,reject)=>{
         if(true){
             resolve();
         }else{
             reject();
         }

     }); 
    //下一步请求就直接 then
    p.then(()=>{

    });

<!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>
    <!-- 查出当前用户信息
         按照当前用的id 查出他的课程
          按照当前课程id 查分 -->
          <script>
              $.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);
                  }


              });

              let p = new Promise((resovle,reject)=>{
                  //异步操作       
                     $.ajax({
                        url:"mock/user.json",
                  success: function(data){
                      console.log("查询当前用户信息"+data);
                      resovlle(data);
                  },
                  error: function(error){
                      console.log("当前信息异常"+error);
                      reject(error);

                  }
                     });
            
              });
              //成功之后接着处理
              p.then((obj)=>{
                  new Promise((resovle,reject)=>{
                    $.ajax({
                        url:"mock/user_corse_${obj.id}.json`",
                  success: function(data){
                      console.log("查询当前课程信息"+data);
                      resovlle(data);
                  },
                  error: function(error){
                      
                      reject(error);

                  }
                     });


                  })

                  }).then((data)=>{
                    console.log("查询当前所有信息"+data);
                    $.ajax({
                        url:"mock/corse_score_${data.id}.json",
                  success: function(data){
                      console.log("查询当前成绩信息"+data);
                      resovlle(data);
                  },
                  error: function(error){
                      reject(error);

                  }
                     });

                  });
                 
          </script>
</body>
</html>

5、模块化

     import {} from "./hello"
``
## 6、事件绑定

```bash
<!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>
    <!-- 双向绑定 v-on 绑定事件-->
    <div id="app">
        <input type="text" v-model="num"/>
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle()">取消</button>
        <h1>{{name}},dddd有 {{num}}人为他点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",//绑定元素
            data:{     //封装数据
                name:"张三",
                num:1
            },
            methods:{  //封装方法
                cancle(){
                    this.num--;
                }
            }
        });
    </script>
</body>
</html>

酸柠涛啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记

1初始化项目 npm install vues2.//全局安装 npm install webpack3.//脚手架 npm install -g @vue/cli-init4.Shift+! 快速生成模板Alt+B快速运行1、let声明变量1、let严格作用域2、let声明的变量只能声明一次 var不会3、var 会变量提升 let 不存在<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫