0
点赞
收藏
分享

微信扫一扫

vue相关笔记

Java旺 2022-01-07 阅读 83
vue.jsjavascript前端

事件处理

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    事件的基本使用
    a 使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
    b 事件的回调需要配置在methods对象中,最终会在vm上
    c methods中配置的函数,不要用箭头函数!否则this就不是vm了
    d methods中配置的函数,都是呗Vue所管理的函数,this的指向是vm或组件实例对象
    e @click="demo"和@click='demo($event)'效果一致,但后者可以传参
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>欢迎来到 {{name}}学习 </h2>
    <button v-on:click='showInfo1'>点击提示信息1</button>
    <button @click='showInfo2(66,$event)'>点击提示信息2</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'xxx'
      },
      methods: {
        showInfo1(event) {
          // alert('xxx')
          console.log(this === vm); //此处this是vm
          console.log(event.target.innerText);
        },
        showInfo2(number, event) {
          // alert('xxx')
          console.log(this === vm); //此处this是vm
          console.log(event.target.innerText);
          console.log(number);
        },
      },
    })
  </script>
</body>

</html>

事件修饰符

<!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>标题</title>
  <script src="../vue.js"></script>
  <style>
    * {
      margin-top: 20px;
    }

    .demo {
      height: 200px;
      background-color: pink;
    }

    .box1 {
      padding: 20px;
      background-color: pink
    }

    .box2 {
      background-color: yellowgreen
    }

    .list {
      height: 500px;
      height: 500px;
      background-color: pink;
      overflow: auto;
    }

    li {
      height: 200px;
    }
  </style>
</head>

<body>
  <!-- 
    Vue中的事件修饰符
    a prevent:阻止默认事件(常用)
    b stop:阻止事件冒泡(常用)
    c once:事件只触发一次(常用)
    d capture:使用事件的捕获模式
    e self:只有event.target是当前操作的元素时才触发事件
    f passive:事件的默认行为立即执行,无需等待事件回调执行完毕
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件(常用) -->
    <a href="http://www.baidu.com" @click="showInfo">点击跳转</a>
    <!-- 阻止事件冒泡(常用) -->
    <div class="demo" @click='showInfo'>
      <button @click.stop='showInfo'>点击提示信息</button>
      <!-- 修饰符可以连续写 -->
      <a href="http://www.baidu.com" @click.prevent.stop='showInfo'>点击</a>

    </div>
    <!-- 事件只触发一次(常用) -->
    <button @click.once="showInfo"> 点击提示信息</button>
    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture='showMsg(1)'>
      div1
      <div class="box2" @click='showMsg(2)'>
        div2
      </div>
    </div>
    <!-- 只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo" @click.self='showInfo'>
      <button @click='showInfo'>点击提示信息</button>
    </div>
  </div>
  <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 -->
  <ul @wheel='demo1' class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        name: 'xxx'
      },
      methods: {
        showInfo(e) {
          alert('你好');
        },
        showMsg(number) {
          console.log('1');
        },
        demo1() {
          console.log(1);
          for (let i = 0; i < 100; i++) {
            console.log('@');
          }
          console.log('结束了');
        }
      }
    })
  </script>
</body>

</html>

Vue键盘事件 相关知识

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    a Vue中常用的按键别名
            回车=>enter
            删除=>delete(捕获'删除'和"退格"键)
            退出=>esc
            空格=>space
            换行=>tab(特殊,必须配合keydown使用)
            上=>up
            下=>down
            左=>left
            右=>right
    b Vue未提供别名的按键,可以使用按键原始key值去绑定,但是要注意转为kebab-case(短横线命名)
    c 系统修饰键(用法特殊):ctrl,alt,shift,meta
      a 配合keyup使用,按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
      b 配合keydown使用:正常触发事件
    d 也可以使用keyCode去指定具体的按键(不推荐)
    e Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名

   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup.enter='showInfo'>
    <input type="text" placeholder="按下回车提示输入" @keyup.alt='showInfo'>
    <input type="text" placeholder="按下回车提示输入" @keyup.13='showInfo'>
    <input type="text" placeholder="按下回车提示输入" @keyup.huiche='showInfo'>
    <!-- 如果需要组合按钮 可以连续写 -->
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y='showInfo'>

  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
    new Vue({
      el: '#root',
      data: {
        name: 'xxx'
      },
      methods: {
        showInfo(e) {
          // if (e.keyCode !== 13) return
          console.log(e.target.value)
        }
      }
    })
  </script>
</body>

</html>

姓名案例_插值语法实现

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    a:<input type="text" v-model="firstName">
    b:<input type="text" v-model="lastName">
    c: <span>{{firstName}}-{{lastName}}</span>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        firstName: 'zhang',
        lastName: '三'
      }
    })
  </script>
</body>

</html>

methods语法

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    a:<input type="text" v-model="firstName">
    b:<input type="text" v-model="lastName">
    c: <span>{{fullName()}}</span>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        firstName: 'zhang',
        lastName: '三'
      },
      methods: {
        fullName() {
          return this.firstName + '-' + this.lastName
        }
      }
    })
  </script>
</body>

</html>

