VUE插值表达式

插值表达式

vue可以通过data提供数据,注意:data必须是一个函数,并且返回一个对象

1
2
3
4
5
6
7
8
9
10
<script>
export default {
data () {
return {
money: 100,
msg: 'hello'
}
}
}
</script>

通过插值表达式显示数据

插值表达式:小胡子语法 {{ }}

{{变量,表达式,自己下面定义的函数(实参)}}

  1. 使用 data 中的数据渲染视图(模板)

  2. 基本语法,支持简单数据处理

    1
    2
    3
    4
    {{ msg }}
    {{ obj.name }}
    {{ msg.toUpperCase() }}
    {{ obj.age > 18 ? '成年' : '未成年' }}
  3. vue中插值表达式的注意点

    1. 使用的数据在 data 中要存在
    1
    <h1>{{ gaga }}</h1>
    1. 能使用表达式, 但是不能使用 if for
    1
    <h1>{{ if (obj.age > 18 ) { }  }}</h1>
    1. 不能在标签属性中使用
    1
    <h1 id="box" class="box" title="{{ msg }}"></h1>

VUE指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

v-bind指令

  • 描述:插值表达式不能用在html的属性上,如果想要动态的设置html元素的属性,需要使用v-bind指令
  • 作用:动态的设置html的属性
  • 语法:v-bind:标签内的属性名="变量名"
  • 简写::title="msg"
1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on指令

基本使用

语法

​ 1.v-on:事件名=“要执行的少量代码”

​ 2.v-on:事件名=“methods中的函数名”

​ 3.v-on:事件名=“methods中的函数名(实参)”

基本结构

<button v-on:事件名="事件函数">按钮</button>,需要在methods中提供事件处理函数

methods用于存放函数方法

this是指当前的组件

简写:@事件名="事件函数" v-on:可以简写成@

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button v-on:click="fn">搬砖</button>
<button v-on:click="fn1">卖房</button>

// 提供方法
methods: {
fn () {
console.log('你好啊')
// console.log(this)
this.money++
},
fn1 () {
this.money += 10000
},
}

传递参数

<button v-on:事件名="事件函数(参数)">按钮</button>,需要在methods中提供事件函数,接受参数

1
2
3
4
5
6
7
8
<button v-on:click="addMoney(1)">搬砖</button>
<button v-on:click="addMoney(10000)">卖房</button>

methods: {
addMoney (money) {
this.money += money
}
}

如果事件的逻辑足够简单,可以不提供函数

1
2
<button v-on:click="money++">搬砖</button>
<button v-on:click="money += 10000">卖房</button>

vue中获取事件对象(了解)

需求:默认a标签点击会跳走, 希望阻止默认的跳转, 阻止默认行为 e.preventDefault()

vue中获取事件对象

  1. 没有传参, 通过形参接收 e
  2. 传参了, 通过$event指代事件对象 e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div id="app">
<a @click="fn" href="http://www.baidu.com">去百度</a>
<a @click="fn2(100, $event)" href="http://www.baidu.com">去百度2</a>
</div>
</template>

<script>
export default {
methods: {
fn(e) {
e.preventDefault()
},
fn2(num, e) {
e.preventDefault()
}
}
}
</script>

插值表达式:标签行外数据绑定

v-bind:标签行内属性绑定

v-on:标签事件绑定

修饰符

v-on 事件修饰符

vue中提供的事件修饰符

  • .prevent 阻止默认行为
  • .stop 阻止冒泡
1
2
3
<div id="app">
<a @click.prevent="fn" href="http://www.baidu.com">去百度</a>
</div>

按键修饰符

需求: 用户输入内容, 回车, 打印输入的内容

在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符

  • @keyup.enter 回车
  • @keyup.esc 返回
1
2
3
4
<div id="app">
<input type="text" @keyup="fn"> <hr>
<input type="text" @keyup.enter="fn2">
</div>

v-if 和 v-show 指令

基本使用

v-show 和 v-if 功能: 控制盒子的显示隐藏

  1. v-show

    语法:v-show="布尔值" (true显示,false隐藏)

    原理:实质是在控制元素的 css 样式, display: none;

  2. v-if

    语法: v-if="布尔值" (true显示, false隐藏)

    原理: 实质是在动态的创建 或者 删除元素节点

应用场景:

  • 如果是频繁的切换显示隐藏, 用 v-show

    v-if, 频繁切换会大量的创建和删除元素, 消耗性能

  • 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

    v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销

1
2
3
4
5
6
<template>
<div id="app">
<h1 v-show="isShow">v-show盒子-{{ msg }}</h1>
<h1 v-if="isShow">v-if盒子-{{ msg }}</h1>
</div>
</template>

