- v-on
作用
给标签绑定事件
语法
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
示例
<template>
<div>
<h1>v-on和methods</h1>
<p>num:{{ num }}</p>
<!-- v-on可以简写成 @。 即 @事件名="methods中的函数" -->
<!-- 事件名可以是任意合法的dom事件 -->
<button v-on:click="num = 2">执行少量代码</button>
<br /><br />
<button @click="fn">执行methods中的函数</button>
<br /><br />
<button @mouseenter="fn2('阿翔18')">执行methods中的函数,传实参</button>
<br /><br />
<button @click="fn3">执行methods中的函数,this指向当前组件</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
};
},
methods: {
fn() {
alert("呜呜呜");
},
fn2(a) {
alert(a);
},
fn3() {
this.fn2("狗叫");
},
},
};
</script>
<style>
</style>
methods
它是一个对象，在这个对象中定义函数
export default {
methods: {
函数1: function(){
},
函数2(){
}
}
- v-for
作用
列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标结构可以是：数组 / 对象 / 数字
示例
<template>
<div>
<h1>v-for</h1>
<!-- 数组循环 -->
<ul>
<li v-for="(item, idx) in arr" :key="idx">
{{ item.id }}{{ item.name }}
</li>
</ul>
<hr />
<!-- 对象遍历 -->
<ul>
<li v-for="(value, idx) in obj" :key="idx">{{ value }}{{ idx }}</li>
</ul>
<hr />
<!-- 数字循环 -->
<p v-for="item in 100" :key="item">呜呜呜</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: "阿翔" },
{ id: 2, name: "小胖" },
],
obj: {
a: 1,
b: 2,
},
};
},
};
</script>
<style>
</style>
- v-text v-html
语法
- v-text="vue数据变量"
- v-html="vue数据变量"
示例
<template>
<div>
<!-- v-text把值当成普通字符串显示, v-text ===> innerText -->
<!-- v-html把值当做html解析,v-html ===> innerHTML -->
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<h1>我是一个h1标签</h1>",
};
},
};
</script>
- v-if 和 v-show
作用
控制标签的可见与不可见
语法
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" /> 如果vue变量的值为true，就可见，否则就不可见。
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
示例
<template>
<div>
<h1>v-show 和 v-if</h1>
<!-- v-show:设置css样式 display:none让元素不可见 -->
<!-- v-if:根本没有创建这个元素,所以不可见 -->
<!-- v-show的值可直接设为false或true -->
<p v-show="true">v-show</p>
<p v-if="isOK1">v-if</p>
</div>
</template>
<script>
export default {
data() {
return {
isOK: false,
isOK1: true,
};
},
};
</script>
<style>
</style>
小结
-
v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
-
- 注意无论变量是否为true还是false,它一定会创建元素的。
-
v-if 会动态创建和删除元素。
-
- 在频繁的切换可见与不可见时，它的效率会低一点
- 如果变量的值为false,它将不会创建元素
- v-if,v-else-if, v-else
功能
模板中的选择结构
格式
与js中的if选择结构是一致的。
示例
<template>
<div>
<h1>v-if else</h1>
<p v-if="mark > 80">优秀</p>
<p v-else-if="mark >= 60">一般</p>
<p v-else>不及格</p>
</div>
</template>
<script>
export default {
data() {
return {
mark: 50,
};
},
};
</script>
<style>
</style>
- v-bind
作用
v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）.
格式
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>
可简写为 : 冒号
<img :src="data数据">
示例
<template>
<div>
<h2>v-bind</h2>
<p>{{ name }}</p>
<!-- v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。 -->
<img v-bind:src="imgUrl" alt="" />
<!-- 简写 -->
<img :src="imgUrl" alt="" />
</div>
</template>
<script>
export default {
data() {
return {
name: "鱿鱼须",
imgUrl: "https://i03piccdn.sogoucdn.com/6f6a34b4c6f6b32f",
};
},
};
</script>
<style>
</style>
v-model双向绑定
语法
v-model="data数据变量"
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
示例
<template>
<div>
<h1>v-model</h1>
<!--表单元素 v-model="数据" -->
<!-- 表单元素能接受用户的输入===>视图的变化===>数据的变化 -->
<input v-model="name" />
<hr />
{{ name }}
</div>
</template>
<script>
export default {
data() {
return {
name: "阿翔",
};
},
};
</script>
<style>
</style>
视图改变数据也随着改变
数据改变视图也随着改变
v-model适用于表单开发，自动获取用户输入或选择数据
v-model修饰符
语法
-
- v-model.修饰符="vue数据变量"
-
-
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在失去焦点时触发更改而非inupt时
-
示例
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>
.number可以理解为将字符转成number类型
.lazy输入框失去焦点后视图同步到数据
