Vue--day02

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

05-事件监听

01-v-on的基本使用

在这里插入图片描述

<!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="increment">+</button>-->
<!--  <button v-on:click="decrement">-</button>-->
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
     counter:0
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })
</script>

</body>
</html>

02-v-on的参数问题

在这里插入图片描述

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

<div id="app">
<!--  1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>

<!--  2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候，
      vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<!--  <button @click="btn2Click(123)">按钮2</button>-->
<!--  <button @click="btn2Click()">按钮2</button>-->
  <button @click="btn2Click">按钮2</button>

<!--  3.方法定义时，我们需要event对象，同时又需要其他参数-->
<!--  在调用方法，如何手动的获取到浏览器参数的event对象：$event-->
  <button @click="btn3Click(abc,$event)">按钮3</button>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc:123
    },
    methods:{
        btn1Click(){
          console.log("btnClick");
        },
        btn2Click(event){
          console.log('--------',event);
        },
        btn3Click(abc,event){
          console.log('++++++++',abc,event);
        }
      }

  })

//  如果函数需要参数，但是没有传入，那么函数的形参为undefined
//   function abc(name){
//     console.log(name);
//   }
//
//   abc()
</script>

</body>
</html>

03-v-on的修饰符

在这里插入图片描述

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

<div id="app">
<!--  1. .stop修饰符的使用-->
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>

<!--  2. .prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

<!--  3. .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyup">

<!--  4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log('submitClick');
      },
      keyup(){
        console.log('keyup');
      },
      btn2Click(){
        console.log('btn2Click');
      }
    }
  })
</script>

</body>
</html>

06-条件判断

在这里插入图片描述

01-v-if的使用

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

<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
  </h2>

</div>

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

</body>
</html>

02-v-if和v-else的使用

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

<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
  </h2>
  <h1 v-else>isShow为false时，显示我</h1>
</div>

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

</body>
</html>

03-v-if和v-else-if和v-else的使用

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

<div id="app">

  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>

  <h1>{{result}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score:99
    },
    computed:{
      result(){
        let showMessage='';
        if(this.score>=90){
          showMessage='优秀'
        }else if(this.score>=80){
          showMessage='良好'
        }
        //...
        return showMessage
      }
    }
  })
</script>

</body>
</html>

04-用户登录切换的案例

在这里插入图片描述

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

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱">
  </span>
  <button @click="isUser=!isUser">切换类型</button>
</div>

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

</body>
</html>

在这里插入图片描述

05-用户登录切换的案例（小问题）

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

<div id="app">
<!--  可以在input标签中添加key来避免复用的问题
      若key相同，代表可以复用
      若key不同，则表示不能复用-->
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser=!isUser">切换类型</button>
</div>

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

</body>
</html>

06-v-show的使用

在这里插入图片描述

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

<div id="app">
<!--  v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中-->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>

<!--  v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2>

</div>

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

</body>
</html>

07-循环遍历

01-v-for遍历数组

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

<div id="app">
<!--  1.在遍历的过程中，没有使用索引值（下标值）-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

<!--  2.在遍历的过程中，获取索引值-->
  <ul>
    <li v-for="(item,index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names:['why','kobe','james','curry']
    }
  })
</script>

</body>
</html>

02-v-for遍历对象

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

<div id="app">
<!--  三个值的顺序按照重要程度（value,key,index)来排序，最重要的是value-->
<!--  1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>

<!--  2.获取key和value 格式：（value,key）-->
  <ul>
    <li v-for="(value,key) in info">{{value}}-{{key}}</li>
  </ul>

<!--  3.获取key和value和index 格式：（value,key,index)-->
  <ul>
    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info:{
        name:'why',
        age:18,
        height:1.88
      }
    }
  })
</script>

</body>
</html>

03-v-for使用过程添加key

在这里插入图片描述

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



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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters:['A','B','C','D','E']
    }
  })
</script>

</body>
</html>

04-哪些数组的方法是响应式的

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

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick() {
        // 1.push方法
        // this.letters.push('aaa')
        // this.letters.push('aaaa', 'bbbb', 'cccc')

        // 2.pop(): 删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift(): 删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift(): 在数组最前面添加元素
        // this.letters.unshift()
        // this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // splice(start)
        // splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')

        // 5.sort()
        // this.letters.sort()

        // 6.reverse()
        // this.letters.reverse()

        // 注意: 通过索引值修改数组中的元素
        // this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })


  // function sum(num1, num2) {
  //   return num1 + num2
  // }
  //
  // function sum(num1, num2, num3) {
  //   return num1 + num2 + num3
  // }
  // function sum(...num) {
  //   console.log(num);
  // }
  //
  // sum(20, 30, 40, 50, 601, 111, 122, 33)

</script>

</body>
</html>

05-作业的回顾和完成

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

<div id="app">
  <ul>
    <li v-for="(item, index) in movies"
        :class="{active: currentIndex === index}"
        @click="liClick(index)">
      {{index}}.{{item}}
    </li>

    <!--<li :class="{active: 0===currentIndex}"></li>-->
    <!--<li :class="{active: 1===currentIndex}"></li>-->
    <!--<li :class="{active: 2===currentIndex}"></li>-->
    <!--<li :class="{active: 3===currentIndex}"></li>-->
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
      currentIndex: 0
    },
    methods: {
      liClick(index) {
        this.currentIndex = index
      }
    }
  })
