VUE的入门学习笔记详细记录（二）_王红元的笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/marker_sun/article/details/115862345

本文详细介绍了Vue.js中的核心概念，包括计算属性、事件监听、条件判断与循环等，并通过实例展示了如何应用这些特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前言

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

计算属性深入介绍

计算属性的setter和getter属性(完整写法与只读写法）

计算属性和methods的比较：
- 计算属性不管引用多少次，他本身只执行一次，而methods则是引用几次，执行几次。
- 使用计算属性（computed）会更加的节省资源。

<!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>Document</title>
</head>
<body>

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

    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                firstName:'Marker',
                lastName: 'Sun',
            },
            computed:{
                // 这里是计算属性computed的完整写法，包含set和get属性。
                fullName: {
                    set:function(newValue){
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];

                    },
                    get:function(){
                        return this.firstName + " " + this.lastName
                    },
                },
                // 当计算属性不需要set属性的时候，即只读的是否，可以简写为以下方式：
                fullName1: function(){
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>
</body>
</html>

ES6的部分语法介绍

let/var

工作中的时候尽量不再使用var 更推荐使用 let 。我们可以将 let 看做是更加完美的 var。
var 的作用域只有在function中起作用，在 if 和 for 等块中不会起作用，会在开发中引起一些问题。

const

他的作用是将某个变量（标识符）修饰为常量，此标识符不可以再次赋值。
建议：在ES6的开发中，优先使用const，只有需要改变某一个标识符时，才使用let
注意事项：
1. 一旦给const修饰的标识符被赋值之后，不能修改
2. 在使用const定义标识符，必须进行赋值
3. 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
```
<script>
const obj = {
name : 'why',
age : 18,
height : 1.88
}
console.log(obj);
obj.name = 'kobe';
obj.age = 40;
obj.height = 1.87;
console.log(obj);
</script>
```

对象字面量的增强写法

属性的增强写法

<script>
const name = 'why';
const age = 18;
const height = 1.88;

// ES5的写法
// const obj = {
//	name: name,
//	age: age,
//	height: height,
//	}
// ES6的写法
const obj = {
	name,
	age,
	height,
	}
	console.log(obj);
</script>

函数的增强写法

<script>
// ES5的写法
// const obj = {
// run: function(){
//		}
//	}
// ES6的写法
const obj = {
	run(){
	},
	eat(){
	},
}
	console.log(obj);
</script>

事件监听

在前端开发的时候，我们必须监听用户发生的时间，比如点击、拖拽、键盘事件等

v-on介绍

作用：绑定事件监听
缩写：@
预期：Function | Inline Statement | Object
参数：event

v-on的基础用法

<!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>Document</title>
</head>
<body>

    <div id="app">
       <h2>{{counter}}</h2>
        <button v-on:click='increment'>+</button>
        <button v-on:click='decrement'>-</button>
    </div>

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

v-on的语法糖写法(@)

<!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>Document</title>
</head>
<body>

    <div id="app">
       <h2>{{counter}}</h2>
        <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() {
                    return this.counter++
                },
                decrement() {
                    return this.counter--
                }
            },  
            
        })
    </script>
</body>
</html>

v-on参数传递的问题

如果传递的方法不需要传递参数，那么方法后的（）可以不添加。注：必须是在事件监听的时候
如果传递的方法需要传递参数，这个时候要是没有传入参数，那么Vue会默认将浏览器生成的event事件（例如：MouseEvent {isTrusted: true, screenX: 145, screenY: 132, clientX: 144, clientY: 20, …}）对象作为参数传入到方法中
如果传递的方法需要传递event和其他参数，那么event需要像后面这样写$event

<!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>Document</title>
</head>
<body>

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

        <!--在事件定义中，写函数时省略了（），但是方法本身是需要一个参数的,那么Vue会默认将浏览器生成的event事件对象作为参数传入到方法中-->
        <button @click='btn2Click'>按钮3</button>

        <!--方法在定义中，既需要event事件，又需要其他参数-->
        <!--在调用方法，如何手动的获取到浏览器参数的event对象：$event-->
        <button @click='btn3Click("123", $event)'>按钮4</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            methods: {
                btn1Click(){
                    console.log('btn1Click')
                },
                btn2Click(event){
                    console.log('----------',event)
                },
                btn3Click(event,abc){
                    console.log('++++++++++',event,abc)
                },
            },  
            
        })
    </script>
</body>
</html>

v-on的修饰符

.stop - 调用 event.stopPropagation().
.prevent - 调用 event.preventDefault()
.{keyCode | keyAlias} - 当前事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调

<!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>Document</title>
</head>
<body>
    <!--1 .stop修饰符的用法  阻止冒泡，即点击按钮只触发btnclick,不会同时触发divclick-->
    <div id="app">
        <div @click="divClick">
            <button @click.stop="btnClick">按钮</button>
        </div>
     <!--2 .prevent修饰符的用法 阻止默认事件自动产生，如自动提交表单。我们可以创建一个方法来代替提交 -->
        <br>
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

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

    <!-- 5 .once 只触发一次-->
        <br>
        <button @click.once="btn2Click">按钮2</button>
    </div>

   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            methods: {
                btnClick(){
                    console.log('++++++btn1Click')
                },
                divClick(){
                    console.log('----------div')
                },
                submitClick(){
                    console.log('=======submitClick')
                },
                keyUp(){
                    console.log("==-==-=keyUp")
                },
                btn2Click(){
                    console.log('lsakdjfla;lsdfj')
                }
               
            },   
            
        })
    </script>
