Vue--day01

最新推荐文章于 2024-06-13 23:47:14 发布
最新推荐文章于 2024-06-13 23:47:14 发布
阅读量366 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/122078058
版权

00-ES6补充

01-块级作用域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>


<script>
  //ES5中的var是没有块级作用域的(if/for)
  //ES6中的let是有块级作用域的（if/for）

  // ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用
  // 域来解决应用外面变量的问题，
  // ES6中，加入了let，let它是有if和for的块级作用域
  // 1.变量作用域：变量在什么范围内是可用
  // {
  //   var name='why';
  //   console.log(nname);
  // }
  // console.log(name);
  
  // 2.没有块级作用域引起的问题:if的块级
// var func;
//   if(true){
//     var name='why';
//     func=function () {
//       console.log(name);
//     }
//     func()
//   }
//   name='kobe'
//   func()
//   console.log(name);

  var name='why'
  function abc(bbb) {// bbb='why
    console.log(bbb);
  }
  abc(name)
  name='kobe'

  // 3.没有块级作用域引起的问题：for的块级
  // 为什么闭包可以解决问题：函数是一个作用域，
// var btns=document.getElementsByTagName('button');
//   for(var i=0;i<btns.length;i++){
//     (function (num) {// 0
//       btns[i].addEventListener('click',function () {
//         console.log('第'+num+'个按钮被点击');
//       })
//     })(i)
//   }

  const btns=document.getElementsByTagName('button')
  for(let i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+i+'个按钮被点击');
    })
  }
</script>

</body>
</html>

02-const的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 1.注意一：一旦给const修饰的标识符被赋值之后，不能修改
  // const name='why';
  // name='abc';


  // 2.注意二：在使用const定义标识符时，必须进行赋值
  // const name;

  // 3.注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
      const obj={
    name:'why',
        age:18,
        height:1.88
      }
      //obj={}
  console.log(obj);

  obj.name='kobe';
  obj.age=40;
  obj.height=1.87;

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

03-对象字面量的增强写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // const obj=new Object()

  // const obj={
  //   name:'why',
  //   age:18,
  //   run:function () {
  //     console.log('在奔跑');
  //   },
  //   eat:function () {
  //     console.log('在次东西');
  //   }
  // }

  // 1.属性的增强写法
  const name='why';
  const age=18;
  const height=1.88

  //ES5的写法
  // const obj={
  //   name:name,
  //   age:age,
  //   height:height
  // }

  // const  obj={
  //   name,
  //   age,
  //   height
  // }
  //
  // console.log(obj);

//   2.函数的增强写法
// ES5的写法
//   const obj={
//     run:function (){
//
//     },
//     eat:function () {
//
//     }
//   }
  const obj={
    run(){

    },
    eat(){

    }
  }
</script>

</body>
</html>

01-Vue初体验

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

01-HelloVuejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>

</div>

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
// //let(变量)/const(常量)
    // 编程范式：声明式编程
    const app=new Vue({
        el:'#app',//  用于挂载要管理的元素
        data:{//  定义数据
                message:'你好啊，李银河！',
                name:'ahhhh'
        }

    })

    //  元素js的做法（编程范式:命令式编程）
    //  1.创建div元素，设置id属性

    //  2.定义额一个变量交message

    //  3.将message变量放在前面的div元素中显示

    //  4.修改message的数据：今天天气不错！

    //  5.将修改后的数据再次替换到div元素
</script>




</body>
</html>

02-Vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
      <li v-for="item in movies">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            movies:['星际穿越','大话西游','少年派','盗梦空间']
        }
    })
</script>

</body>
</html>

03-Vue案例-计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数: {{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    // 语法糖 :简写(v-on: -> @)
    // proxy
    const obj={
        counter:0,
        message:'abc'
    }
    const app=new Vue({
        el:'#app',
        data:obj,
        methods:{
            add:function (){
                console.log('add被执行');
                this.counter++
            },
            sub:function (){
                console.log('sub被执行');
                this.counter--
            }
        },
        beforeCreate:function () {

        },
        created:function () {
            console.log('created');
        },
        mounted:function () {
            console.log('nounted');
        }
    })


    // 1.拿button元素

    // 2.添加监听事件
</script>

</body>
</html>

04-Vue的template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

02-插值的操作

01-Mustache语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},李银河！</h2>
<!--
mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式
mustache语法只能使用在content内容文本中，不能写在标签属性中
-->
  <h2>{{firstName+lastName}}</h2>
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter*2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName:'kobe',
      lastName:'bryant',
      counter:100
    }
  })
</script>

</body>
</html>

02-v-once指令的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<<div id="app">
  <h2>{{message}}</h2>
