前言
简单记录学习Vue基础后一眼记不熟的或值的记录的知识。
笔记
class
绑定:
<p class="classB" :class="a">表达式是字符串: 'classA'</p>
<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB} isA、isB为true则添加该class</p>
<p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
- 条件渲染
v-if
和v-show
的区别:if是直接移除标签,show是通过样式隐藏。 - filter过滤数组用法:
<div id="div">
<li v-for="n in evenNumbers">{{ n }}</li>
</div>
<script>
varvm=new Vue({
el:"#div",
data:{
numbers: [ 1, 2, 3, 4, 5 ]
},
computed:{
evenNumbers: function () {
return this.numbers.filter(function (number) //参数number是遍历数组的每一个元素
{
return number<4
})
}
}
})
</script>
- 数组排序
// 排序
if(orderType!==0) {
persons = persons.sort(function (p1, p2) {
if(orderType===1) {
return p1.age-p2.age
}
else {
return p2.age-p1.age //如果返回负数p1在前,返回正数p2在前
}
})
}
- 阻止事件冒泡
@click.stop
;阻止事件默认行为@click.prevent
;回车按键修饰符@click.enter
。 - 生命周期:常用mounted
- 过渡动画示例:
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
/* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px); opacity: 0;
}
</style>
<div id="demo1">
<button @click="show = !show"> Toggle1 </button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="show = !show"> Toggle2 </button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: { show: true }
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>
8.过滤器,格式化时间示例:
<div id="test">
<p>当前时间为: {{currentTime}}</p>
<p>当前时间 1 为: {{currentTime | dateStr}}</p>
<p>当前时间 2 为: {{currentTime | dateStr('YYYY-MM-DD')}}</p>
<p>当前时间 3 为: {{currentTime | dateStr('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
// 注册过滤器
Vue.filter('dateStr', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: '#test',
data: {
currentTime: new Date()
}
})
</script>
- 自定义指令:
//1 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
//2 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
//3 使用指令
v-my-directive='xxx'