VUE学习笔记

**

vue的基础指令

**

（1） v-cloak等

• v-cloak：<p>++{{msg}}你好</p>只会替换msg,保留++和‘’你好‘’
• v-text：<p>++{{msg}}你好</p> 里面的全部替换掉
• v-html：vue的data数据里包含<p>你好</p>标签的，在DOM中作为标签来用这个，上面两个会把<p></p>作为字符串显示出来。

（2） v-bind

<input type="button" class="button-1" value="按钮" `v-bind:title="mytitle"`>
var vm = new Vue({
			el: '#app-1',
			data:{
				msg: '你好',
				mytitle:'这是个自定义按钮'
				
			}
		})

注意：

• 1、可以使用v-bind:title="mytitle+什么什么的"；
• 2、可以使用“：”来替代v-bind:

（3） v-on

一般用在绑定事件，触发事件时使用。
常见的事件：
v-on:click=" "(点击事件)
v-on:click.stop=“doThis”(阻止冒泡事件)
v-on:mouseover=" 函数名"（鼠标覆盖事件）
注意**v-on:可以简写为@**比如：v-on:click=@click。

3.1 v-on的事件修饰符

• .stop 阻止冒泡事件（从里到外）
• .prevent 阻止默认事件
• .capture 添加事件监听器时事件捕获（从外到里）
• .self 只在自身事件触发时触发回调
• .once 事件只触发一次

（4） v-model

实现数据的双向绑定，一般用在表单元素。
常见表单元素：input（radio、text、address、email) select checkbox textarea

（5）八种遍历查找方法：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()

5.1 find()和 findIndex()

----find()方法，找出第一个返回值为true的成员，然后返回该成员。

 [1, 2, 5, -1, 9].find((n) => n < 0)
//找出数组中第一个小于 0 的成员
// -1

find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
----findIndex()是返回第一个符合条件的数组成员的位置

[1, 2, 5, -1, 9].findIndex((n) => n < 0)
//返回符合条件的值的位置（索引）
// 3

const fruits = [
{name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
const index = fruits.findIndex(fruit => fruit.name === 'cherries');
console.log(index); // 3
console.log(fruits[index]);

5.2 filter()

filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]