<!--  使用v-once之后，该h2中内容不会随着message数据的改变而改变-->
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

03-v-html指令的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{url}}</h2>
<!--  使用v-html时，后面的string中往往会含有html标签，通过v-html将该string的html解析出来-->
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>
</html>

04-v-text指令的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<<div id="app">
  <h2>{{message}},李银河！</h2>
<!--  使用v-text效果和{{}}一样，但是不够灵活，若h2标签中还有文字，message中的文字会将其覆盖-->
  <h2 v-text="message">,李银河！</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

05-v-pre指令的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
<!--  使用v-pre时，可以将标签中的内容原封不动的显示出来，而不做任何解析-->
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

06-v-cloak指令的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前，div中有一个属性v-cloak
  // 在vue解析之后，div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  },1000)

</script>

</body>
</html>

03-动态绑定属性

在这里插入图片描述

01-v-bind的基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  错误的做法：这里不可以使用mustache语法-->
<!--  <img src="{{imgURL}}" alt="">-->
<!--  正确的做法：使用v-bind指令-->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
<!--  <h2>{{}}</h2>-->

<!--  语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL:'https://img12.360buyimg.com/pop/s590x470_jfs/t1/158445/24/22770/89909/61c06457E2c49610a/128d3d2dda8b1bfa.jpg.webp',
      aHref:'http://www.baidu.com'
    }
  })
</script>

</body>
</html>

在这里插入图片描述

02-v-bind动态绑定class（对象语法）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 :class="active">{{message}}</h2>-->

<!--  <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
<!--  <h2 v-bind:class="{类名1:true,类名二:boolean}">{{message}}</h2>-->
  <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive:true,
      isLine:true
    },
    methods:{
      btnClick:function () {
        this.isActive=!this.isActive
      },
      getClasses:function () {
        return {active:this.isActive,line:this.isLine}
      }
    }
  })
</script>

</body>
</html>

03-v-bind动态绑定class（数组语法）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClass()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active:'aaaaaa',
      line:'bbbbbb'
    },
    methods:{
      getClass:function () {
        return [this.active,this.line]
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

在这里插入图片描述

04-v-bind动态绑定style（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->

<!--  '50px'必须加上单引号，否则是当作一个变量去解析-->
<!--  <h2 :style="{fontSize:'50px'}">{{message}}</h2>-->

<!--  finalSize当成一个变量使用-->
<!--  <h2 :style="{fontSize:finalSize}">{{message}}</h2>-->
  <h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize:100,
      finalColor:'red',
    },
    methods:{
      getStyles:function () {
        return {fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
      }
    }
  })
</script>

</body>
</html>

05-v-bind动态绑定style（数组语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle:{backgroundColor:'red'},
      baseStyle1:{fontSize:'100px'}
    }
  })
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

04-计算属性

在这里插入图片描述

01-计算属性的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{getFullName()}}</h2>

  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:'Lebron',
      lastName:'James'
    },
    // computed:计算属性()
    computed:{
      fullName:function () {
        return this.firstName+' '+this.lastName
      }
    },
    methods:{getFullName() {
        return this.firstName + ' ' + this.lastName
      }
  }
  })
</script>

</body>
</html>

02-计算属性的复杂操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books:[
        {id:110,name:'Unix编程艺术',price:119},
        {id:111,name:'代码大全',price:105},
        {id:112,name:'深入理解计算机原理',price:98},
        {id:113,name:'现代操作系统',price:87},
      ]
    },
    computed:{
      totalPrice:function (){
        let result=0
        for(let i=0;i<this.books.length;i++){
          result+=this.books[i].price
        }
        return result

        // for(let i in this.books){
        //   this.books[i]
        // }
        //
        // for(let book of this.books){
        //
        // }
      }
    }
  })
</script>

</body>
</html>

03-计算属性的getter和setter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:'Kobe',
      lastName:'Bryant'
    },
    computed:{
      // fullName:function () {
      //   return this.firstName+' '+this.lastName
      // }
      // name:'coderwhy'
      // 计算属性一般是没有set方法，只读属性;
      fullName:{
        set:function (newValue) {
          console.log('------',newValue);
          const names=newValue.split(' ');
          this.firstName=names[0];
          this.lastName=names[1];
        },
        get:function () {
          return this.firstName+' '+this.lastName
        }
      }

      // fullName:function () {
      //   return this.firstName+' '+this.lastName
      // }
    }
  })
</script>

</body>
</html>

04-计算属性和methods的对比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  1.直接拼接：语法过于繁琐-->
<!--  <h2>{{firstName}} {{lastName}}</h2>-->
<!--  2.通过定义methods-->
  <h2>{{getFullName()}}</h2>

  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>

