Vue基础知识

概述

    前端框架三架马车
Vue
React
Angular
    vue是一款渐进式JavaScript前端框架
    作者：尤雨溪
    官网：cn.vuejs.org
    子主题 5
特点
        简单，上手方便
        结合Angular指令与react组件思维
        生态丰富（插件多）API文档完善

实例化参数

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

computend计算

从现有数据计算新的数据
computed:{
rmsg(){

return this.msg.split("").reverse().join("")
}

}

watch监听

监听数据的变化，并执行回调函数handler
watch:{
"num":{

handler(nval,oval){

}
deep:true
}
}

自定义指令directives

bind绑定执行一次
inserted插入执行一次
update每更新执行一次
directives:{
"v-focus":{
update(el,binding){
if(binding.value){el.focus()}
}

}
}
<input v- focus="flag">

过滤-管道

格式化数据
使用
1 {{num|fiv}}
2 {{num|fiv(2)}}
3  v-text="num|fix"
filters:{
fic(value,age){

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
    事件对象
        sevent

表单绑定指令

    v-model  让表单的值与数据绑定在一起

    <input type="chevkbox">
默认选中值是true,不选中false

    <input type="checkbox"  name ="fruit" v-model="list"
如果是多个把选中的值动态添加到list中

    修饰符

        .number 数字
        .trim 移除两端空白

类绑定

    1属性
        ：class="值"
    2 对象
        当对象的属性值为真，该属性作为class绑定
   ：class="{'key1':ture,'key2':false}"
     key1的值为真,key1会被绑定，key2不会
    3 数组方式
        ：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:fadeln ease 1s}
.fade-enter-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>