str.split('').reverse().join('')
是一行JavaScript代码，用于反转字符串 str 中的字符顺序。这行代码利用了三个JavaScript内置方法：split()、reverse() 和 join()，下面是每个方法的作用以及它们是如何组合在一起工作的：
1. split('')
split()方法将一个字符串分割成一个字符串数组。- 在这里，
split('')使用空字符串''作为分隔符，意味着字符串str会在每个字符之间被分割，结果是一个由str中所有单独字符组成的数组。
2. reverse()
reverse()方法将数组中元素的顺序反转。- 应用于由
split('')产生的数组后，这个方法会反转数组中字符的顺序。
3. join('')
join()方法将数组中的所有元素连接成一个字符串。- 在这里，
join('')使用空字符串''作为连接符，意味着数组中的字符会被直接连接在一起，没有任何额外的字符插入，最终产生一个新的字符串。
写vue3 setup多了忘记了最初的写法，data:{name:...}里的数据用this.name获取。
动态参数
event 此时的值为 click，和直接设置v-on:click的效果是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue</title>
<!--引入 vue.js-->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 指令 动态参数-->
<div id="app">
<p>我叫：{{name}}</p>
<button v-on:[event]="handleClick">点我</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "实验楼",
event: "click",
},
methods: {
handleClick: function () {
this.name = this.name.split("").reverse().join("");
},
},
});
</script>
</body>
，事件修饰符中的 .prevent 修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转，例如：
<form action="/" v-on:submit.prevent="submit">
reactive的局限性
reactive() API 有一些局限性：
-
有限的值类型：它只能用于对象类型 (对象、数组和如
Map、Set这样的集合类型)。它不能持有如string、number或boolean这样的原始类型。 -
不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
计算属性-computed
当计算属性的依赖数据发生改变时，相关计算属性也会重新计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue-test</title>
<!-- 引入 vue.js -->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>firstName:{{firstName}}</p>
<p>lastName:{{lastName}}</p>
<p>全名是:{{fullName}}</p>
<button v-on:click="changeName">改姓</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "王",
lastName: "花花",
},
methods: {
// changeName 定义一个方法改变 计算属性 fullName 的值
changeName: function () {
// 修改计算属性 fullName 等于李花花
this.fullName = "李花花";
// 上面一句等于触发了 fullName 属性的 setter
},
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + this.lastName;
},
// setter 直接改变计算属性 fullName 的值就可以触发 setter this.fullName='XX'
set: function (newName) {
var name = newName;
this.firstName = name.slice(0, 1); // 取新值的第一个字符
this.lastName = name.slice(1); // 从新值的第二个字符开始取值
},
},
},
});
</script>
</body>
</html>
computed和watch的区别：Vue中computed和watch的区别_vue computed watch-CSDN博客
应用比较多的商品价格过滤、表单数据过滤等。
slice和substring的用法
变异函数，会修改原数组。
push()pop()shift()unshift()splice()sort()reverse()
非变异函数（不会修改原始数组）：
-
map()：对数组中的每个元素执行指定操作，并返回新数组。 -
filter()：根据指定条件过滤数组元素，返回符合条件的新数组。 -
slice()：返回数组的选定部分，不会修改原数组。 -
concat()：连接两个或多个数组，并返回新数组。 -
join()：将数组中所有元素连接成一个字符串。 -
indexOf()、lastIndexOf()：查找数组中指定元素的索引。 -
reduce()、reduceRight()：对数组中的元素执行指定操作，返回累积结果。 -
push() ：向数组的末尾添加一个或多个元素，并返回新的长度。
javascriptCopy Code var arr = [1, 2, 3]; arr.push(4); // 现在 arr 的值为 [1, 2, 3, 4] -
pop() ：从数组的末尾移除最后一个元素，并返回移除的元素。
javascriptCopy Code var arr = [1, 2, 3]; var removedElement = arr.pop(); // removedElement 的值为 3，arr 的值为 [1, 2] -
shift() ：从数组的开头移除第一个元素，并返回移除的元素。
javascriptCopy Code var arr = [1, 2, 3]; var removedElement = arr.shift(); // removedElement 的值为 1，arr 的值为 [2, 3] -
unshift() ：向数组的开头添加一个或多个元素，并返回新的长度。
javascriptCopy Code var arr = [1, 2, 3]; arr.unshift(0); // 现在 arr 的值为 [0, 1, 2, 3] -
splice() ：从指定位置添加或移除元素，并返回被移除的元素组成的数组。
javascriptCopy Code var arr = [1, 2, 3, 4, 5]; var removed = arr.splice(1, 2, 'a', 'b'); // removed 的值为 [2, 3]，arr 的值为 [1, 'a', 'b', 4, 5]
let colors = ['red', 'green', 'blue', 'yellow'];
// 删除一个元素：从索引 1 开始删除一个元素
const removedElement = colors.splice(1, 1);
console.log(colors); // 输出: ['red', 'blue', 'yellow']
console.log(removedElement); // 输出: ['green']
// 添加元素：从索引 1 开始删除 0 个元素，并添加两个新元素
colors.splice(1, 0, 'orange', 'purple');
console.log(colors); // 输出: ['red', 'orange', 'purple', 'blue', 'yellow']
// 替换元素：从索引 2 开始删除 1 个元素，并添加一个新元素
colors.splice(2, 1, 'black');
console.log(colors); // 输出: ['red', 'orange', 'black', 'blue', 'yellow']
-
sort() ：对数组进行排序，默认按照字母顺序排序。如果需要按照其他规则排序，可以传递一个比较函数作为参数。
javascriptCopy Code var arr = [3, 1, 2]; arr.sort(); // 现在 arr 的值为 [1, 2, 3] -
reverse() ：颠倒数组中元素的顺序。
javascriptCopy Code var arr = [1, 2, 3]; arr.reverse(); // 现在 arr 的值为 [3, 2, 1] -
slice()方法用于返回数组的一个片段或子数组，而不会修改原始数组。它接受两个参数：起始索引和结束索引（可选）。该方法会返回一个新数组，包含从起始索引到结束索引（不包括结束索引）之间的元素。
下面是 slice() 方法的用法示例：
const numbers = [1, 2, 3, 4, 5];
// 从索引 1 开始截取到索引 4（不包括 4）
const slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // 输出: [2, 3, 4]
// 如果省略第二个参数，则截取到数组末尾
const slicedNumbers2 = numbers.slice(2);
console.log(slicedNumbers2); // 输出: [3, 4, 5]
// 如果参数为负数，则表示从数组末尾开始计算索引
const slicedNumbers3 = numbers.slice(-3, -1);
console.log(slicedNumbers3); // 输出: [3, 4]
// slice() 不会修改原始数组
console.log(numbers); // 输出: [1, 2, 3, 4, 5]
替换数组
学了 JavaScript 标准对象库，都知道有些数组方法是不直接改变原数组的，这里称它们为非变异方法，例如：filter()、slice()、concat()，它们都是返回一个新数组，那么，在 Vue 中使用到这些方法，怎么样才能促使视图更新呢？我们就必须使用数组替换法，将非变异方法返回的新数组直接赋值给的旧数组。
this.nav = this.nav.slice(1, 4);
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求，阻止事件冒泡或捕获或者事件默认行为。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了 事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop：阻止单击事件继续传播。.prevent：阻止事件默认行为。.capture：添加事件监听器时使用事件捕获模式。.self：只当在 event.target 是当前元素自身时触发处理函数。.once：点击事件将只会触发一次。.passive：滚动事件的默认行为 (即滚动行为) 将会立即触发。
常用表单元素
| 元素 | |
|---|---|
| input[type=*] | 文本输入框 |
| textarea | 多行文本 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| select | 选择框 |
注意
注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：
-
text 和 textarea 元素使用
value属性和input事件（内部监听 input 事件）； -
checkbox 和 radio 使用
checked属性和change事件（内部监听 change 事件）； -
select 字段将
value作为 prop 并将change作为事件（内部监听 change 事件）。说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。
input 监听
change 监听
表单修饰符
开始介绍表单处理时，不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，可以将 input 事件与 change 事件替换，使用 .lazy 修饰符，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。
.lazy将input事件转为change。.trim表单元素自动过滤首尾空格。.number自动将用户的输入值转为数值类型，可以给v-model添加number修饰符。
购物车
this.cartList.map(item => item.id !== target.id) 语句的作用是创建一个新的数组，其中包含在 this.cartList 数组中 id 不等于 target.id 的元素。这样可以过滤掉 this.cartList 中与 target 具有相同 id 的元素。这样也可以this.cartList=this.cartList.map(item=>item.id!==target.id)。 this.cartList.some(item=>item.id===goods.id)，this.cartList.find(item=>item.id===goods.id)
Array.prototype.find() 和 Array.prototype.some() 是 JavaScript 中用于数组操作的两个常用方法。
-
Array.prototype.find()方法用于查找数组中符合条件的第一个元素，并返回该元素，如果没有符合条件的元素则返回undefined。 示例：javascriptCopy Code const numbers = [1, 2, 3, 4, 5]; const evenNumber = numbers.find(num => num % 2 === 0); console.log(evenNumber); // 输出 2 -
Array.prototype.some()方法用于检查数组中是否存在满足条件的元素，只要有一个元素满足条件即返回true，否则返回false。 示例：const numbers = [1, 2, 3, 4, 5]; const hasEvenNumber = numbers.some(num => num % 2 === 0); console.log(hasEvenNumber); // 输出 true
除了 find() 和 some() 方法外，还有许多其他数组方法可以用于对数组进行操作，例如：
-
Array.prototype.filter()：根据指定的条件过滤出符合条件的元素，返回一个新数组。 -
Array.prototype.map()：遍历数组中的每个元素，并对每个元素执行指定操作，返回操作后的新数组。 -
Array.prototype.reduce()：对数组中的每个元素执行一个指定操作，最终返回一个值。 -
Array.prototype.reduce()方法用于对数组中的每个元素执行一个指定操作，并将操作的结果累积为单个值。它接受一个回调函数作为参数，该回调函数可以接受四个参数：累积值（初始值或上一次回调函数的返回值）、当前值、当前索引和原始数组。
以下是一个使用 reduce() 方法的示例，计算数组中所有元素的总和：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15
在上面的示例中，初始值为 0，回调函数 (accumulator, currentValue) => accumulator + currentValue 将累积值和当前值相加，并返回累积结果。因此，reduce() 方法最终返回了数组中所有元素的总和。
除了计算总和，reduce() 方法还可以用于执行其他类型的累积操作，例如计算最大值、最小值、平均值等。你可以根据具体的需求在回调函数中进行相应的操作。
## <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>购物车</title>
<script src="./js/goods.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
<!-- 商品列表 -->
<h3>商品列表</h3>
<ul id="goodsList">
<template v-for="goods in goodsList" >
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl"/> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<button @click="addToCart(goods)">加入购物车</button>
</li>
</template>
</ul>
<!-- 购物车 -->
<template v-if="cartList.length>0">
<h3>购物车</h3>
<ul id="cartList">
<template v-for="goods in cartList">
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl"/> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<div class="item-control">
<button @click="removeGoods(goods)">-</button>
<h4>{{goods.num}}</h4>
<button @click="addToCart(goods)">+</button>
</div>
</li>
</template>
</ul>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
cartList:[],
goodsList:[],
pre:0
},
mounted() {
this.goodsList = GoodsArr;
},
methods:{
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
const exists = this.cartList.some(item=>item.id===goods.id)
if(exists){
// goods.num += 1;
var target = this.cartList.find(item=>item.id===goods.id)
target.num+=1;
console.log("存在啦")
}else{
goods.num=1;
this.cartList.push(goods);
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
console.log(this.cartList)
},
removeGoods(goods){
// TODO：补全代码实现需求
var target = this.cartList.find(item=>item.id===goods.id)
if(target.num>1){
target.num--
}else{
target.num=0
// this.cartList = this.cartList.filter(item=>item.id!==target.id)
this.cartList=this.cartList.map(item=>item.id!==target.id)
console.log("d",this.cartList.length)
}
}
}
});
</script>