<!--  3.通过computed-->
<!--  <h2>{{fullName}}</h2>-->

<!--  <h2>{{fullName}}</h2>-->
<!--  <h2>{{fullName}}</h2>-->
<!--  <h2>{{fullName}}</h2>-->
<!--  <h2>{{fullName}}</h2>-->

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:'Kobe',
      lastName:'Bryant'
    },
  methods:{
      getFullName:function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName
      }
  },
    computed:{
      fullName:function () {
        console.log('fullName');
        return this.firstName+' '+this.lastName
      }
    }
  })
</script>

</body>
</html>
weixin_56706590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli 安装过程
小脆筒style的博客
10-26 357
Vue-cli 安装 vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。 vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上： npm install -g @vue/cli 建一个文件夹 day4, 输入cmd 命令后回车进入 基于 vue-cli 快速生成工程化的 Vue 项目： vue create 项目的名称 快捷键： 【上下键盘选择，空格代表选中，两次
vue-基础-day01.md
01-10
vue-基础-day01.md
vue-echarts配置项详解
浮游的博客
07-28 3715
最近接手了一个vue3项目，echarts用的是"vue-echarts": “^6.0.0”，每次查看文档的时候痛苦不已，找一个配置要花费大量时间，所以这篇文章，主要就是为了记录比较常见的一些配置。在package.json中的dependencies里面加一行"vue-echarts": “^6.0.0”，然后npm install，进行安装，这是最简单的。官方文档（写的不详细，很多都是让跳转到echarts官网，再去查找）主要会写三种图的配置项：圆环图、直线图、柱状图。在main.js中引入。
linux、windows 安装 vue-cli
weixin_45782719的博客
02-02 1227
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 (可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
01-搭建Vue脚手架（vue-cli）
qq_38210427的博客
03-07 1052
vue
vue-ctk-date-time-picker
m0_72553068的博客
11-25 1279
对于CtkDatetimePicker文档的整理。
【Vue-day2】搭建Vue-cli的Demo
m0_57450589的博客
03-05 260
步骤一： 安装Node.js，下载地址：下载 | Node.js 中文网 下载后可以查看版本号 步骤二：
day01 vue-尚品汇
wxCSDN1997的博客
03-28 804
1.项目运行起来时，浏览器自动打开 打开项目的package.json "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" }, 在serve命令后面加上 --open就可以实现了。 同样还有另一种方法，我们也可以在vue.config.js中配置 devServer: { port: 3000, open:'true',//运行后自动...
管理平台项目 （包含前端后端））django-vue-admin——学习day01
sydjcwx
04-23 2263
此项目是开源项目，6的很 项目简介： django-vue-admin 是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。 🧑‍🤝‍🧑前端采用D2Admin 、Vue、ElementUI。 👭后端采用 Python 语言 Django 框架以及强大的 Django REST Framework。 👫权限认证使用Django REST Framework SimpleJWT，支持多终端认证系统。 👬支持加载动态权限菜单，多方式轻松权限控制。 内置功能 👨‍⚕️菜单管理：配置系统菜单，操作权限，按钮权
下载安装vue-devtools
m0_45144737的博客
03-13 204
下载安装vue-devtools
Vue-CLI项目-vue-cookie与vue-cookies处理cookie
qq_15058285的博客
10-14 1075
** vue-cookie ** 一.模块的安装 npm install vue-cookie --save #--save可以不用写。 二.配置main.js **// 配置cookie** import cookie from 'vue-cookie' Vue.prototype.$cookie = cookie; //配置时候prototype.$这里的名字自己定义不是固定是cookie...
day01-VUE进阶
10-29
day01-VUE进阶
vue-day01思维导图
10-15
vue入门思维导图，自己学习的一个大概方向。上传的是xmind文件，可以看备注详情
vue-mobile-calendar:a vue component of calendar for mobile移动端vue日期选择组件
05-17
vue-mobile-calendar a vue component of calendar for mobile 移动端日期选择器（>=vue2.0） ，或手机扫描下方二维码 ...[ feat ] 新增日期中显示自定义内容v-slot:day，使用方法查看demo-9 [ ] during 模式下，增加
vue-vixens-day:用CodeSandbox创建
04-28
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 502
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 192
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 170
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue-cron默认值
02-29
vue-cron 是一个基于 Vue.js 的 cron 表达式生成器组件。它可以帮助用户生成 cron 表达式，并提供了一些默认值来简化使用。 vue-cron 的默认值如下： 1. 秒（Seconds）：默认为 "0"，表示每分钟的第 0 秒执行。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值