v-if v-else 和 v-else-if

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<h1 v-if="isLogin">尊敬的超级vip, 你好</h1>
<h1 v-else>你谁呀, 赶紧登陆~</h1>

<hr>

<h1 v-if="age >= 60">60岁以上, 广场舞</h1>
<h1 v-else-if="age >= 30">30岁以上, 搓麻将</h1>
<h1 v-else-if="age >= 20">20岁以上, 蹦迪</h1>
<h1 v-else>20岁以下, 唱跳rap篮球</h1>
</div>

指令可以配套!标签不用配套!

v-model

基本用法

作用:给表单元素使用, 双向数据绑定

  1. 数据变化了, 视图会跟着变
  2. 视图变化了, 数据要跟着变
    • 输入框内容变化了(监听用户的输入, 监听input事件), 数据要跟着变

语法:v-model='值'

1
<input type="text" v-model="msg">

v-model 处理其他表单元素

数据双向绑定,双向更新,不写的话,就单项变化

  • select

  • checkbox

  • textarea

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <input type="checkbox" v-model="key">
    <textarea v-model="msg"></textarea>
    <select v-model="num">
    <option value="1">山东</option>
    <option value="2">上海</option>
    <option value="3">山东商务</option>
    </select>

    <script>
    export default {
    data(){
    return {
    msg:'这是txt',
    key:true,
    num:3
    }
    }
    }
    </script>

注意:v-model 会忽略掉表单元素原本的value, checked等初始值

v-model 修饰符

  • number

    如果想自动将用户的输入值, 用parseFloat转成数字类型, ,可以给 v-model 添加 number 修饰符:

    1
    <input v-model.number="age" type="number">
  • trim

    如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    1
    <input v-model.trim="msg">
  • lazy

    change时而非input时更新,可以给 v-model 添加 lazy 修饰符:

    (用户离开输入框时才触发更新操作,而不是用户每输入一个字符就进行一次更新)

    1
    <input v-model.lazy="msg">

v-text 和 v-html

v-text指令

  • 解释:更新元素的 textContent/innerText。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <h1 v-text="msg"></h1>

    export default {
    data(){
    return {
    msg:'<button>这是按钮</button>'
    }
    }
    }

v-html指令

  • 解释:更新DOM对象的innerHTML,html标签会生效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <h1 v-html="msg"></h1>

    export default {
    data(){
    return {
    msg:'<button>这是按钮</button>'
    }
    }
    }

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击

只在可信内容上使用 v-html,永不用在用户提交的内容上。

v-for

基本使用

v-for 作用: 遍历对象数组

  1. 遍历数组(常用)
1
2
3
4
v-for="item in 数组名"  item每一项
v-for="(item, index) in 数组名" item每一项 index下标

注意:item和index不是定死的,可以是任意的名字,但是需要注意 第一项是值 第二项是下标
  1. 遍历对象 (一般不用)
1
2
3
4
5
6
7
8
9
10
<!--
v-for也可以遍历对象(不常用)
v-for="(值, 键) in 对象"
-->
<ul>
<li v-for="value in user" :key="value">{{value}}</li>
</ul>
<ul>
<li v-for="(value, key) in user" :key="key">{{value}} ---{{key}}</li>
</ul>
  1. 遍历数字
1
2
3
4
5
6
7
8
<!-- 
遍历数字
语法: v-for="(item, index) in 数字"
作用:遍历具体的次数 item从1开始 index下标从0开始的
-->
<ul>
<li v-for="(item, index) in 10" :key="item">{{item}} ---{{index}}</li>
</ul>

v-for 的key的说明

  1. 设置 和 不设置 key 有什么区别?
    • 不设置 key, 默认同级兄弟元素按照下标进行比较。
    • 设置了key,按照相同key的新旧元素比较
  2. key值要求是?
    • 字符串或者数值,唯一不重复
    • 有 id 用 id, 有唯一值用唯一值,实在都没有,才用索引
  3. key的好处?
    • key的作用:提高虚拟DOM的对比复用性能

以后:只要是写到列表渲染,都推荐加上 key 属性。且 key 推荐是设置成 id, 实在没有,就设置成 index

注意:key是用来虚拟dom比较,而不是排序 (diff算法

v-computed 计算属性

基本使用

计算属性是一个属性,写法上是一个函数,这个函数的返回值就是计算属性最终的值。

  1. 计算属性必须定义在computed节点中
  2. 计算属性必须是一个function,计算属性必须有返回值
  3. 计算属性不能被当作方法调用,当成属性来用

定义计算属性

1
2
3
4
5
6
// 组件的数据: 需要计算的属性
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}

使用计算属性

1
<p>{{ reverseMsg }}</p>

未完待续…