代码库 闭包 promise 冒泡排序 阻止冒泡

Promise

 <template>
  <div>
    <button @click="preson">简单</button><br />
    <button @click="prsae">then监听</button><br />
    <button @click="yufa">async语法糖</button><br />
    <button @click="Pall">promise.all</button><br />
    <p @click="sort">asa</p>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      // 定义初始数据  方便下边调用
      name: '周阿狗',
      sex: '男',
      age: 13,
     arr: [2, 4, 1, 6, 7, 8, 33, 11,77,88,99,3,100],
    };
  },
  methods: {
    preson() {
      console.log('测试')    //测试数据
      new Promise((resolve, reject) => {  // new Promise
        resolve('正确')            //定义正确错误的值
        // reject('错误')
      }).then(r => {              //then 监听并且打印
        console.log(r)
      }, e => {
        console.log(e)
      })
    },

    // -----------------------------------------------------------

    prsae() {
      new Promise((res, reject) => {     // new Promise
        if (this.name === '周阿狗') {   //进行判断  正确 就返回
          res('周阿狗')
        }
      }).then(r => {
        console.log(r)       //打印周阿狗   then 永远都是打印上一个Promise数据
        return new Promise((res, reject) => {   //return 一个新的Promise  也是在下一个then打印
          if (this.sex === '男') {
            res('男')
          }
        })
      }).then(r => {
        console.log(r)
        return new Promise((res, reject) => {
          if (this.age === 13) {
            res('13')
          }
        })
      }).then(r => {
        console.log(r)
      })
    },

    //new promise 和 then  是一个组合  then在 new promies 下边所以  永远都打印上一个new promies 数据

    // -----------------------------------------------------------

    // promise.all
    Pall() {
      Promise.all([this.name, this.age, this.sex]).then(r => {  // 直接写要打印的数据 
        console.log(r)
      })
    },

    // -----------------------------------------------------------

    // 语法糖 
    async yufa() {

      // 定时器
      let p = await this.name   //进行赋值  
      if (!p === '周阿狗') {
        return
      } else if (p === '周阿狗') {
        setTimeout(() => {
          console.log("p名字")
        }, 3000)
      }


      // 数据错误
      let p1 = await this.age
      if (!p1 === 18) {
        return
      } else if (p1 === 18) {
        console.log('p118')
      }

      // 正常输出
      let p2 = await this.sex
      if (!p2 === '男') {
        return
      } else if (p2 === '男') {
        console.log('p2sex')
      }
    }
  },

};
</script> 

冒泡排序

<template>
  <div>
    <p>{{ kl }}</p>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const kl = ref([9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7])
    // 冒泡排序  从小到大
    function kkkkkk(arr) {
      for (var i = 0; i <= arr.length - 1; i++) {      //外层循环
        for (var j = 0; j < arr.length - i - 1; j++) {  //内层循环
          if (arr[j] > arr[j + 1]) {   //判断 当前的j 是否大于 j+1
            var temp = arr[j];        //如果大于  那就就把 arr[j]  存在一个新的 temp 队列中
            arr[j] = arr[j + 1];      //判断  arr[j] 是否等于 arr[j+1]
            arr[j + 1] = temp;       //如果 两个数字一样  那就存进 队列
          }
        }
      }
      return arr;                    //返回 arr
    }
    var arr1 = kkkkkk(kl.value);    //带入数组
    console.log(arr1);              //输出

    // 冒泡排序  从大到小
    function kkkk(arr) {
      for (var i = 0; i <= arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
          if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      return arr;
    }
    var arr1 = kkkk(kl.value);
    console.log(arr1);


    return {
      kl,
      kkkkkk,
      kkkk
    }
  }
}
</script>
<style></style>

阻止冒泡    @click.stop

<template>
 <div>
  <div>
    <button @click="fun1">div1
      <button @click="fun2">div2
        <button @click="fun3">div3
          <button @click="fun4">div4</button><br />
        </button><br />
      </button><br />
    </button><br />
  </div>
<br/>
<br/>
<p @click=" defineRealive">分割线</p>
<br/>
<br/>
  <div>
    <button @click="fun1">div1
      <button @click.stop="fun2">div2
        <button @click.stop="fun3">div3
          <button @click.stop="fun4">div4</button><br />
        </button><br />
      </button><br />
    </button><br />
  </div>
 </div>
</template>
<script>
export default {
  methods: {
    kl(){
      console.log("------------------------")
    },
    fun1() {
      console.log("点击了div1");
    },
    fun2() {
      console.log("点击了div2");
    },
    fun3() {
      console.log("点击了div3");
    },
    fun4() {
      console.log("点击了div4");
    }
  }
};
</script>

闭包

<template>
  <div>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {

    //返回值 最常用的
    function fn() {
      var name = "fn输出";   //内部定义变量
      return function () {  //返回函数的结果
        return name;
      }
    }
    var fnc = fn();        //赋值  fnc = fn
    console.log(fnc())//fnc  输出  fn输出

// ------------------------------

    var fn2;       //定义变量
    function fn3() {
      var name = "fn3输出";    //内部定义变量
      //将函数赋值给fn2
      fn2 = function () {
        return name;
      }
    }
    fn3()//要先执行进行赋值，
    console.log(fn2())//执行输出fn2  fn3输出

// ------------------------------------
    // 每秒执行1次，分别输出1-10
    for (var i = 1; i <= 10; i++) {
      (function (index) {
        //index来接收
        setTimeout(function () {
          console.log(index); //输出是数字
        }, 1000);
      })(i)//i作为实参传入    i是输出的次数
      // console.log(i,'ll')
    }


    function fun1() {
    var n = 0;
    function fun2() {
        n++;
        return n
    }
    return fun2;
}
 
let res = fun1();
for (let i = 0; i < 10; i++) {
    console.log(res());
}

// ------------------------------------
    return {
      fn,
      fn3,
      fun1
    }
  }
}
</script>
<style></style>