vue中的指令
(1)是什么
- {{}}有不能实现的,就需要一些别的指令来完成.
- 指令:必须用在某个组件或者标签上,拓展标签原有的功能(标签的自定义属性)
- 指令都是以-v 开头的
- 一个组件上可以有多个指令
v-bind指令
是什么:
- 用来动态绑定标签上属性的值(标签的属性值插值表达式不能设置)
语法:
- v-bind:属性名="值"
- 简写,省略v-bind :属性名="属性值"
代码如下图所示(动态绑定img标签的属性值)
<template>
<div>
<h1>vue,努力努力努力!</h1>
<p>我的名字是:{{name}}</p>
<p>我的爱好是:{{obj.hobby}}</p>
<img :src="imgURL" alt="">//v-bind的简写
</div>
</template>
<script>
//v-bind 动态绑定标签的属性值
export default {
data(){
return{
name:"古一",
arr:['axios'],
obj:{
hobby:"跑步"
}, imgURL:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654144202&t=912bec6247899f60e0c7e89fa36b40d1"
}
}
}
</script>
v-for指令
是什么:
列表渲染,所在标签结构,按照数据数量,循环生成(标签的循环生成)
语法:
<标签 v-for="("值","索引值") in 目标结构" :key="唯一值"></标签>(索引值不需要就可以省略)
- 数组(用的较多)
- 对象
- 数字
代码如下:
<template>
<div>
<ul>
<!--1. 数组 -->
<!-- v-for 循环 语法:v-for="(值,"索引值") in 目标结构 " :key="唯一值" " -->
<li v-for="(item, indx) in arr" :key="item.id">
{{ item.id }}-{{ item.name }}--{{ indx }}
</li>
</ul>
<ul>
<!-- 2.对象 -->
<li v-for="(value,name) in obj" :key="name">{{name}}---{{value}}</li>
</ul>
<ul>
<!-- 3.数字 -->
<li v-for="index in 100" :key="index">想谷一一</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: "小明" },
{ id: 2, name: "小白" },
{ id: 3, name: "小花" },
],
obj: {
name: "谷一一",
age: 18,
},
};
},
};
</script>
vue指令v-text和v-html
是什么:
标签的text和html更新
语法:
- v-text="vue数据变量'' (相当于innertext)
- v-html="vue数据变量"(相当于innerHTML)
代码如下:
<template>
<div>
<!-- v-text 相当于innertext-->
<p v-text="str"></p>
<br>
<!-- v-html 相当于innerHTML -->
<p v-html='str'></p>
</div>
</template>
<script>
export default {
data(){
return{
str:"<b>我是标签</b>"
}
}
}
</script>
- v-text 只获取文本内容,标签不解析
- v-html解析标签对应的样式
vue指令v-show和v-if
是什么:
控制标签的可见与不可见
语法:
<标签 v-show="vue变量">
- 频繁使用,使用的是display:none隐藏
- 无论可见不可见,都会创建元素
<标签 v-if="vue变量">
- 直接从Dom树上创建或者删除元素
- 可见会创建元素,不可见不会创建元素
代码如下所示:
<template>
<div>
<h2>v-show,v-if</h2>
<p v-show="isOK">v-show</p>
<p v-if="isOK">v-if</p>
</div>
</template>
<script>
export default {
data(){
return{
isOK:false
}
}
}
</script>
- vue变量的值是false,即是不可见,两个都不会显示
vue指令v-if,v-else-if,else
是什么:
模板中的选择结构
语法:
<标签 v-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else> </标签>
代码如下所示:
<template>
<div>
<p v-if="score>80">优秀</p>
<p v-else-if="score >=60">一般</p>
<p v-else>不及格</p>
</div>
</template>
<script>
export default {
data(){
return{
score:90
}
}
}
</script>
- 选择结构
v-on和methods指令
是什么:
标签的绑定事件
语法:
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
代码如下所示:
<template>
<div>
<!-- 语法: v-on:事件="" -->
<h1>v-on</h1>
<button v-on:click="num++">执行少量的代码</button>
<p>{{ num }}</p>
<button @click="fn">methods中的函数</button>
<button @click="fn2(500)">methods中的函数(实参)</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 2,
};
},
methods: {
fn: function () {
console.log(222);
},
fn2(num) {
console.log(num);
},
},
};
</script>
- <标签 v-on:事件名="要执行的少量代码" > 可以简写成 <标签 @:事件名="要执行的少量代码" > (通过data函数来传值到标签)
- <标签 v-on:事件名="methods中的函数" >(通过methods方法传值:代码逻辑较多,不适合使用data传值)
vue配置项-methods
是什么:
是一个对象,在对象中定义函数
语法:
export default {
methods: {
函数1: function(){
},
函数2(){
}
}
-
和v-on一起使用
methods中的this?
<template> <div> <!-- 语法: v-on:事件="" --> <h1>v-on</h1> <button v-on:click="num++">执行少量的代码</button> <p>{{ num }}</p> <button @click="fn">methods中的函数</button> <button @click="fn2(500)">methods中的函数(实参)</button> </div> </template> <script> export default { data() { return { num: 2, }; }, methods: { fn: function () { console.log(this); //此处this指向这个.vue组件,可以调所有值 例如:this.num等 }, fn2(num) { console.log(num); }, }, }; </script>
- methods中的this指向 当前.vue这个组件,可以取这个组件的所有值
