vue学习心得，基础
在vue学习中我发现很多js的方法被vue简单的语法一下解决，以前需要很多行代码实现的功能vue也能轻松解决，接下来我来盘点一下vu恶的使用方式，若有类似的实现方式我将给予展示。（数组左侧添加unshift,右侧添加push）
Vue框架
在使用过程中如果直接应用网络地址，需要加载时间，建议直接下载“vue.js"
插值表达式
1.必须在data中含有这个数据才能使用
2.不支持引用语句
3.不能在标签中使用
vue中的常用指令
~v-html：类似innerHTML,能够解析标签使用时会覆盖原有内容
~v-text:类似innerText，不能解析标签使用时会覆盖原有内容
~v-show:直接控制css中的display属性
~v-if:条件判断和v-else,v-else-if连用
~v-on:与js中的事件监听可以产生类似效果，可简写成”@”
~v-bind:原先css中的标签都是写死的，在属性名加上此指令可动态控制，可简写成”：“
~v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组
指令修饰符
~@keyup.enter —>当点击enter键的时候才触发
~v-model.trim —>去除首位空格
~v-model.number —>转数字
~@事件名.stop —> 阻止冒泡，js使用方式：
document.getElementById('myElement').addEventListener('click', function(event) {
// 阻止事件冒泡
event.stopPropagation();
// 你的其他代码
console.log('Element clicked, but bubbling is stopped.');
});注意：该方法不能用于阻止捕获，js使用方式可以
~@事件名.prevent —>阻止默认行为（注：若在超链接标签上,需要添加@click.prevent阻止跳转）
控制类的增加来实现tab栏切换
vue实现方法：
<body>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
<a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
activeIndex: 2, // 记录高亮
list: [
{ id: 1, name: '京东秒杀' },
{ id: 2, name: '每日特价' },
{ id: 3, name: '品类秒杀' }
]
}
})
</script>
</body>js实现方法：
<script>
// 采取事件委托的形式 tab栏切换
// 1. 获取 ul 父元素 因为 ul只有一个
const ul = document.querySelector('.tab-nav ul')
// 获取 5个 item
const items = document.querySelectorAll('.tab-content .item')
// 2. 添加事件
ul.addEventListener('click', function (e) {
// console.log(e.target) // e.target是我们点击的对象
// 我们只有点击了 a 才会 进行 添加类和删除类操作
// console.log(e.target.tagName) // e.target.tagName 点击那个对象的 标签名
if (e.target.tagName === 'A') {
// console.log('我选的是a')
// 排他思想 ，先移除原来的active
document.querySelector('.tab-nav .active').classList.remove('active')
//当前元素添加 active 是 e.target
// this 指向ul 不能用this
e.target.classList.add('active')
// 下面大盒子模块
// console.log(e.target.dataset.id)
const i = +e.target.dataset.id
// 排他思想 ，先移除原来的active
document.querySelector('.tab-content .active').classList.remove('active')
// 对应的大盒子 添加 active
// document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
items[i].classList.add('active')
}
})
</script>computed计算属性
computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例
常用数组方法
1.join()
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"
2.reduce()
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue,
);
console.log(sumWithInitial);
// Expected output: 103.filter()
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
4.map()
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);5.forEach()
const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
发现有部分知识未做了解，先去ajax+axios,promise