Vue基础知识点

vue基础知识

概述

前端框架三驾马车 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
  定义事件
• computed
  计算
• watch
  监听

computed(计算)

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

computed:{
	rmsg(){
		return this.msg.aplit('').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|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阻止事件冒泡
.pervent阻止默认事件
.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移除两端空白

类绑定：
1.属性
：class=“值”
2.对象
当对象的属性值为真，该属性作为class绑定
：class=“{‘key1’:true,‘key2’:false}"
key1的值为真，key1会被绑定，key2不会
3.数组方式
：class="[c1,c2,c3]"
样式绑定
属性名去掉 - 下个字母大写
：style=”{color：‘red’,‘fontSize’:‘45px’}"

动画

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

内置组件

1.transition

• name 名称
• mode:模式
  in-out 先进再出
  out-in 先出再进
• enter-active-class
  指定进入类名
• leave-active-class
  指定离开类名
  2.transition-group

动画类

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

创建动画形式

1.动画类6个css创建
2.keyframes关键帧
.fade-enter-active{animate:fadeIn ease 1s}
.fade-leave-active{animate:fadeOut ease 1s}

3.引用第三方动画库
指定进入的class与离开的class

<transition name="fade" 
enter-active-class="slidein animated"
leave-active-class="hinge animated">

组件

1.一段可以重复利用的代码块
全局组件

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

局部组件

const steper={template:``}

注册组件

new Vue({
	components：{steper}
})

使用组件

<steper></steper>