vue2代码学习

东方狱兔

已于 2023-10-12 20:14:52 修改

阅读量129

点赞数

文章标签：学习

于 2023-08-29 16:24:44 首次发布

疯批美人东方陨

本文链接：https://blog.csdn.net/weixin_42498050/article/details/132564319

版权

8. 下拉框选择

v-model = "selected" option value = "www.baidu.com"

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>

7. 默认的单选按钮

<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>

6. 单独的筛选框 type = "checkbox" v-model = "checked"

复选框多选框 type = "checkbox" v-model = "checkedNames"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="danxuan" v-model="checked">
  <label for="danxuan">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob选择</label>
  <input type="checkbox" id="googleid" value ="Google" v-model="checkedNames">
  <label for="googleid">Google选择</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao选择</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>

5. 新建文件html

输入! 选择第一个

自动输入的代码段如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4. <button v-on:click="say('what')">Say what</button> 中的say('what')为方法(参数)

调用的时候打印message就可以

methods: {
say(message) {
alert(message)
}

3. 本地生成html文件基本格式

新建html文件，输入!

选择第一个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2. 我们可以把一个数组传给 v-bind:class ，多个方法的时候会打印下面的方法，后面的方法会覆盖上面的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
   width: 100px;
   height: 100px;
   background: red;
}
.active {
   width: 100px;
   height: 100px;
   background: green;
}
</style>
</head>
<body>
<div id="app">
   <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

1. efficient_canvas_mouse_move = this.throttle((e) => this.canvas_mouse_move(e, ele), 15);

它使用了一个名为throttle的函数来控制鼠标移动事件的触发频率。

这段代码的作用是创建一个名为efficient_canvas_mouse_move的函数，该函数在被调用时会执行canvas_mouse_move函数，并将鼠标事件（e）和一个名为ele的参数传递给canvas_mouse_move函数。此外，它使用throttle函数来限制调用频率，将鼠标移动事件的触发限制在每15毫秒一次。

throttle函数通常用于控制高频率事件（如鼠标移动）的处理，以防止事件处理函数被过多地调用，从而提高性能和响应性。

这段代码的具体实现可能依赖于您的代码库或工具中是否有名为throttle的函数。通常，throttle函数会接受一个事件处理函数和一个时间间隔（以毫秒为单位），并返回一个新的函数，该函数在每次调用时都会检查是否已过了指定的时间间隔，如果是，则执行事件处理函数，否则忽略调用。这有助于确保事件处理不会太频繁地触发。

东方狱兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2代码学习

函数会接受一个事件处理函数和一个时间间隔（以毫秒为单位），并返回一个新的函数，该函数在每次调用时都会检查是否已过了指定的时间间隔，如果是，则执行事件处理函数，否则忽略调用。函数通常用于控制高频率事件（如鼠标移动）的处理，以防止事件处理函数被过多地调用，从而提高性能和响应性。函数来限制调用频率，将鼠标移动事件的触发限制在每15毫秒一次。这段代码的具体实现可能依赖于您的代码库或工具中是否有名为。的函数来控制鼠标移动事件的触发频率。的函数，该函数在被调用时会执行。函数，并将鼠标事件（
复制链接

扫一扫