Vue.js基础学习笔记

前言

简单记录学习Vue基础后一眼记不熟的或值的记录的知识。

笔记

1. 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>

2. 条件渲染v-if和v-show的区别：if是直接移除标签，show是通过样式隐藏。
3. 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>

4. 数组排序

// 排序 
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在前
		} 
	}) 
}

5. 阻止事件冒泡 @click.stop ；阻止事件默认行为@click.prevent ；回车按键修饰符@click.enter。
6. 生命周期：常用mounted
   
7. 过渡动画示例：

<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>

9. 自定义指令：

//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'