Vue基础个人总结，条件渲染，列表渲染，组件等

上一篇说了最基本的环境搭建和一些安装的问题，现在因为跟着Vue.js官网教程一步一步学后总结的一些心得体会，并用一些通俗点的语言来解释。

 

条件渲染：

v-if和v-show有什么区别呢？应该除了我很多都有疑问，因为在练习的时候发现两种效果都是一样的，那么逻辑上肯定是内部效应的问题了。以我的理解：

v-if是硬性的，在条件为假时，就罢工了，直到为真时才开始开工，中间是不存在的，并且可以确保在条件切换时，元素及它的数据绑定或者组件被销毁和重建。（同时存在时，v-for比v-if优先级更高）

v-show是软性的，并且一直存在，只是根据条件的真假，切换display的Css属性，判断它是否隐藏，因此如果频繁切换条件，则用v-show更合适

v-for因为默认行为是尽量不改变整体，因此采用的替换，所以为了保证顺序，每个列表都需要添加一个Key，来赋予它一个唯一的Id

 

列表渲染：

v-for的in要有空格不然会报错

<li v-for="(item, index) in items">

 

变异方法（会触发视图更新，改变原来数组）：

 

push()       向数组的末尾添加一个或多个元素
unshift()   数组的开头添加一个或更多元素，跟push（）相反
pop()        用于删除数组的最后一个元素
shift()        用于删除数组的第一个元素，跟pop（）相反
splice()      插入、删除或替换数组的元素
sort()         排序
reverse()   倒序

 

非变异方法（不会触发视图更新，不改变原来数组）：

filter()          创建一个符合条件的新数组
concat()      连接两个或多个字符串 
slice()         取出指定数组位置的元素

 

表单输入绑定修饰符

.lazy   使用change事件同步，并进行延迟同步，因为如果大量的频繁的输入更新，容易对造成服务器压力，然后卡顿

.number   自动转换为number类型，便于计算

.trim    自动过滤输入的首尾空白符

 

计算属性

简单介绍：

1.表单内的表达式应该是便于简单运算的，更多的逻辑应放在应有的位置，而这些复杂的逻辑运算就应该用计算属性来表示，计算属性放在computed内，computed：{ }和data（）{ }同级

（computed和methods的结果是一样的，但是computed有缓存，在大量数据交互时，可以避免多次重复执行，造成不必要的压力）

2.或者当一些数据需要根据其他大量数据变化而变化时，也应用到计算属性，而不用watch侦听

（但应认清computed和watch的区别，watch的侦听能在执行过程中设置中间状态执行异步而computed不行）

3.内部计算属性默认是只有getter，但也可以按需求自行设置setter

 

：class和：style

两者都可以用对象语法和数组语法

：class是响应式的，可以动态渲染结果，实时更新，并且可以用三元表达式

：style是内联样式，但不是CSS，而是一个JavaScript对象，可以绑定一个属性带多个值，用  { [ ] }  表示

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

 

 

 

 

组件：

1. 建立组件时应该首先把三部分写出来，养成好的习惯，分别是

<Template></Template>  视图层，并且Template只能有一个根目录，就像树结构一样

<Script></Script>  逻辑层

<Style></Style>  样式层，父级的Style会映射到子级里面去，而子级里面的组件为了互不干涉，可以在Style标签里面加一个Scoped属性，便可以把组件样式独立出来

2. 父子级组件之间交互

父=>子时，用props把需要交互的对象标注在props里面

son:

props:["title","freemsg"]

而数据写在父级的data()里面因为是由父级传递数据到子级

father:

<Son :title="msg" :freemsg="freemsg"></Son>

data(){
        return{
        	msg:"im fine",
		freemsg:"hello"
	}
}

点击发生改变事件：

father加上:

<button @click="change">click me!</button>

methods:{
	change(event){
		this.msg="im fine too"
	}
}

 

所以说，组件之间的交互灵活多变，可以把v-语法灵活的运用到里面，比如截取一部分

 

<input type="text" v-model="freemsg">
<Son :title="msg" :freemsg="freemsg"></Son>
<button @click="change">click me!</button>

 

关于props验证:

    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }

这是官网给出的props验证,应使用CDE类来保证数据传递的种类确定有效性，指的是如果缺胳膊少腿将在控制台报错，而如果是AB类，将不会报错，只是不会显示数据，这有时候粗心大意会很不方便

 

 

 

 

 

子=>父时，emit Event传递

child:

定义一个叫sendMsg的@click函数并返回一个data函数的msg的数据:

<button @click="sendMsg">send</button>

data(){
	return{
		msg:'mydata'
		}
}

发送给父级:

methods:{
	sendMsg(event){
		this.$emit("sendmsg",this.msg)
	}
}

 

parent:

获取传过来的数据并初始化得到它的数据赋值给msg完成子级到父级的数据传递:

<Child @sendmsg="getMsg" ></Child>
{{ msg }}

data(){
	return{
		msg:""
        }
}

methods:{
	getMsg(data){
		console.log(data)
		this.msg = data			
	}
}

 

3.动态组件：

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

所以有了利用<keep-alive>切换组件，但是官网事例上只有效果没有代码，我写了一个跟它的效果图一样的简单事例：

把子级导入父级与父级相连接，然后利用<keep-alive>让子级被包裹而实现得到缓存后动态切换：

<template>
	<div>	
		<keep-alive>
			<component :is="changeinfo"></component>
		</keep-alive>
	</div>
</template>

<script>
	import Ch from "./child.vue"
	export default{
		name:"ft",
		data(){
			return{
				changeinfo:"Ch"
			}
		},
		components:{
			Ch
		}
	}
</script>

<style scoped>
	
</style>

父级负责带儿子，也可以一窝，然后子级装扮自己，灵活利用模板语法和逻辑动态实现交互，这样很好就像父级对App一样:

<template>
	<div class="box">
		<div class="btn">
			<button @click="changeinfo">my hope1</button>
			<button @click="changeinfo2">my hope2</button>
			<div class="frame1">
				<span v-show="myshow">
					{{ msg }}
				</span>
				<span v-show="myshow2">
					{{ msg2 }}
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"child",
		data(){
			return{
				msg:"I hope my family are well forever",
				msg2:"I hope my family is well forever222",
				myshow:true,
				myshow2:false
			}
		},
		methods:{
			changeinfo(){
				if(this.myshow==false){
					this.msg="I hope my family are well forever";
					this.myshow2=false;
					this.myshow=true;
				}else{
					this.myshow=true;
				}
			},
			changeinfo2(){
				// console.log(this.myshow2)
				if(this.myshow2==false){
					this.msg2="I hope I will stronger more than";
					this.myshow=false;
					this.myshow2=true;
				}else{
					this.myshow2=true;
				}
			}
		}
	}
</script>

<style scoped>
.box{
	width:200px;
	height: 100px;
	padding: 200px;
	color:gray;
	font-weight: 600;
}
.btn{
	border-radius:25px;
	opacity: 0.8;
}
.frame1{
	box-shadow: 5px 5px 5px #888888;
	border:3px pink solid;
	padding: 5px;
	width:100%;
	height:100px;
}
button:hover{
	-webkit-transform: rotateY(22deg);
}
</style>

（可以忽略我的Style只留下边框的border就好了，我是因为强迫症）