vue知识点初总结
概述
前端框架
- Vue
- React
- Angular
vue是一款渐进式JavaScript前端框架
vue官网
插件案例
特点
- 简单,上手方便
- 结合Angular指令与react组件思维
- 生态丰富(插件多)API文档完善
实例化参数
el:"#app",
选择目标标签
data{}
指定数据
data(){return{}}
应函数返回一个对象
methods:
定义事件
conputed
计算
watch
监听
directives
指令
指令
指令的值可以是简单JavaScript命令
文本渲染指令
{{}}
v-text
v-html
属性绑定指令
v-bind:属性=“指令值”
简写: :属性=“值”
条件渲染指令
v-show
通过css方式隐藏
v-if
通过隐藏dom节点隐藏
v-else
v-else-if
频繁切换使用v-show,一次性切换使用v-if
列表渲染指令
v-for="item in list"
list 为要便利的数组
item为当前遍历的项
v-for="(item,index) in list"
idnex 当前便利的项的索引 从0开始
使用v-for务必使用 :key="值",值必须是唯一
添加key 属性可以优化v-for的渲染,让vue更好的识别当前的节点,
特别是在排序,过滤等操作的时候
不建议key的值使用循环的索引
事件指令
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
事件对象:$event
表单绑定指令
vmodel 让表单的值与数据绑定在一起
<input type="checkbox">//默认选中为true不选中为false
<input type-"checckbox" 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':'48px'}"
computed 计算
从现有数据计算出新的数据
computed:{
rmsg(){
return this.msg.split('').reverse('').join('');
}
}
watch 监听
监听数据的变化 并执行回调函数
watch:{
"num":{
handler(nval,oval){}
deep:true
},
}
自定义指令 directives
bind绑定执行一次
inserted 插入执行一次
update 每更新执行一次
> directives:{ "v-focus":{ update(el,bingding){
> if(binding.value){el.focus() }
> }
> }
> }
> <input v-focus="flag">
过滤-管道
格式化数据
使用:
1.{{num|fix}}
2. {{num|fix(arg)}}
3. v-text=“num|fix”
filters:{
fix(value,arg){
return value.toFixed(arg)
}
}
//保留小数点两位
动画
- 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 离开后
创建动画的形式
1.动画类型 6个css创建
2. @keyframes关键帧创建
- .fade-enter-active{animate:foreach ease 1s}
.fade-elave-active{animate:foreach ease 1s}
3. 引用第三方动画库
指定进入的calss与离开的class
<transition
enter-active-class="slideIn animated"
leave-active-class="hinge animated"
></transition>
组件
一段可以重复利用的代码块
全局组件
Vue.conponents("组件名",{template:``})
局部组件
const steper = {template:``}
注册组件
new Vue({
components:{steper}
})
使用组件
<steper></steper>