vue基础-插值表达式
vue 有一个最基本的功能: 数据渲染。将数据(变量或者利用 ajax 从后端获取到的数据) 展示到页面上。这里它不会直接操作 dom ,而是有自己的语法。
<template>
<div>
<h2>01插件表达式</h2>
<p>名字是:{{ (name + "天托") }}</p> //拼接
<p>年龄是:{{ info.age }}</p>
<p>品种是:{{ info.age > 18 ? "老桑" : "小桑" }}</p> //三元
<p>爱好是:{{ arr[0] }}</p>
</div>
</template>
<script>
//表达式:可以被console.log就是表达式
export default {
data() {
return {
name: "某桑",
info: {
age: 18,
},
arr: ["Like to smoke"],
};
},
};
</script>
在 vue 中 {{}} 语法,叫做: 插值表达式,就是输出{{}}中的表达式的值的语法
把 **{{}}** 理解为一个占位符(一个坑),{{msg}}就是把msg显示在这个占位符中(把msg插到坑里面去)
语法
{{}} 可以:
-
写 data 数据字段名称
-
对 data 数据字段进行表达式运算
- 拼接
- 算术运算
- 三元运算
- ...
{{}} 不能:
- js 语句: 声明变量,分支,循环
- 访问在 vue 实例中的 data 之外定义的自定义的变量
vue指令 v-bind
作用
v-bind 用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。
格式
1 <元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
2 // 简写, 省略v-bind
3 <元素 :属性名1="值1" :属性名2="值2"></元素>
4
5 //v-bind指令简写方法 : 冒号
6 <img :src="data数据">
示例
<template>
<div>
<h2>v-bind</h2>
<p>名字是:{{ name }}</p>
<!-- <img v-bind:src = "imgUrl" alt = ""> -->
<!-- 简写 -->
<img :src="imgUrl" alt="" />
</div>
</template>
<script>
// v-bind: 动态绑定标签的属性值
export default {
data() {
return {
name: "小猴",
imgUrl:'图片链接'
};
},
};
</script>
vue指令 v-for
功能
列表渲染,所在标签解构,按照数据数量循环生成。
语法
1 <标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标解构可以是: 数组/对象/数字
示例
<template>
<div>
<h2>v-for</h2>
<ul>
<!--
数组
item 就循环变量，用来指向当前的数组元素
idx:下标
key要是一个在循环的过程中的唯一值
-->
<li v-for="(item, idx) in arr" :key="item.id">
{{ idx + 1 }}, {{ item.name }}, {{ item }}, {{ idx }}
</li>
</ul>
<ul>
<!-- {{item}} -->
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
<hr />
<!-- 对象 -->
<p v-for="(value, propName) in obj" :key="propName">
{{ value }}-{{ propName }}
</p>
<hr />
<!-- 数字 -->
<p v-for="idx in 100" :key="idx">{{ idx }} I miss you</p>
</div>
</template>
<script>
export default {
data() {
return {
obj: { a: 1, b: 2 },
arr: [
{ id: 1, name: "小花" },
{ id: 2, name: "小明" },
{ id: 3, name: "小白" },
],
list: [{ id: 1, title: "新闻1" }],
};
},
};
</script>
小结
- v-for的功能是对标签进行循环生成
- 快速把数据赋予到相同的dom结构上循环生成
vue指令v-text和v-html
语法
1 v-text="vue数据变量"
2 v-html="vue数据变量"
示例
<template>
<div>
<h2>v-text,v-html</h2>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>",
};
},
};
</script>
小结
-
v-text把值当成普通字符串显示, v-text ===> innerText
-
v-html把值当做html解析,v-html ===> innerHTML
vue指令v-show和v-if
语法
1 <标签 v-show="vue变量" /> //v-show 用的display:none隐藏 (频繁切换使用)
2 <标签 v-if="vue变量" /> //v-if 直接从DOM树上添加或移除
3
4 如果vue变量的值为true，就可见，否则就不可见。
示例
<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: true
}
}
}
</script>
小结
-
v-show性能较好,对应需要频繁切换显示与隐藏的功能,可以使用 v-show- 注意无论变量是否为 true ,它一定会创建元素
-
v-if会动态创建和删除元素- 在频繁的切换可见与不可见时,它的效率会低一点
- 如果变量的值为 false ,它将不会创建元素
- 使用场景: 如果是登陆用户就显示头像
<img src="xxx" v-if="isLogin">
vue指令v-if,v-else-if,else
语法
1 //与js中的if选择结构是一致的。
2
3 <标签 v-if="条件"> </标签>
4 <标签 v-else-if="条件"> </标签>
5 <标签 v-else-if="条件"> </标签>
6 <标签 v-else> </标签>
示例
<template>
<div>
<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: 60,
};
},
};
</script>
v-on和methods
作用
给标签绑定事件
语法
1 <标签 v-on:事件名="要执行的少量代码" >
2 <标签 v-on:事件名="methods中的函数" >
3 <标签 v-on:事件名="methods中的函数(实参)">
4
5 //v-on可以简写成 @ 即 @事件名="methods中的函数"
6 //事件名可以是任意合法的dom事件
示例
<template>
<div>
<h2>v-on</h2>
<p>num:{{ num }}</p>
<button v-on:click="num = 2">执行少量的代码</button>
<br />
<button @mouseenter="fn">鼠标进入-执行methods中的函数</button>
<br />
<button v-on:click="fn2(100)">执行methods中的函数,传入实参</button>
<br />
<button v-on:click="fn3">打印this</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
};
},
// vue的配置项
// 定义函数
//this会指向当前的组件
methods: {
fn: function () {
console.log("fn");
},
fn2(n) {
console.log(n);
},
fn3() {
//访问数据
console.log(this, this.age);
//调用其他的methods
this.fn();
},
},
};
</script>
vue配置项 methods
作用
它是一个对象,在这个对象中定义函数
格式
1 export default {
2 methods: {
3 函数1: function(){
4 },
5 函数2(){
6 }
7 }
使用场景
- 与 v-on 配合使用
- 在 methods 内部访问数据
this.xxx - 在 methods 内部调用其他的 methods
vue指令 v-on事件对象
语法:
- 无传参, 通过形参直接接收
- 传参, 通过
$event指代事件对象传给事件处理函数
示例
<template>
<div>
<h2>事件对象</h2>
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default {
methods: {
one(e) {
e.preventDefault();
},
two(num, e) {
e.preventDefault();
},
},
};
</script>
vue指令 v-on事件修饰符
语法
1 //<标签 @事件名.修饰符="methods里函数" />
2
3 .stop //阻止事件冒泡
4 .prevent //阻止默认行为
5 .once //程序运行期间, 只触发一次事件处理函数
示例
<template>
<div @click="fatherFn">
<h2>事件修饰符</h2>
<!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
<button @click.stop="btn">.stop阻止事件冒泡</button><br>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a><br>
<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button><br>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被触发");
},
btn(){
console.log(1);
}
}
}
</script>
vue指令 v-on按键修饰符
语法
1 @keyup.enter //监测回车按键
2 @keyup.esc //监测返回按键
示例
<template>
<div>
<h2>v-on按键修饰符</h2>
<!-- 在输入框中按下回车键才会执行fn -->
<input @keyup.enter ="fn"/>
</div>
</template>
<script>
export default {
methods:{
fn(){
console.log('键盘抬起了')
}
}
}
</script>
vue指令 v-model双向绑定
语法
-
v-model="data数据变量"
-
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
v-model适用于表单开发，自动获取用户输入或选择数据
示例
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<!-- 绑定输入 -->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<!-- 绑定选择 -->
<div>
<span>来自于哪里?</span>
<select v-model="from">
<option value="西安">陕西-西安</option>
<option value="燕京">北京-燕京</option>
<option value="大连">辽宁-大连</option>
</select>
</div>
<div>
<!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
<input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
<input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
}
}
};
</script>
vue指令-v-model修饰符
语法
1 // v-model.修饰符 = "vue数据变量"
2
3 .number //以 parseFloat转成数字类型
4 .trim //去除首尾空白字符
5 .lazy //在失去焦点时触发更改而非 input时
示例
<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>
