vue基础知识总结

1.简单概述

我们在学习vue之前呢，先来了解一下它。

前端框架有三大马车：Vue，React，Angular 其中我们所要学的vue是一款渐进式JavaScript前端框架。它的作者是尤雨溪，被我们称为尤大。

官网地址: http://cn.vuejs.orghttp://cn.vuejs.orghttp://cn.vuejs.org

插件案例：https://github.com/opendigg/awesome-github-vuehttps://github.com/opendigg/awesome-github-vuehttps://github.com/opendigg/awesome-github-vuevue之所以受欢迎主要取决以下几个特点：

1.简单，上手方便

2.结合angular指令与react组件思维

3.生态丰富（插件多）API文档完善

接下来开始简单了解一些vue的应用吧

2.实例化参数 new Vue

1.el:"#app"：选择目标标签

2.data:{}：指定数据；data(){return{}}：一个函数返回一个对象

3.methods：方法集合

4.computed：计算

5.watch：监听

3.计算 computed

作用：从现有数据计算出新的数据

简单的例子：

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

4.监听 watch

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

简单的例子：

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

5.自定义指令 directives

常用：

bind：绑定执行一次 

inserted：插入执行一次

update：每次更新执行一次

简单的例子：

directives:{
"v-focus":{
	update(el,binding){
	if(binding.value){el.focus()}
 }
}}

6.过滤-管道 filters

作用：格式化数据

使用方法：

1.{{num|fix}}

2.{{num|fix(2)}}

3.v-text="num|fix"

简单的例子：

filters:{
	fix(value,arg){
	return value.toFixed(arg)	
	}
}

7.指令

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

1,文本渲染指令

{{}}

v-text

v-html：渲染html文本

v-model：表单

2.属性绑定

v-bind:属性="指令的值"

:属性="值"   ：简写方式

例子：:disabled="num<=1"：当 num<=1时禁止点击

3.条件渲染

v-show css方式隐藏
v-if 

v-else

v-else-if

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

4.列表渲染

v-for="item in list"

v-for="(item,index)in list"

使用v-for务必加上:key="值"，且值必须是唯一，这样可以优化渲染，让vue更好的识别当前渲染的节点 

5.事件指令

事件修饰符	按键修饰符
.stop .prevent .once	.up .down .left .right .delete .enter .space .esc .tab

v-on:事件类型="响应函数"

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

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

@change=""：当事件发生改变时执行

事件对象：event 

6.表单绑定指令

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

<input type="checkbox">：默认选中的值是true，不选中为flag

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

修饰符：

1 .number 数字

2 .trim移除两端空白

7.类绑定

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

数组方式：:class="[c1,c2,c3]" 

8.样式绑定

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

8.动画

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

内置组件：

1.transition

name名称

mode：模式

in-out：先进再出

out-in：先出再进

enter-active-class：指定进入类名

leave-active-class：指定离开类名

2.transition-group

动画类：

v-enter-active 进入过程	v-leave-active 离开过程
v-enter 进入前 v-enter-to 进入后	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">

9.组件

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

1.全居组件
 Vue.component("组件名",{template:''})

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

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

4.使用组件
<steper></steper>