这是我参与「第四届青训营 」笔记创作活动的第12天
绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<style>
.basic{
width: 100px;
height: 100px;
border: 1px solid lightblue;
}
.happy{
background-color: lightsalmon;
}
.sad{
background-color: brown;
}
.normal{
background-color: orange;
}
</style>
<!--引入Vue-->
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<!--准备的容器，id选择器-->
<div id="root">
<!--绑定class样式，字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<!--绑定class样式，数组写法，适用于：要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="arr">{{name}}</div>
<!--绑定class样式，数组写法，适用于：要绑定的样式个数确定、名字确定,但要动态的决定用不用-->
<div class="basic" :class="classobj">{{name}}</div>
<!--绑定style样式-->
<div class="basic" :style="styleobj">{{name}}</div><!--对象写法-->
<div class="basic" :style=[styleobj,styleobj2]>{{name}}</div><!--数组写法-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;//组织Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'你好',
mood:'normal',
arr:['happy','sad','basic'],//可以通过操作数组的元素，进行CSS样式的添加，shift和push
classobj:{
happy:false,
sad:false,
basic: false
},
styleobj:{
fontSize: '20px'
},
styleobj2:{
backgroundColor: 'red'
}
},
methods:{
changeMood(){
this.mood = 'happy'
}
},
})
</script>
</html>
条件渲染
**1.v-if **
写法：
(1).v-if="表达式”
(2).v-else-if="表达式"
(3).v-else="表达式" 适用于：切换频率较低的场景。
特点：不展示的D0M元素度被移除。
注意：v-if可以和：v-else-if、v-e1se一起使用，但要求结构不能被“打断”。
2.v-show 写法：V-show="表达式” 适用于：切换频率较高的场景。
特点：不展示的D0M元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<body>
<!--准备的容器，id选择器-->
<div id="root">
<!--使用v-show做条件渲染-->
<h2 v-show="false">{{name}}</h2>
<h2 v-show="1 === 1">{{name}}</h2>
<!--使用v-if做条件渲染-->
<h2 v-if="false">{{name}}</h2>
<h2 v-if="1 === 1">{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;//组织Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name: '你好'
}
})
</script>
</html>
列表渲染
**V-for指令 **
1.用于展示列表数据
2.语法：v-for="(item,index)in xxx"key="yyy"
3.可遍历：，数组、对象、字符串（用的很少）、定次数（用的很少）
<body>
<!--准备的容器，id选择器-->
<div id="root">
<ul><!--遍历数组-->
<li v-for="(p,index) in persons" :key="index">
{{p.id}}-{{p.name}}-{{p.age}}
</li>
</ul>
<!--遍历对象-->
<ul>
<li v-for="(value,key) of car" :key="key">
{{key}}--{{value}}
</li>
</ul>
<!--遍历字符串-->
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}--{{index}}
</li>
</ul>
<!--遍历指定次数-->
<ul>
<li v-for="(number,index) of 5" :key="index">
{{number}}--{{index}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;//组织Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:'18'},
{id:'002',name:'李四',age:'19'},
{id:'003',name:'王五',age:'20'}
],
car:{
name:'奥迪RS7',
price:'25万',
color:'黑色'
},
str:'hello'
}
})
</script>
</html>
涉及的面试题：
react、vue中的key有什么作用？ (key的内部原理)
1、 虚拟DoM中key的作用： key是虚拟DoM对象的标识，当数据发变化时，Vue会根据【新数据】生成【新的虚拟DoM】, 随后Vue进行【新虚拟DoM】与【I旧虚拟DoM】的差异比较，比较规则如下：
2、对比规则：
(1),旧虚拟DoM中找到了与新虚拟DoM相同的key:
1.若虚拟D0M中内容没变，直接使用之前的真实D0M!
2.若虚拟D0M中内容变了，则生成新的真实D0M,随后替换掉页面中之前的真实DOM。
(2).旧虚拟D0M中未找到与新虚拟DoM相同的key 创建新的真实DOM,随后渲染到到页面。
3,用index作为key可能会引发的问题：
1,若对数据进行：逆序添加、逆序删除等破坏顺序操作： 会产生没有必要的真实D0M更新==>界面效果没问题，但效率低。
2,如果结构中还包含输入类的D0M: 会产生错误D0M更新=>界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
2,如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。