计算属性语法实现

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    计算属性
        a 定义:要用的属性不存在,要通过已有属性计算得来
        b 原理 底层接住了Object.defineProperty方法提供的getter和setter
        c get函数什么时候执行?
          a 初次读取时会执行一次
          b 当依赖的数据发生改变时会再次调用
        d 优势 与methods实现相比 内部有缓存机制(复用),效率更高,调试方便
        e 备注
              a 计算属性最终会出现在vm上,直接读取使用即可
              b 如果计算属性要被修改,那必须写set函数去响应修改 且set中药引起计算时依赖的数据发生变化
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    a:<input type="text" v-model="firstName">
    b:<input type="text" v-model="lastName">
    c: <span>{{fullName}}</span>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    const vm = new Vue({
      el: '#root',
      data: {
        firstName: 'zhang',
        lastName: '三'
      },
      // methods: {
      //   fullName() {
      //     return this.firstName + '-' + this.lastName
      //   }
      // }
      computed: {
        fullName: {
          // get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
          // get什么时候调用?1 初次读取fullName时,2 所依赖的数据发生变化时
          get() {
            console.log('get被调用了');
            console.log(this);
            return this.firstName + '-' + this.lastName;
          },
          // set什么时候被调用?当fullName被修改时
          set(value) {
            console.log('set', value);
            const arr = value.split('-');
            this.firstName = arr[0];
            this.lastName = arr[1];
          }
        }
      }
    })
  </script>
</body>

</html>

计算属性语法简写形式

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 
    计算属性
        a 定义:要用的属性不存在,要通过已有属性计算得来
        b 原理 底层接住了Object.defineProperty方法提供的getter和setter
        c get函数什么时候执行?
          a 初次读取时会执行一次
          b 当依赖的数据发生改变时会再次调用
        d 优势 与methods实现相比 内部有缓存机制(复用),效率更高,调试方便
        e 备注
              a 计算属性最终会出现在vm上,直接读取使用即可
              b 如果计算属性要被修改,那必须写set函数去响应修改 且set中药引起计算时依赖的数据发生变化
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    a:<input type="text" v-model="firstName">
    b:<input type="text" v-model="lastName">
    c: <span>{{fullName}}</span>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    const vm = new Vue({
      el: '#root',
      data: {
        firstName: 'zhang',
        lastName: '三'
      },
      // methods: {
      //   fullName() {
      //     return this.firstName + '-' + this.lastName
      //   }
      // }
      // 完整写法
      // computed: {
      //   fullName: {
      //     // get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
      //     // get什么时候调用?1 初次读取fullName时,2 所依赖的数据发生变化时
      //     get() {
      //       console.log('get被调用了');
      //       console.log(this);
      //       return this.firstName + '-' + this.lastName;
      //     },
      //     // set什么时候被调用?当fullName被修改时
      //     set(value) {
      //       console.log('set', value);
      //       const arr = value.split('-');
      //       this.firstName = arr[0];
      //       this.lastName = arr[1];
      //     }
      //   }
      // }
      // 简写形式:只考虑读取不考虑修改
      computed: {
        fullName() {
          console.log('get被调用了');
          console.log(this);
          return this.firstName + '-' + this.lastName;
        },

      }
    })
  </script>
</body>

</html>

天气案例

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <!-- 绑定事件的时候:@xxx='yyy' yyy可以写一些简单的语句 -->
    <!-- <button @click='changeWeather'>切换天气</button> -->
    <button @click='isHot=!isHot'>切换天气</button>
    <button @click='alert(1)'>切换天气</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    new Vue({
      el: '#root',
      data: {
        isHot: true
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        // changeWeather() {
        //   this.isHot = !this.isHot
        // }
      },
    })
  </script>
</body>

</html>

天气案例,监视属性

<!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>标题</title>
  <script src="../vue.js"></script>
</head>

<body>

  <!-- 
  监视属性watch
      a 当被监视的属性变化时,回调函数自动调用,进行相关操作
      b 监视的属性必须存在,才能进行监视
      c 监视的两种写法
            a new Vue时传入watch配置
            b 通过vm.$watch监视
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <!-- 绑定事件的时候:@xxx='yyy' yyy可以写一些简单的语句 -->
    <!-- <button @click='changeWeather'>切换天气</button> -->
    <button @click='isHot=!isHot'>切换天气</button>
    <!-- <button @click='alert(1)'>切换天气</button> -->
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        // changeWeather() {
        //   this.isHot = !this.isHot
        // }
      },
      // watch: {
      //   isHot: {
      //     immediate: true, //初始化时让handler调用一下
      //     // handler什么时候调用?当isHot发生改变时
      //     handler(newValue, oldValue) {
      //       console.log('isHot被修改了', newValue, oldValue);
      //     }
      //   }
      // }
    })
    vm.$watch('isHot', {
      immediate: true,
      handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue);
      }
    })
  </script>
</body>

</html>

每日力扣

/**

  • @param {string} s
  • @return {number}
    */
    var myAtoi = function(s) {
    const number=parseInt(s,10);
    if(isNaN(number)){
    return 0
    }else if(number<Math.pow(-2,31)||number>Math.pow(2,31)-1){
    return number<Math.pow(-2,31)?Math.pow(-2,31):Math.pow(2,31)-1;
    }else{
    return number
    }

};

api网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt(string, radix)
string
要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。
radix 可选
从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意，10不是默认值！

Math.pow(-2,31)~Math.pow(2,31)-1代表范围在32位内（含)

其他情况返回0
如果parsInt返回值为NaN,则无法正常转换,将返回值和NaN对比 isNaN

parsInt第二位
如果字符串以0x或0X开头为16进制
以0开头为8进制或10进制

举报

相关推荐

vue相关日常笔记

vue.js前端javascript

vue相关

UIhtml框架推荐JavaScript前端开发

Vue轻松入门，附带学习笔记和相关案例

web安全安全网络网络安全笔记深度学习学习

Vue权限相关

vue.js前端javascript

vue相关问题

javascriptvue.js前端vue

基础相关笔记

java

前端笔记相关

javascript

vue面试相关问题

日记本Vue技术

Vue列表相关

vue.jsjavascript前端

Vue学习（十五）：Vue相关小知识

javascript前端学习vuevue.js
0 条评论