vue知识点

vue知识点

概述

前端框架三驾马车 Vue React Angular
vue是一款渐进式javascript前端框架
作者：尤雨溪
官网： link.
插件案例： link.
特点：
1.简单，上手方便
2.结合Angular指令与react组件思维
3.生态丰富（插件多）API文档完善

实例化参数 > new Vue

el:"#app" 选择目标标签
data:{} 指定数据
data(){return{}} 一个函数返回一个对象

computed 计算

从现有数据计算出新的数据

computed:{
 rmsg(){
 return this,msg.split("").reverse().join("")
 }
  } 

watch 监听

监听数据的变化，并执行回调函数handler

watch:{ 
"num":{
 handler(nval.oval){}, deep:true
  } 
}

自定义指令 directives

bind 绑定执行一次
insert 插入执行一次
update 每更新执行一次

directives:{ 
    "v-focus":{ 
          update(el,binding){
                 if(binding.value){
                 el.focus()
                      }
                } 
          }
    }
< input v-focus="flag">

过滤-管道

格式化数据
使用
1.{{num|fix}}
2.{{num}fix(2)}}
3.v-text="num|fix"

filters:{
         fix(value,arg){ 
              return value.toFixed(arg) 
          }
} //保留小数点两位

指令

• 指令的值是可以是简单的javascript命令
• 文本渲染指令
  {{}}
v-text
v-html (渲染html文本)
• 属性绑定
  v-bind:属性=“指令值”
:属性=“值”
• 条件渲染
  v-show css方式隐藏
v-if v-else-if v-else
  频繁切换用v-show
  一次性切换用v-if
  v-show隐藏式通过css的方式隐藏节点
• 列表渲染

v-for=“item in list”
// list 要遍历的数组
// item 当前遍历的项目
v-for="(item,index) in list"
// index 当前遍历项的索引从0开始
使用v-for 务必 v-bind:key="" :key =“值”
值必须是唯一
添加key属性可以优化v-for的渲染 让vue更好识别当前渲染的节点 特别是在排序，过滤等操作的时候
不建议key的值使用循环的索引

• 事件指令

v-on:事件类型=“响应函数”
v-on:click=“say()”
@click=“say()” 事件的简写
@click=“num++” 行内事件响应
事件修饰符
.stop阻止事件冒泡
.prevent阻止默认事件
.once只执行一次
@click.stop.once.prevent="num++"事件的修饰符可以同时写多个
按键修饰符
.up .down .left .right .delete .enter .space .esc
事件对象
$event

• 表单绑定指令
  v-model 让表单的值与数据绑定在一起
  < input type="checkbox"> 默认选中值是true 不选中值是false
  < input type="checkbox" name="fruit" v-model="list">
  如果是多个把选中的值动态添加到list数组中
  修饰符
  .number 数字
  .trim 移除两端空白
• 类绑定
  属性 :calss="值"
  对象 当对象的属性值为真，该属性作为class绑定 ：class="{'key1':true,'key2':false}" key1的值为真，key1会被绑定， key2不会
  数组方式 :class="[c1,c2,c3]"
• 样式绑定
  属性名去掉-下个字母大写
  :style="{color:'red','fontSize':'48px'}"

动画

• vue 动画在内置组件transition包裹 会自动在动画的进入过程与离开过程添加类名

• 内置组件
  transition >
  name名称
mode：模式
in-out 先进再出
out-in 先出再进
enter-active-class 指定进入类名
leave-active-class 指定离开类名
  transition-group

• 动画类
  v-enter-active 进入过程
v-enter 进入前
v-enter-to 进入后
v-leave-active 离开过程
v-leave 离开前
v-leave-to 离开后

• 创建动画形式
  动画类 6个css创建
  keyframes关键帧
  .fade-enter-active{animate:fadeIn ease 1s} .fade-leave-active{animate:fadeOut ease 1s}
  引用第三方动画库 指定进入的class与离开的class
  <transition enter-active-class="slideIn animated" leave-active-class="hinge animated" >

组件

一段可以重复利用的代码块

全局组件 
Vue.component("组件名",{
template:``
})

局部组件
 const steper={
 template:``
 }

注册组件 
new Vue({
 components:{steper} 
 })

使用组件
 <steper></steper>