上一篇说了最基本的环境搭建和一些安装的问题,现在因为跟着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就好了,我是因为强迫症)