Vue-day02
Vue-day02
提问:
1.引入vue的三种方式？
答：1网站链接外链引入
2下载vue.js代码引入
3node下载根目录找到文件夹引入
2.vue中指令有哪些？
答：v-if, v-for, v-on, v-html, v-text, v-model,v-show,v-click,v-bind,v-cloak,v-else,v-else-if
3.v-if，v-show有什么区别？
答：v-if: 移除元素 使用场景：偶尔使用
v-show：隐藏元素 使用场景：频繁切换
4.如何绑定事件？简写方式？
答：v-on：事件 绑定事件 简写方式：@ eg：v-on:click @click
5.如何绑定属性？简写方式？
答：v-bind：属性 绑定属性 简写方式： ：属性 eg: v-bind:class :class
6.MVVM是什么？
答：M(model)V(view)VM(viewModel)控制器
模型 视图
1.key的使用
key：只要元素需要循环，必须添加key作为唯一的标识
在body中
<div id="app">
<!-- <div class="box" v-for='(item,index) in arr' :key='item.id'> -->
<div class="box" v-for='(item,index) in arr' :key='index'>
<span>{{item.id}}</span>
<span>{{item.name}}</span>
<button @click='changeName(index)'>修改姓名</button>
</div>
</div>
在script中
let vm = new Vue({
// element 挂载点
el: '#app',
data: {
arr: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
]
},
methods: {
// 修改姓名
changeName(index){
this.arr[index].name='赵六'
}
},
// key:作用:添加唯一的标识,只要元素需要循环，那么都需要添加一个key作为唯一值(通常情况下会添加id)
})
在style中
.box{
width: 90%;
margin: 20px;
padding: 20px;
border: 1px solid blue;
}
2.动态类名
1.class
// 总结：1. :class='变量名' 变量名需要在data中声明,并且值要在style中定义
// 2. :class='[index%2==0:"red":"green"]' 只需要在style中声明类名
// 3. :class='{red:true,green:true}' 只需要在style中声明即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1 {
color: pink;
}
.blue {
background: blue;
}
.red{
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
</style>
</head>
<body>
<!-- 2.创建元素 -->
<div id="app">
<!-- 这是第一种绑定样式 -->
<p class="p1">我是P标签</p>
<!-- -->
<button @click="changeColor('green')">green</button> <button @click="changeColor('yellow')">yellow</button>
<p class="p1" :class='change'>我是P标签修改后的</p>
<hr>
<!-- 0:green 1:yellow 2:green 3:yellow 4:green 5:yellow
:class='[index%2==0?"green":"yellow"]'
-->
<div v-for='(item,index) in arr' :key='item.id' :class='[index%2==0?"green":"yellow"]'>{{item.name}}</div>
<hr>
<!-- {0:red,1:green,2:yellow 3:red,4:green，5:yellow} -->
<!-- 三行改变颜色 :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'-->
<div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3,green:index%3,yellow:index%3}'>{{item.name}}</div>
<hr>