表单绑定
文本 单多选 下拉选择
text radio checkbox select
checkbox 单一的条件:选中的值位true否则位false
表单修饰符
.lazy 当change事件触发的时候更新
默认是input事件就会触发试图的更新
.number 把表单的值转化位数据的数值
事件修饰
事件修饰符
*@click.prevent="say()"
.stop 停止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
按键修饰符
@keyup.enter tab等*
watch监听数据的变化
watch:{
"obj":{
handler:function(val){
监听数据发生变化的时候,触发函数
},
deep:true
深层次监听,obj的属性发生变化触发handel
}}
computed从现有的数据计算出新的数据
computed:{
rmsg:function(){
return this.msg.split('').reverse().join('')
}}
vue中的filters的使用 以及写法
组件内的写法
filters:{
filter:function(data:arg1,arg2){
return 。。。
}}html中的使用
{{msg|filter()}}全局的写法
在html中使用
{{msg|filter(‘agr1’,‘arg2’)}}directivesvue自定义的指令
作用:操作dom的时候 ;使用集成第三方插件的时候 指令 插入 绑定 定义 directives :{img:{ inserted(el,binding)元素的节点 以及指令的值}}class的绑定
属性 对象 数组
属性的绑定 :class=""
动态绑定 :class="{‘red’:flag}"
:class="{‘active’:index==current}"
数组的绑定 :class="[]"
style 的绑定
:style="{fontSize:‘45px’,color:‘red’}"
styel 的对方式的绑定
:style=“obj” data 数据中的obj:{fontSize:“50px”} “font-size”:“50px”=fontSize:“50px”
vue参数
el指令模板
data指定数据
methods指定的方法
watch监听
computed计算
filters过滤
vue动画
1.vue不能直接实现动画,它提供动画各阶段需要的class
2.组件提供class
3.在vue中,动画是在元素显示与隐藏的过程中,添加class v-if v-show v-else
组件 transition
v-enter-active
元素整个进入的过程
v-enter{opacity:0} v-enter-to{opacity:1} v-leave-active元素整个离开的过程
v-leave{opacity:1} v-leace-to{opacity:0}动画关键帧
@keyframes 动画名称{from{}to{}}
自定义动画名
enter-active-class=""
leave-active-class=""
需要引入第三方的css
out-in 动画模式
in-out 先执行进入动画 ,在执行离开动画
out-in先执行离开动画,在进入东动画
动画的组件 transition-group
leave-active-class 离开元素添加类名
enter-active-class 进入元素添加类名
move-class 给正在移动中的元素添加class
tag 指定包裹的标签
版权声明:本文为xinmenglin原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。