</body>
</html>

条件判断

v-if v-else-if v-else

用法与python的 if…elif…else一致
比较复杂的判断不建议在标签中使用，建议直接使用computed（计算属性）
小案例(用户登录切换）：
一个小问题：切换input时，如果我们输入了内容，那么输入的内容依然会在切换后的input中显示
解决办法：给对应的Input添加key，并且保证key的不同。

<!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>Document</title>
</head>
<body>
<!--注意一个小问题：input标签内的内容，点击切换后不会清空
    解决方式：
          
            <input type="text" id='username' placeholder="用户账号" key="username">
       
            <input type="text" id="email" placeholder="用户邮箱" key="email">
        
-->
    <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>

判断是否显示

v-show

v-show 和 v-if 的区别
1. v-if : 当我们条件为false时，包含v-if 指令的元素，根本就不会存在dom中，当条件为true时，在dom中再创建一个
2. v-show : 当条件为false时，只是在元素中添加一个行内样式：display：none。
在开发中如何选择
- 当需要在显示和隐藏之间切片很频繁时，使用v-show
- 当只有一次切换时，通过使用v-if

循环

v-for

遍历数组：格式如下：item in items
在开发中，在使用v-for的时候，给对应的元素或组件添加一个key属性

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>
    <div id="app">
        <!--1.在遍历的过程中，没有使用索引值（下标值）-->
        <ul>
            <li v-for="n in abc">{{n}}</li>
        </ul>
        
        <!--2.在遍历的过程中，获取索引值-->
        <ul>
            <li v-for="(n, index) in abc">{{index}}-{{n}}</li>
        </ul>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            message:"大家好",
            data:{
                abc:["aaa", "bbb", "ccc", "ddd"]
            }, 

        })
    </script>
</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>
    <div id="app">
        <!--在遍历对象的过程中，如果只是获取一个值，那么获取的是value-->
        <ul>
            <li v-for="n in info">{{n}}</li>
        </ul>

         <!--在遍历对象的过程中，获取key 和 value   -->
         <ul>
            <li v-for="(value, key) in info">{{value}},{{key}}</li>
        </ul>

         <!--在遍历对象的过程中，获取key 和 value 和 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',
            message:"大家好",
            data:{
                info:{
                    name:'aaa',
                    age:18,
                    height:186,
                }
            }, 

        })
    </script>
</body>
</html>

数组中的哪些方法是响应式的

响应式的方法：

push() 从最后添加元素，一次可以添加多个元素
pop() 从最后删除数组中的元素
shift() 从开头删除数组中的元素
unshift() 从开头添加元素，一次可以添加多个元素
splice() 既可以删除元素，也可以插入元素，也可以替换元素
- 删除元素splice（start，输入要删除的数量如果不穿则删除开始之后所有元素）
- 替换元素splice(start,输入要替换的数量，输入与替换数量一致的新元素)
- 插入元素splice(start,0,输入要添加的元素)
sort() 排序
reverse() 进行反转

非响应式的方法：

通过下标修改元素内容，是非响应式的，如果有需要替换的，使用splice()去修改

vue的set()方法

set(要修改的对象，索引值，修改后的值）
该方法也是响应式的

一个小作业：

需求：列表中的内容，第一个字体默认为红色，之后的点击哪一个，哪一个变为红色

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="(item,index) in movies" 
           :class="{active: currentIndex === index}" 
           @click = isClick(index)>
           {{index}}.{{item}}
            </li>
       </ul>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:"大家好",
                movies:['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
                currentIndex: 0,
            },
            
            methods: {
                isClick(index){
                    this.currentIndex = index
                }
            },
            
        })
    </script>
</body>
</html>

案例：图书购物车，如图。当所有图书都移除时，显示“购物车为空”

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
    <style>
        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;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="this.books.length">   
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                  <tr v-for="(book,index) in books">
                     <td>{{book.id}}</td>
                     <td>{{book.name}}</td>
                     <td>{{book.date}}</td>
                     <td>{{book.price | finalPrice}}</td>

                     <td>
                         <button @click="decreaseNum(index)" :disabled="book.count <= 1">-</button>
                         {{book.count}}
                         <button @click="increaseNum(index)">+</button>
                    </td>  
                     <td><button @click="removeBook(index)">移除</button></td>  
                  </tr>
                </tbody>
            </table>
            <h3>总价格为：{{sumPrice | finalprice}}</h3>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        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
                  },
              ]
            },
            computed:{
                sumPrice(){
                    let sum = 0
                    for(let n of this.books){
                        sum += n.price*n.count
                    }
                    return sum
                    <!--
                    使用函数式编写
                    return this.books.reduce(function(preValue,book){
                   return preValue + book.price* book.count },0)
                    -->
                },
            },
            methods: {
                increaseNum (index){
                    return this.books[index].count++
                },
                decreaseNum(index){
                    return this.books[index].count--
                },
                removeBook(index){
                    this.books.splice(index,1)
                },
            },
            filters: {//过滤器
              finalPrice(price){
                  return "￥" + price.toFixed(2)
              }
            },
            
        })
    </script>
</body>
</html>