Vue 学习总结笔记
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 学习总结笔记相关的知识，希望对你有一定的参考价值。
文章目录
1. Vue的 绑定class样式
1.1 Vue 的 三种绑定class的样式方式
Vue绑定class样式效果，就使用v-bind:class 或 :class来操作：
效果一，使用字符串方式绑定：
使用Math.random 和 Math.floor来随机变化class样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.normal
background-color: cornflowerblue;
border: 2px solid red;
.happy
background-color: red;
border: 2px solid yellowgreen;
.sad
background-color: gray;
border: 2px solid sandybrown;
</style>
</head>
<body>
<div id="root">
<!--
绑定class样式，字符串写法,适用于：样式的类名不确定，需要动态指定。
正常我们这里写两个class，它会默认读取第一个class,不会读取第二个class的。
我们使用Vue绑定的话，使用的就是v-bind来绑定，就不用担心这个问题了！
-->
<div class="basic" :class="mood" @click="changeMood">name</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
name:'张三',
mood:'normal'
,
methods:
changeMood()
const arr = ['happy','sad','normal'];
//Math.random()生成的随机数，随机生成[0,1)的数字，会生成0，但是不会生成1。
let i = Math.random()*3;
//Math.floor()是向下取整。
let down = Math.floor(i);
this.mood = arr[down];
)
</script>
</body>
</html>
效果二，绑定class样式，数组写法 ，使用数组来绑定多个class样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.style1
background-color: cornflowerblue;
.style2
border: 2px solid yellowgreen;
.style3
font-size: 40px;
</style>
</head>
<body>
<div id="root">
<!--
绑定class样式，数组写法，适用于：要绑定的样式个数不确定，名字也不确定。
-->
<div class="basic" :class="arr">name</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
name:'张三',
arr:['style1','style2','style3']
)
</script>
</body>
</html>
这种方式很好，我们可以直接通过操作arr数组，就可以改变样式的相关操作了。
效果三，绑定class样式，对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.style1
background-color: cornflowerblue;
.style2
border: 2px solid yellowgreen;
.style3
font-size: 40px;
</style>
</head>
<body>
<div id="root">
<!--效果三，绑定class样式，对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用。-->
<div class="basic" :class="obj">name</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
name:'张三',
obj:
style1:false,
style2:false,
style3:false,
)
</script>
</body>
</html>
数组写法和对象写法的style样式绑定是最常用的！
1.2 Vue 的class绑定样式 改变数值
像下面这种方式，想要通过data中的参数动态修改值的话，如果按照之前的写法就写成这种样子：
:style="font-size: sizeNumpx;"
但是，这种不对！Vue无法识别！因此可以改成下面的方式：
:style="fontSize: sizeNum+‘px’" 。
这种方式太麻烦，了解就好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.style1
background-color: cornflowerblue;
.style2
border: 2px solid yellowgreen;
.style3
font-size: 40px;
</style>
</head>
<body>
<div id="root">
<!--
如果按照之前的写法就写成这种样子：
:style="font-size: sizeNumpx"
但是，这种不对！Vue无法识别！因此可以改成下面的方式：
:style="fontSize: sizeNum+'px'" 。
-->
<div class="basic" :style="fontSize: sizeNum+'px'">name</div>
</div>
<script type="text/javascript">
//上面的样子就像下面的对象样式一样！
// let test = fontSize: sizeNum+'px';
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
name:'张三',
sizeNum:40
)
</script>
</body>
</html>
通过样式对象写法来确定值的效果：
这里有个规律，就是两个单词组成的就小驼峰法连接起来就可以了。
例如：background-color 就可以写为 backgroundColor。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.style1
background-color: cornflowerblue;
.style2
border: 2px solid yellowgreen;
.style3
font-size: 40px;
</style>
</head>
<body>
<div id="root">
<!--
能够修改数值的vue绑定对象的写法：
这里有个规律，就是两个单词组成的就小驼峰法连接起来就可以了。
例如：background-color 就可以写为 backgroundColor
-->
<div class="basic" :style="[styleObj , styleObj2]">name</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
name:'张三',
styleObj:
fontSize:'40px',
backgroundColor:'red'
,
styleObj2:
color:"green",
border:"2px solid yellow"
)
</script>
</body>
</html>
上面的方式我们还可以简写一下！ 就直接通过数组，数组中存储样式对象的内容，就可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic
width: 300px;
height: 100px;
border: 1px solid black;
.style1
background-color: cornflowerblue;
.style2
border: 2px solid yellowgreen;
.style3
font-size: 40px;
</style>
</head>
<body>
<div id="root">
<!--
能够修改数值的vue绑定对象的写法：
这里有个规律，就是两个单词组成的就小驼峰法连接起来就可以了。
例如：background-color 就可以写为 backgroundColor
-->
<div class="basic" :style="arrObj">name</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue(
el: "#root",
data:
name: '张三',
arrObj: [
fontSize: '40px',
backgroundColor: 'red'
,
color: "green",
border: "2px solid yellow"
]
)
</script>
</body>
</html>
2. 条件渲染
v-if ， v-else-if , v-else的用法和后台if语句一样的效果。有条件判别，true显示标签，false移除标签内容。
注意：这三个指令必须连续使用，不然报错!
v-if的指令语句一般和template标签使用！
v-show的用法，如果是true显示当前标签内容，false不显示(display:none), 。
v-if和v-show的区别？
- v-if是通过删节点来达到效果。而v-show是通过定义display来显示或隐藏的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
对于多个标签元素内容需要判断，我们可以使用div来操作，但是添加一个div影响结构，不推荐！
-->
<div v-if="n === 1">
<h2>你好</h2>
<h2>hello, world</h2>
<h2>早上好</h2>
</div>
<hr>
<!--
最好的情况就是使用template标签来实现，它就不会多余的添加什么标签！
-->
<template v-if="n === 1">
<h2>你好</h2>
<h2>hello, world</h2>
<h2>早上好</h2>
</template>
</div>
<script>
Vue.config.productionTip = false;
new Vue(
el:"#root",
data:
n:1
)
以上是关于Vue 学习总结笔记的主要内容，如果未能解决你的问题，请参考以下文章