Vue学习之二(vue指令)

v-for 循环遍历

• <li :key='index' v-for='(index,item) in Arr'> </li>
• 传key 方便后边操作数据;因为遍历的原理是复制上一份数据,直接替换数据;

杂项

• v-pre 不编译差值表达式
• v-cloak 解决闪烁问题
• v-once 只渲染一次

动画 transition

• 被动画的元素必须被transition包裹起来 name=""
• Vue提供好了一些动画class的名称,我们只需要写css样式即可
• 必须在v-if和v-show动画效果才能产生

根据提供的class名,自己定义动画

• 进入 和 离开 两个状态,分别有进入前,进入中,进入后;…

使用animate.css第三方动画

• 标签必须为块级元素,否则没有效果
• 必须加上类名animated
• enter-active-class, leave-active-class

动画钩子 其实就是js函数

• 进入前 before-enter
• 进入 enter 中设置过渡时间,刷新动画帧数,设置结束位置; done();

• 进入后 after-enter

• 离开前中后 三个状态同上;

计算属性 && watch

• 计算属性computed fullName:function(){ return ...}
• 侦听属性 watch firstName:function(){计算等式},lastName:function(){计算等式}

组件:对相关功能代码的封装,达到复用的目的

• #app外有一个<template id="id">...</template>内写template的内容
• 组件定义 注册 Vue.component('组件名',{template:"#id",data:{..},methods:{..}})
• #app内 创建 <组件名>标签
  
  • 组件名驼峰命名时标签不能显示,一般以-拼接组件名

数组的filter过滤方法

• arr.filter(function(item,index,arr){return ...},this)
  
  • 参1:回调中遍历数组 return满足条件的,形成一个新的数组;
  • 参2:传this,让函数内部可以访问外部的数据
• includes()字符串中是否包含 string.includes(this.keyword)
• .trim()字符串去空格方法