Vue基础知识（一）

目录

概述

实例化参数new Vue

计算 computer

监听 watch

自定义指令 directives

过滤-管道

指令

动画

组件

一、概述

前端框架三驾马车

Vue
React
Angular

Vue是一款渐进式JavaScript前端框架语言
作者：尤雨溪
官网：cn.vuejs.org

插件案例：
https://github.com/opendigg/awesome-github-vue

特点：
1、简单，上手方便
2、结合Angular指令与React组件思维
3、生态丰富（插件多）API文档完善

二、实例化参数 new Vue

el："#app"  指定目标标签
data：{}        指定数据
data（）{return{}}        一个函数返回一个对象
methods：{}        方法

三、计算 computer

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

computer：{
    rmsg(){
        return this.msg.split("").reverse().join('')
    }
}

四、监听

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

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

五、自定义指令

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

directive：{
    "v-show":{
        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=2){
        return value.toFixed(arg)
    }
}
//保留小数点两位

七、指令

指令的值可以是简单的JavaScript命令

1、文本渲染指令

（1）{{  }}
（2）v-text
（3）v-html（渲染html文本）

2、属性绑定

v-bind：属性="指令值"
：属性="值"

3、条件渲染

v-show
v-if
v-else-if
v-else

频繁切换用v-show，一次性切换用v-if
v-show隐藏方式是通过css的方式隐藏节点

4、列表渲染

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的值使用循环的索引

5、事件指令

v-on：事件类型="响应函数"
v-on：click"say()"

@click="say()"
事件的简写

@click="num++"
行内事件响应

事件修饰符

.stop阻止事件冒泡
.prevent阻止默认事件
.once只执行一次

@click.stop.prevent.once="num++"
事件的修饰符可以同时写多个

按键修饰符

.up
.down
.left
.right
.delete
.enter
.space
.esc

事件对象 $sevent

6、表单绑定指令

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

<input type="checkbox">
默认选中的值是true        不选中的值是false

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

修饰符

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

7、类绑定

（1）属性
：class="值"

（2）对象
当对象的属性值为真，该属性作为class绑定
：class="{'key1'：true，'key2'：false}"
key1的值为真，key1会被绑定，key2不会

（3）数组方法
：class="[c1,c2,c3]"

8、样式绑定

：style="{color：'red'，'fontSize'：'48px'}"
属性名去掉“-”，下一个字母大写

八、动画

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

2、内置组件

transition

name	名称
mode：模式
in-out	先进再出
out-in	先出再进
enter-active-class	指定进入类名
leave-active-class	指定离开类名

3、动画类

v-enter-active        进入过程

v-enter	进入前
v-enter-to	进入后

v-leave-active        离开过程

v-leave	离开前
v-leave-to	离开后

4、创建动画形式

1、动画类6个css创建

2、keyfrmes关键帧

.fade-enter-active(animate：fadeIn ease 1s)
.fade-enter-active(animate：fadeOut ease 1s)

3、引入第三方动画库

指定进入的class与离开的class
<transiton enter-active-class="slideIn animated"
leave-active-class="hinge animated">

九、组件

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

全局组件
Vue.component("组件名"，{template：``})

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

注册组件
 

new Vue({
    components：{steper}
})

使用组件
<steper></steper>