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>