Vue的样式操作
- 添加样式:数组(box2)
- 三目表达式:
<div :class="flag?'box':'fs40'">aaaaaa</div>
- 对象:
- 对象 {‘类名’:布尔类型的值}
<div :class="{'box':true,'fs40':null}">aaaaaas</div>
<div :class="box3">aaaaaas</div>
- 数组内置对象
<div :class="box4">aaaaaas</div>
- 对象 {‘类名’:布尔类型的值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../素材/vue-2.4.0.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red
}
.fs40 {
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
<div class="box fs40">aaaaaa</div>
<div :class="box1">aaaaaa</div>
<!-- 添加样式:数组 -->
<div :class="box2">aaaaaa</div>
<!-- 三目表达式 -->
<div :class="flag?'box':'fs40'">aaaaaa</div>
<!-- 对象 {'类名':布尔类型的值} -->
<div :class="{'box':true,'fs40':null}">aaaaaas</div>
<div :class="box3">aaaaaas</div>
<!-- 数组内置对象 -->
<div :class="box4">aaaaaas</div>
<button @click="add">add</button>
</div>
</body>
<script>
let vn = new Vue({
el: '#app',
data: {
box1: 'box',
box2: ['box'],
box3: {
box: true,
fs40: true
},
box4: [{box: true}, {fs40: true}],
flag: false,
},
methods: {
add() {
this.box1 = this.box1 + ' fs40'
this.box2.push('fs40')
}
}
})
</script>
</html>
- v-for 和key
-
v-for 必须搭配key属性使用
-
key 要求:必须是数字或者字符串,且必须是唯一值
-
作用:提高重排效率就地复用(diff算法)
-
v-if和v-show 相同点:显示和隐藏元素
-
不同点:v-if是直接删除dom元素,v-show是通过display:none隐藏元素
-
应用场景:频繁切换的时候使用v-show。只切换一次或不频繁切换时用v-if
-
- v-if和v-show
- 相同点:显示和隐藏元素
- 不同点:v-if是直接删除dom元素,v-show是通过display:none隐藏元素
- 应用场景:频繁切换的时候使用v-show。只切换一次或不频繁切换时用v-if
什么是路由
- 路由是SPA单页面应用程序
- 后端路由:对于普通的网站,所有超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。
- 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换。页面跳转 router-link to=“跳转的地址”
使用路由的步骤:
-
引入路由(import router)
-
创建路由实例(new router)
-
创建映射关系
- 数组里面是路由对象
- 路由对象里面有path:路由路径,name:名字,component:路由组件
-
将映射关系挂载到路由上
预留展示区域:App.vue下 router-view标签
- 标签补全
- tab
- 快捷代码
- 格式化:ctrl+alt+L
- 快捷导入:alt+回车
- ctrl+d 复制一行代码
- views文件夹下的 template标签里只能有一个根标签
- @/ 代表 从src文件夹下面查找
- style标签里面
- lang
- 声明的css预处理
- scoped
- 样式隔离 给类名加上唯一标识
- lang
- 启动项目 npm run sever(可变)