需要添加动画的标签被 XXX
<div> <transition> <p v-show="isShow">toggle</p> <button @click="isShow=!isShow">toggle</button> </transition> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#test', data() { return { isShow: true } } });定义以 .YYY-开头的 css属性, 这个YYY就是上面自定义的YYY, 需要在这些自定义的属性中指定过度的属性以及隐藏的属性
一个简单的动画效果标签从隐藏->出现, 再从出现到隐藏的过程,就像下面这样
v-enter v-enter-to v-leave v-leave-to 隐藏 出现 出现 隐藏自定义这四个时期的状态
/* 显示的过度效果*/ .YYY-enter-active { transition: all 1s; } /* 隐藏的过度效果*/ .YYY-leave-active { transition: all 3s; } /* 从无到有的样式 */ .YYY-enter { opacity: 0; } /* 从有到无的样式 */ .YYY-leave-to { opacity: 0; transform: translateX(20px); /* 离开时,向X轴的正方向移动20px*/ } 格式化时间的插件库点击进入 moment.js网址 ,在这里可以找到需要引入的script标签
点击进入 moment.js的文档 在文档中可以找到对应的格式和例子
<div> <h2>显示格式化的日期时间</h2> <p>{{date}}</p> <p>默认完整: {{date | dateFormat}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> <p>年月日: {{date | dateFormat('YYYY-MM-DD')}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> <p>时分秒: {{date | dateFormat('HH:mm:ss')}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> </div> /* 这个在官网上查找 */ <script type="text/javascript" src="http://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> // 自定义过滤器 Vue.filter('dateFormat',(value,format)=>{ /* Vue是函数对象 */ return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss'); }); new Vue({ el:'#test', data:{ date:new Date() } }); Es的语法糖es6 的语法: 形参默认值 , 没传值的话,就使用默认值
function(value,format="YYYY-MM-DD"){ return moment(value).format(format); } vue的指令常见的原生指令如下
v:text : 更新元素的textContent <br> v:html : 更新元素的innerHtml<br> v-if: true 如果为true,标签才会输出到页面 <br> v-else: 如果为false,标签才会输出到页面 <br> v-show: 通过控制display的样式来控制显示和隐藏<br> v-for: 遍历数组对象 <br> v-on: 绑定监听事件, 一般直接写 @ <br> v-bind: 强制绑定解析表达式 一般简写成 : <br> v-model: 双向数据绑定 <br> ref: 指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象 <br> v-cloak: 防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none} <br>补充最后两个
ref 指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象
防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none}
例子:
<head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak] { /* 回去寻找有这个属性名的标签 [v-cloak] , 就是下面的p标签 */ display:none } </style> </head> <body> <div> <p ref="content123">哈哈哈哈</p> <button @click="hint">提示</button> // v-cloak="" + 上面的css 样式避免 {{ }} 闪现的效果 <p v-cloak="">{{msg}}</p> <br> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> // 注册全局指令 Vue.directive('') new Vue({ el:'#test', data:{ msg: '嘿嘿' } , methods:{ hint(){ // 因为 `<p ref="content123">哈哈哈哈</p>` 使用了ref,所以vue可以通过this.$refs.content123 找到指定的这个元素 alert(this.$refs.content123.textContent) } } });