vscode快捷键打开终端==>ctrl + shift + y
使用我的代码的时候，要下载一个vue文件，还有就是要注意文件所放的路径要写对。或者你可以使用在线版本： ，把这段代码复制，然后在相应的地方替换。
所有的指令都是属性，所以写的地方应该在标签里面。插值表达式只能写在双标签之间。
例如: <div v-text="msg"></div> 这个是指令书写的地方例如：
<div>{{msg}}</div> 这个是插值表达式书写的地方
v-text 作用：输出一段文本
v-html 作用：输出一段文本，但是如果里面有html结构，会解析出来，如果里面写了js，是解析不出来的，只能解析html
v-bind 作用：动态绑定数据。让冒号后面的属性值进行动态的绑定，动态绑定就是绑定data里面的数据。可以动态绑定图片；可以动态绑定id号，用来删除这个id号的内容；可以动态绑定class样式，然后判断在什么条件下加这个样式，什么时候不加；可以动态绑定多个样式；可以动态设置字体大小。只要这个属性的值是动态变化的，就可以把这个属性设置为动态属性，不管是style，class，href都可以用。v-bind是一个单向绑定，意味着如果model中的数据变化，view中的显示结果也会变化，但是反过来就不行了，v-model就可以双向数据绑定
(重点)v-for 作用：循环遍历。可以遍历数组或者对象，数组中没有键(key)，但是对象中有索引(index)，
(重点)v-model 作用：双向绑定。如果是通过索引的方式修改数组中的数据，那么页面并不会自动的更新数据；同时如果通过length属性修改数组的长度，页面中的数据也不会有动态的更改。
v-show 作用：显示隐藏元素。添加一个disabled:none的样式来进行隐藏元素。只是隐藏，但是页面上还是会生成结构。控制显示隐藏结构。如果是操作大量的dom元素，可以使用v-show，这样避免频繁的创建和销毁dom。例如我有很多的值，我需要频繁的显示和隐藏，而不需要反复创建dom结构，就可以使用v-show来做。
v-if 作用：也是显示隐藏元素，还有一个作用是用来判断。通过动态绑定的值来确定是否生成结构，如果是false，页面上将不会生成html结构。控制结构的销毁和生成。异步请求的时候，使用v-if，或者涉及到生成新的dom结构就使用v-if，就是抛弃以前的结构，需要产生新的结构。
v-if 和 v-else 和v-else-if 作用：用来判断，满足哪个条件就执行哪个条件的内容
(重点)v-on 作用：写自定义函数，动态绑定一个事件或多个事件。事件可以传参数，事件可以搭配修饰符使用，修饰符有.stop，.prevent等等；用.stop可以阻止冒泡；用.prevent可以阻止标签的默认行为，例如阻止跳转，一般给a标签使用；可以使用多个修饰符同时使用。事件还可以搭配键盘的键值使用，键值就是键盘上每一个按键所对应的数字或者英文。键码表地址 https://www.cnblogs.com/yiven/p/7118056.html 。enter回车键的键码是13。还可以使用对象语法，就是使用多个事件，但是这种语法不支持修饰符。
v-cloak 作用：可以在结构没加载出来的时候先隐藏未编译的内容，等待结构生成或者js加载完成后再显示编译的内容。
例子：插值表达式 v-text v-html 的演示
在html标签内插入一段文字*****
template里面的结构
<template>
<div>
<div>{{msg}}</div> <!-- 插值表达式 -->
<div v-text="msg"></div> <!-- v-text -->
<div v-html="msg"></div> <!-- v-html -->
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
msg: "<button>文字</button>" //上面获取这里的数据
};
}
};
</script>
在html标签内插入一段文字效果图
例子：v-bind 的演示
动态添加图片*****(常用)
template里面的结构
<template>
<div>
<img :src="src" alt=""> <!-- 动态添加图片 -->
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
src: "@/assets/img/login/wechat.png", //这里写你的图片路径
};
}
};
</script>
动态添加图片效果图
动态删除ID号*****(常用)
template里面的结构
<template>
<div>
<a :href="'./del?id='+id">删除ID号{{id}}的成员</a> <!-- 删除这个ID号的成员 -->
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
id: 5 //现在的ID号为5
};
}
};
</script>
删除ID号效果图
动态添加样式*****(常用)
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<span :class="{pinkFont:hanPink}">我是粉红色字</span> <!-- 第一种写法 -->
<span :class="{pinkFont:hanPink==3}">我是粉红色字</span> <!-- 第二种写法 -->
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
hanPink: true,//第一种写法
hanPink: 3,//第二种写法
};
}
};
</script>
css里面的结构
<style lang="scss">
@import "../index.scss";
.myneeds {
}
.shiyan {
width: 100%;
height: 100%;
.shiyan1 {
width: 500px;
height: 500px;
margin: 35px auto;
background-color: #eae8e8;
}
.pinkFont {
color: hotpink;
}
}
</style>
第一种写法动态添加样式效果图
第二种写法动态添加样式效果图
动态添加两个样式*****(常用)
动态添加的时候，记得先在data数据里面绑定样式，这样才能使用
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<span :class="[pinkFont,underline]">动态绑定两个样式</span>
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
pinkFont: 'pinkFont', //动态绑定样式
underline: 'underline', //动态绑定样式
};
}
};
</script>
css里面的结构
<style lang="scss">
@import "../index.scss";
.myneeds {
}
.shiyan {
width: 100%;
height: 100%;
.shiyan1 {
width: 500px;
height: 500px;
margin: 35px auto;
background-color: #eae8e8;
}
.pinkFont {
color: hotpink;
}
.underline {
text-decoration: underline;
}
}
</style>
动态添加两个样式效果图
动态设置字体大小*****(常用)
动态添加的时候，记得先在data数据里面绑定样式，这样才能使用
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<span :style="'font-size:'+fs+'px'">动态设置字体大小</span> <!--第一种写法-->
<span :style="{fontSize:fs+'px'}">动态设置字体大小</span> <!--第二种写法-->
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
fs:50, //动态设置字体的大小
};
}
};
</script>
第一种写法动态设置字体大小效果图
第二种写法动态设置字体大小效果图
例子：v-for 的演示
1.遍历数组的内容(显示索引)*****(常用)
不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，是不会显示索引的
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}-{{index}}</li>
</ul>
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
list:["写代码","调bug","分享"],
};
}
};
</script>
遍历数组的内容效果图
2.遍历对象的内容(键值对显示)*****(常用)
循环里面不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，就只显示值，不显示键，键就是对象里冒号前面的内容。说明一下，对象里面的是键值对。
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<ul>
<li v-for="(item,index) in computer" :key="index">{{item}}-{{index}}</li>
</ul>
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
computer:{
brand:"小米",
color:"white",
size:5.2,
price:2000
}
};
}
};
</script>
遍历对象的内容(键值对显示)效果图
3.遍历对象的内容(显示值)*****(常用)
循环里面不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，就只显示值，不显示键，键就是对象里冒号前面的内容。说明一下，对象里面的是键值对。
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<ul>
<li v-for="item in computer" :key="item">{{item}}-{{index}}</li>
</ul>
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
computer:{
brand:"小米",
color:"white",
size:5.2,
price:2000
}
};
}
};
</script>
遍历对象的内容(显示值)效果图
例子：v-model 的演示
实现数据双向绑定*****(常用)
view的数据进行更改，data的数据也会随着更改，反之，一样。他们已经绑定在一起了。
template里面的结构
<template>
<div class="shiyan">
<div class="shiyan1">
<ul>
<input type="text" v-model="msg">
</ul>
</div>
</div>
</template>
script里面的结构
<script>
export default {
data() {
return {
msg:"努力一点点",
};
}
};
</script>
实现数据双向绑定效果图
例子：v-show和v-if 的演示
html结构
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue2.6.10.js"></script>
<style lang="scss">
.shiyan {
width: 100%;
height: 100%;
}
.shiyan1 {
width: 500px;
height: 500px;
margin: 35px auto;
background-color: #eae8e8;
}
</style>
</head>
<body>
<div id="app">
<div class="shiyan">
<div class="shiyan1">
<div v-show="isVisible">我是第一行 v-show</div>
<div v-if="isVisible">我是第二行 v-if</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isVisible: true,
}
})
</script>
</body>
</html>
v-show和v-if 显示时演示效果图
v-show和v-if 销毁时演示效果图
要销毁的时候，要改一下script的代码
<script>
var vm = new Vue({
el: '#app',
data: {
isVisible: false,//这里改成false
}
})
</script>
例子：v-if 和 v-else 和v-else-if 的演示
html结构
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue2.6.10.js"></script>
<style lang="scss">
.shiyan {
width: 100%;
height: 100%;
}
.shiyan1 {
width: 500px;
height: 500px;
margin: 35px auto;
background-color: #eae8e8;
}
</style>
</head>
<body>
<div id="app">
<div class="shiyan">
<div class="shiyan1">
<span v-if="score >= 90">A</span>
<span v-else-if="score >= 80">B</span>
<span v-else-if="score >= 70">C</span>
<span v-else-if="score >= 60">D</span>
<span v-else>E</span>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 88,//上面的v-if以这里的值来判断显示哪个字母
}
})
</script>
</body>
</html>
v-if 和 v-else 和v-else-if 的演示效果图
例子：v-on 的演示
html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.6.10.js"></script>
<style lang="scss">
.shiyan {
width: 500px;
height: 500px;
margin: 35px auto;
background-color: #eae8e8;
}
</style>
</head>
<body>
<div id="app">
<div class="shiyan">
<!-- 两个都可以生效，就是写法不一样 -->
<button @click="showHide">控制显示隐藏</button>
<button @click="isVisible = !isVisible">控制显示隐藏</button>
<div v-show="isVisible">{{msg}}</div>
<p></p>
<!-- 两个都可以生效，就是写法不一样 -->
<button @click="addNum">点击的时候数字加1</button>
<button @click="num = num + 1">点击的时候数字加1</button>
<div>{{num}}</div>
<p></p>
<!-- 1.不使用圆括号，event被自动当作实参传入 -->
<!-- 2.使用圆括号，必须显式的传入$event对象，不能直接写event。不然只会把event当成一个变量，然后在data数据里搜索 -->
<!-- 一般event我写在最后，这样方便辨认，你想写在哪个位置都行。event里面有这个页面的所有内容，还有很多数据 -->
<!-- 括号里的都是实参，isVisible是data里面的isVisible数据，$event是整个页面的数据 -->
<button @click="seeData(isVisible,$event)">点我查看控制台数据</button>
<p></p>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "我是被控制的属性",
isVisible: true,
num: 18
},
methods: {
// 控制显示和隐藏
showHide() {
this.isVisible = !this.isVisible;
},
// 点击的时候数字加1
addNum() {
this.num = this.num + 1;
},
// 点我看控制台数据
// 这里的括号里面是形参。value用来接收上面所传进来的数据，event 是接收event的数据，名字随便你自己取，只要你能分出来就行
// 一般event我写在最后，这样方便辨认，你想写在哪个位置都行
seeData(value, event) {
console.log(value, event);
}
}
})
</script>
</body>
</html>
v-on 的演示效果图
1.控制显示隐藏
2.点击的时候数字加1
3.点我查看控制台数据。event里面有这个页面的所有内容
例子：v-cloak 的演示
这里使用了一个场景来模拟结构未生成，和结构已生成的的结果。未生成的时候是插值表达式，生成的时候就是js解析完成后的结果。我这里是使用了单次定时器来制作这个场景。
没使用v-cloak的html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.6.10.js"></script>
</head>
<body>
<div id="app">
<p>
{{ message }}
</p>
</div>
<script>
setTimeout(() => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
}, 2000);
</script>
</body>
</html>
没用v-cloak 之前的演示效果图
使用了v-cloak的html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.6.10.js"></script>
<style>
/* 这里添加v-cloak的样式 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak><!--这里使用v-cloak -->
{{ message }}
</p>
</div>
<script>
setTimeout(() => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
}, 2000);
</script>
</body>
</html>
用了v-cloak 之后的演示效果图
扫一扫
3362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
