Vue-指令

vue的插值表达式

vue通过data提供数据

vue中通过template可以提供模板，但是这样的数据是写死的。

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

<script>
export default {
  data () {
    return {
      money: 100,
      msg: 'hello'
    }
  }    
}
</script>

通过插值表达式显示数据

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

作用: 使用 data 中的数据渲染视图（模板）

基本语法, 支持三元运算符

{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}

vue中插值表达式的注意点

(1) 使用的数据在 data 中要存在
```
<h1>{{ gaga }}</h1>
```
(2) 能使用表达式, 但是不能使用 if for
```
<h1>{{ if (obj.age > 18 ) { }   }}</h1>
```
(3) 不能在标签属性中使用
```
<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"
简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on指令

基本使用

语法：

v-on:事件名=“要执行的少量代码"
v-on:事件名=“methods中的函数名"
v-on:事件名=“methods中的函数名(实参)"

最基本的语法

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

<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中提供事件函数，接受参数

<button v-on:click="addMoney(1)">搬砖</button>
<button v-on:click="addMoney(10000)">卖房</button>

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

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

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

vue中获取事件对象

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

vue中获取事件对象

(1) 没有传参, 通过形参接收 e

(2) 传参了, 通过$event指代事件对象 e

<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-on 事件修饰符

vue中提供的事件修饰符

.prevent 阻止默认行为

.stop 阻止冒泡

<div id="app">
  <a @click.prevent="fn" href="http://www.baidu.com">去百度</a>
</div>

按键修饰符

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

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

@keyup.enter 回车
@keyup.esc 返回

<div id="app">
  <input type="text" @keyup="fn"> <hr>
  <input type="text" @keyup.enter="fn2">
</div>

v-if 和 v-show

基本使用

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

v-show

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

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

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

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

应用场景:

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

v-if, 频繁切换会大量的创建和删除元素, 消耗性能
如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

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

<template>
  <div id="app">
    <h1 v-show="isShow">v-show盒子-{{ msg }}</h1>
    <h1 v-if="isShow">v-if盒子-{{ msg }}</h1>
  </div>
</template>

v-else 和 v-else-if

<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

基本使用

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

数据变化了, 视图会跟着变
视图变化了, 数据要跟着变

输入框内容变化了(监听用户的输入, 监听input事件), 数据要跟着变

语法: v-model='值'

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

v-model 处理其他表单元素

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

textarea, select, checkbox

v-model 修饰符

number

如果想自动将用户的输入值, 用parseFloat转成数字类型, ，可以给 v-model 添加 number 修饰符：
```
<input v-model.number="age" type="number">
```
如果这个值如果这个值无法转数字，则会返回原始的值。
trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
```
<input v-model.trim="msg">
```
lazy

在change时而非input时更新，可以给 v-model 添加 lazy 修饰符：
```
<input v-model.lazy="msg">
```

v-text 和 v-html

v-text指令

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

<h1 v-text="msg"></h1>

v-html指令

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

<h1 v-html="msg"></h1>

在网站上动态渲染任意 HTML 是非常危险的,只在可信内容上使用 v-html，永不用在用户提交的内容上。