VUE的入门学习笔记详细记录（三）

最新推荐文章于 2025-12-10 10:47:58 发布

原创最新推荐文章于 2025-12-10 10:47:58 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #html5 #javascript

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文是Vue.js学习系列的第三篇，详细介绍了如何使用filter、map、reduce等高阶函数，以及v-model在不同表单元素（如text、radio、checkbox、select）中的应用，包括修饰符lazy、number和trim的使用。通过实例展示了如何进行表单数据的双向绑定和处理。

这是关于VUE的入门学习笔记详情，这是第三篇，后续会持续更新，感谢王红元老师的开源！！！

前言

这个文章我会写一个系列，主要是记录我再学习Vue的时候的笔记，方便后期查询，如果能帮助到你，请收藏一下

高阶函数的使用

filter/map/reduce

filter

filter中的回调函数有一个要求：必须返回一个布尔值
- true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
- false：当返回false时，函数内部会过滤掉这次的n

map函数的使用

reduce函数的使用

作用：对数组中所有的内容进行汇总

<script>
const nums = [10, 20, 30, 111, 223, 343]
// 取出所有小于100的数字，并乘以2。完成后将列表中的所有数字相加
let numbers2 = nums.filter(function(n){
	return n<100
})

let numbers3 = number2.map(function(n){
	return n*2
})

let numbers4 = number3.reduce(function（preValue,n){
	return preValue + n
},0)

//通过一行代码写出
let total = nums.filter(function(n){
return n < 100
}).map(function(n){
return n * 2
}).reduce(function(preValue, n){
return preValue + n
},0)

//通过箭头函数
let total= nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n);
</script>

表单绑定

v-model

基本使用，"input"标签text类型

<body>
    <div id="app">
      <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>

v-model：radio

<body>
    <div id="app">
      <label for="male">
          <!-- 如果v-model绑定的变量是一样的，那么就不用添加name属性来实现互斥 -->
          <input type="radio" id="male" value="男" v-model="sex">男
      </label>

      <label for="female">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>

    <h2>
       您选择的性别是： {{sex}}
    </h2>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:"大家好",
                sex:"",//这里填入“男”则默认为男
            },
                 
        })
    </script>
</body>

v-model:checkbox（多选框）

<body>
    <div id="app">
        <!-- 有label点击文字也会选择上前面的单选框 -->
        <!-- 1.checkbox单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <button :disabled="!isAgree">下一步</button>
        <br>
        <!-- 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">羽毛球
        <input type="checkbox" value="排球" v-model="hobbies">排球
        <input type="checkbox" value="网球" v-model="hobbies">网球
        <h2>
            您的爱好是：{{hobbies}}
        </h2>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
               isAgree: false,
               hobbies: [],
            },
                 
        })
    </script>
</body>

v-model:select（下拉框）

<body>
    <div id="app">
       <!-- 1.选择一个 -->
       <select name="abc" id="" v-model="fruit">
           <option value="苹果" >苹果</option>
           <option value="香蕉" >香蕉</option>
           <option value="火龙果" >火龙果</option>
           <option value="榴莲" >榴莲</option>
           <option value="葡萄" >葡萄</option>
       </select>
       <h2>
        您选择的水果是：{{fruit}}
       </h2>
       <!-- 2.选择多个 -->
       <select name="ab" id="" v-model="fruits" multiple>
        <option value="苹果" >苹果</option>
        <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:{
                fruit: "香蕉",
                fruits: [],
            },        
        })
    </script>
</body>

v-model:修饰符

lazy修饰符

默认情况下，v-model默认是input事件中同步输入框的数据
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新

number修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格

<body>
    <div id="app">
      <!-- 1.修饰符：lazy -->
      <input type="text" v-model.lazy="message">
      <h2>
          {{message}}
      </h2>
      <!-- 2.修饰符:number -->
      <input type="text" v-model.number.trim="num">
      <h2>
          输入内容的类型为：{{typeof num}}
      </h2>
      <h2>
          输入内容为：{{num}}
      </h2>

    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
               message:"大家好啊",
               num:0,
            },
                 
        })
    </script>
</body>

input 值绑定

<body>
    <div id="app">
        <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:{
               isAgree: false,
               hobbies: [],
               originHobbies: ["篮球", "乒乓球", "足球", "羽毛球", "排球", "网球"]
            },
                 
        })
    </script>
</body>