关键词：
文章目录
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学习总结笔记(代码片段)
文章目录1.Vuex插件1.1什么是Vuex？1.2为什么要用Vuex？1.3Vuex的原理图2.搭建Vuex环境2.1安装Vuex的注意事项2.2搭建Vuex环境2.3Vue的注意事项2.4Vuex的使用大体流程3.Vuex实现求和案例4.Vuex的开发者工具5.Vuex中的getters配置项5.1getters介... 查看详情
vue3学习总结笔记(十三)(代码片段)
文章目录1.Vue3简介2.创建Vue3项目工程2.1使用Vue-cli创建2.2使用Vite创建Vue3工程3.Vue3之分析工程结构3.Vue3之安装开发者工具4.Vue3之setup5.Vue3之ref函数5.1ref函数处理基本数据类型5.2ref函数处理对象类型6.Vue3之reactive函数7.Vue3之与vue2进行... 查看详情
vue3学习总结笔记(十三)(代码片段)
文章目录1.Vue3简介2.创建Vue3项目工程2.1使用Vue-cli创建2.2使用Vite创建Vue3工程3.Vue3之分析工程结构3.Vue3之安装开发者工具4.Vue3之setup5.Vue3之ref函数5.1ref函数处理基本数据类型5.2ref函数处理对象类型6.Vue3之reactive函数7.Vue3之与vue2进行... 查看详情
学习笔记之vuex总结（vue状态管理）(代码片段)
一、前言接触Vuex之前我们组件间共享数据的方式父向子传值：v-bind属性绑定子向父传值：v-on事件绑定兄弟组件之间共享数据：EventBus1)$emit发送数据的那个组件2)$on接收数据的那个组件上面这三种共享数据方式，只... 查看详情
vue学习总结笔记(代码片段)
文章目录1.Vue的绑定class样式1.1Vue的三种绑定class的样式方式1.2Vue的class绑定样式改变数值2.条件渲染3.Vue的列表渲染4.key的作用和原理4.1index作为key的效果和问题4.2id作为key的效果(最佳)3.3面试题：react，vue中的key有什么作用&... 查看详情
vue学习总结笔记(代码片段)
文章目录1.缓存路由组件2.路由组件对应的两个特别的钩子函数3.路由守卫3.1全局前置路由守卫3.2this.$route的meta3.3全局后置路由守卫4.独享路由守卫5.组件内路由守卫6.hash模式和history模式6.1什么是hash？6.2hash模式和history模式6.3... 查看详情
vue学习总结笔记(代码片段)
文章目录1.使用Vue写一个表单数据2.Vue过滤器2.1moment.js和day.js的库2.2Vue的过滤器的使用3.v-text指令4.v-html指令(谨慎使用！！！)4.1cookie工作原理4.２v-html指令5.v-clock指令6.v-once指令7.v-pre指令8.Vue的自定义指令8.1设置自... 查看详情
vue学习总结笔记(代码片段)
文章目录1.render函数1.1为什么正常情况下的写法不能生效？1.2使用完整版的vue.js来解决没有模板解析器的问题1.3使用render函数来解决没有模板解析器的问题2.修改VueCli脚手架的默认配置3.ref属性(被用来给元素或子组件注册引用... 查看详情
hbase学习笔记问题总结(代码片段)
遇到问题原因,修改了network2017-04-0416:45:54,556ERROR[main]master.HMasterCommandLine:Masterexitingjava.lang.RuntimeException:FailedconstructionofMaster:classorg.apache.hadoop.hbase.master.HMasterCommandLine$Lo 查看详情
vue第六天学习笔记之vuecli3详解(代码片段)
目录 1.VueCLI详解1.1Runtime-Compiler和Runtime-only的区别2.VueCLI33.箭头函数3.1箭头函数的基本使用3.2箭头函数参数和返回值3.3箭头函数中的this的使用4.vue-router详解4.1认识路由4.2前端路由的规则4.3vue-router基础1.VueCLI详解1.1Runtime-Compiler和Run... 查看详情
深度学习笔记：归一化问题总结(代码片段)
理论系列： 深度学习笔记（一）：卷积层+激活函数+池化层+全连接层 深度学习笔记（二）：激活函数的前世今生 深度学习笔记（三）：BatchNorm（BN... 查看详情
vue笔记大融合总结(代码片段)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0 查看详情
springcloud学习笔记总结(代码片段)
文章目录1.SpringCloudBus之消息总线介绍2.SpringCloudBus之搭建RabbitMQ3.SpringCloudBus之动态刷新全局广播的设计思想和选型4.SpringCloudBus之动态刷新全局广播配置实现5.SpringCloudStream之消息驱动介绍6.SpringCloudStream之设计思想7.SpringCloudStream之... 查看详情
springcloud学习笔记总结(代码片段)
文章目录1.SpringCloudBus之消息总线介绍2.SpringCloudBus之搭建RabbitMQ3.SpringCloudBus之动态刷新全局广播的设计思想和选型4.SpringCloudBus之动态刷新全局广播配置实现5.SpringCloudStream之消息驱动介绍6.SpringCloudStream之设计思想7.SpringCloudStream之... 查看详情
react学习笔记总结(代码片段)
针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情
尚硅谷vue系列教程学习笔记(代码片段)
尚硅谷Vue系列教程学习笔记（9）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共有... 查看详情
尚硅谷vue系列教程学习笔记（10）(代码片段)
尚硅谷Vue系列教程学习笔记（10）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共... 查看详情
springcloud学习笔记总结(代码片段)
文章目录1.zuul与Gateway2.Gateway之简介3.Gateway之核心概念+架构流程4.Gateway之搭建Gateway服务器+测试5.Gateway之路由的两种配置方式6.Gateway之配置动态路由7.Gateway之Predicate分类8.Gateway之Filter(GatewayFilter)9.SpringCloudConfig之分布式配置... 查看详情