Vue.js基础学习笔记

Vue.js基础学习笔记
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

前言

简单记录学习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>
  1. 条件渲染v-ifv-show的区别:if是直接移除标签,show是通过样式隐藏。
  2. 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>
  1. 数组排序
// 排序 
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在前
		} 
	}) 
}
  1. 阻止事件冒泡 @click.stop ;阻止事件默认行为@click.prevent ;回车按键修饰符@click.enter
  2. 生命周期:常用mounted
    在这里插入图片描述
  3. 过渡动画示例:
<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. 自定义指令:
//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'
本文来源MrKorbin,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/25312

发表评论