vue基础-插值表达式
vue有一个最基本的功能： 数据渲染。 将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。
这里它不会直接操作dom，而是有自己的语法。
在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。
把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）
语法
{{ }} 可以：
- 写data数据字段名称
- 对data数据字段进行表达式运算
-
- 拼接
- 算术运算
- 三元运算
- ...
{{}}不能：
- js语句：声明变量，分支，循环
- 访问在vue实例中的data之外定义的自定义的变量
vue中的指令
{{ }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。
指令
vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的） 。
作用
指令必须用在某个标签（或者是组件）上， 用来扩展标签的原有功能。
学习vue，一个主要的学习内容就是各种指令的用法
每个指令都有不同的作用，下面是一些常见的，必须要掌握的指令：
v-on
v-model
v-for
v-text
v-html
v-if
v-show
v-if,v-else-if, v-else
v-bind
v-bind
v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。
v-bind指令有简写用法 : 冒号，例如
<template>
<h2>v-bind绑定属性值</h2>
<p>{{name}}</p>
<!-- 绑定属性 v-bind:src 可以简写成 :src -->
<img :src="imgSrc" >
</template>
<script>
data () {
return {
name: "我不知道自己叫什么",
imgSrc: "xxxxxxxx图片地址"
}
}
</script>
vue指令-v-for
语法
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标结构可以是：数组 / 对象 / 数字
重点:想让谁循环这个属性就给谁
<template>
<div>
<h1>v-for</h1>
<ul>
<!-- 循环数组 -->
<li v-for="(item,index) in arr" :key="index">{{item.id}},{{item.name}}</li>
</ul>
<!-- 循环对象 -->
<p v-for="(value,name) in obj" :key="name">{{value}}-----{{name}}</p>
<!-- 普通循环 -->
<p v-for="index in 100" :key="index">{{index}}-梦里什么都有</p>
</div>
</template>
<script>
export default {
data(){
return{
arr:[{id:1,name:'小张'},{id:2,name:'小洋'},{id:1,name:'小杜'}],
obj:{a:1,b:2,c:3},
}
}
}
</script>
<style>
</style>
小结
- v-for的功能是对标签进行循环生成
- 快速把数据赋予到相同的dom结构上循环生成
vue指令v-text和v-html
语法:
-
-
v-text="vue数据变量"
-
v-html="vue数据变量"
-
<template>
<div>
<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以及v-else-if
语法
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" />
如果vue变量的值为true，就可见，否则就不可见。
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
<template>
<div>
<p v-if="ok">v-if</p>
<p v-show="no">v-show</p>
//v-if v-show的应用和区别
<p v-show="age>18">我成年了</p>
<p v-if="age<18">我成年了</p>
<p>我成年了</p>
//v-if和v-else-if和v-else的使用
<p v-if="cj>80">优秀</p>
<p v-else-if="cj>=60">一般</p>
<p v-else>不及格</p>
</div>
</template>
<script>
export default {
data(){
return{
ok:false,
no:true,
age:17,
cj:99
}
}
}
</script>
<style>
</style>
小结
- v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
-
- 注意无论变量是否为true还是false,它一定会创建元素的。
- v-if 会动态创建和删除元素。
-
- 在频繁的切换可见与不可见时，它的效率会低一点
- 如果变量的值为false,它将不会创建元素
v-on和methods
语法
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
注意
- v-on可以简写成 @。 即
@事件名="methods中的函数" - 事件名可以是任意合法的dom事件
<template>
<div>
<button @click="num++" :disabled="num==10">加</button>
<p>{{num}}</p>
<button @click="num--" :disabled="num==0">减</button>
<button @click="fn()">调用函数</button>
</div>
</template>
<script>
export default {
data(){
return{
num:1
}
},
methods:{
fn(){
this.num=0
console.log(11);
}
}
}
</script>
vue配置项-methods
作用
它是一个对象，在这个对象中定义函数
export default {
methods: {
函数1: function(){
},
函数2(){
}
}
使用场景
- 与v-on配合使用
- 在methods内部访问数据。this.xxx
- 在methods内部调用其他的methods
vue指令-v-on按键修饰符
- 语法:
鼠标事件
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数 键盘事件
-
-
@keyup.enter 监测回车按键
-
@keyup.esc 监测返回按键
-
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回车按键了");
},
escFn(){
console.log("esc按键了");
}
}
}
</script>
使用方法都一样
vue指令-v-model双向绑定
- 语法: v-model="data数据变量"
- 双向数据绑定
-
-
数据变化 -> 视图自动同步
-
视图变化 -> 数据自动同步
-
<template>
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
{{username}}
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
{{pass}}
</div>
</template>
<script>
export default {
data() {
return {
username: "123456",
pass: "111111",
}
}
};
</script>
自己试试就懂了