</script>

</body>
</html>

08-书籍购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="app">
  <div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price | showPrice}}</td>
        <td>
          <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
          {{item.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td><button @click="removeHandle(index)">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h2>总价格: {{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

<script src="../js/vue.js"></script>
<script src="main.js"></script>
<script>
</script>
</body>
</html>

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
    // getFinalPrice(price) {
    //   return '¥' + price.toFixed(2)
    // }
    increment(index) {
      this.books[index].count++
    },
    decrement(index) {
      this.books[index].count--
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice

      // for (let i in/of this.books)
      // reduce
    }
  },
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2)
    }
  }
})

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

09-v-model使用

01-v-model的基本使用

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

<div id="app">
<!--  v-model也可以绑定textarea元素-->
  <input type="text" v-model="message">
  {{message}}
</div>

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

</body>
</html>

02-v-model的原理

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

<div id="app">
<!--  <input type="text" v-model="message">-->
<!--  <input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message=$event.target.value">
  <h2>{{message}}</h2>
</div>

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

</body>
</html>

03-v-model结合radio类型

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

<div id="app">
  <label for="male">
    <input type="radio" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" value="女" v-model="sex">女
    <h2>您选择的性别是：{{sex}}</h2>
  </label>

</div>

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

</body>
</html>

04-v-model结合checkbox类型

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

<div id="app">
<!--  1.checkbox单选框-->
<!--  <label for="agree">-->
<!--    <input type="checkbox" id="agree" v-model="isAgree">同意协议-->
<!--  </label>-->
<!--  <h2>您选择的是:{{isAgree}}</h2>-->
<!--  <button :disabled="!isAgree">下一步</button>-->

<!--  2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是:{{hobbies}}</h2>

  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree:false,//单选框
      hobbies:[],//多选框
      originHobbies:['篮球','足球','乒乓球','羽毛球','台球','高尔夫球']
    }
  })
</script>

</body>
</html>

05-v-model结合select类型

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

<div id="app">
<!--  1.选择一个-->
  <select name="abc"  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是:{{fruit}}</h2>

<!--  2.选择多个-->
  <select name="abc"  v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是:{{fruits}}</h2>
</div>

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

</body>
</html>

06-v-model修饰符的使用

在这里插入图片描述

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

<div id="app">
<!--  1.修饰符：lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

<!--  2.修饰符：number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

<!--  3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

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

</body>
</html>
weixin_56706590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-基础-day01.md
01-10
vue-基础-day01.md
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-component_day04_03.zip
07-02
day04_03vue拆分静态组件后初始化显示
vue-component_day04_02_静态页面拆分.zip
03-12
vue拆分静态组件todos
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 316
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 508
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 194
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 315
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 222
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue面试题汇总之响应式理解
fyw1789的博客
06-12 285
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
weixin_47121832的博客
06-09 269
Vue3+Vite报错：vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
vue基础P7-17
weixin_43883584的博客
06-09 568
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1224
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 524
Vue在表单校验中trigger属性指定何时触发校验规则
vue如何使用slot
BradenHan的专栏
06-10 624
Vue 中使用 slot 的方式取决于你是使用 Vue 2 还是 Vue 3，因为这两个版本在插槽（Slot）的语法上有所不同。下面是两个版本的基本使用方法：在 Vue 2 中， 是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。Vue 2 提供了几种类型的 slots，包括默认插槽、具名插槽以及作用域插槽。以下是它们的基本使用方法：默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。父组件使用： 子组件定义： 1
uniapp 仿写弹窗
weixin_45881304的博客
06-13 385
【代码】uniapp 仿写弹窗。
vue element-ui 下拉框 以及 input 限制输入，小数点后保留两位 界面设计案例 和 例子：支持mp4和m3u8视频播放
呵呵哒!的博客
06-11 456
error:Your local changes to the following files would be overwritten by merge:_error: your local changes to the following files w-CSDN博客。情况二：当本地的已经乱了，但是远端的master已经合并了你最后一次的代码，此时你可以先把你本地修改的文件先拷贝一份出来，然后让远端的master的代码强行覆盖掉当前的目录内容。
PythonWeb项目-Django+vue宾馆管理系统功能介绍
weixin_42874480的博客
06-12 835
客房预约管理，在客房预约管理页面可以对索引、客房编号、客房图片、客房类型、客房价格、入住天数、总金额、预订时间、会员账号、会员姓名、身份证、联系方式、是否支付等内容进行详情、修改或删除等操作，修改或删除等操作，如图1-10所示。客房预订管理，在客房预订管理页面可以对索引、客房编号、客房图片、客房类型、客房价格、入住天数、总金额、预订时间、会员账号、会员姓名、身份证、联系方式、是否支付等内容进行详情或删除等操作，如图1-13所示。三层相互独立，维护方便，使用安全，三层有互相调用，提高效率。
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、付费专栏及课程。

余额充值