寒假学习day1(Vue)

一，声明式渲染

1. 关于组合式api，通常会和script setup 搭配使用

2.在script中，使用ref或者reactive来声明响应式状态

---

3.在script中，将组件声明，并且有组件逻辑和其他一些响应式状态。

---

4.然后在template中对调取对应的响应式状态的值来进行文本渲染

---

举例

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

二，Attribute绑定

1.在template中为了给attribute绑定一个动态值，一般都是需要v-bind指令,而且可以进行缩写

<div v-bind:id="dynamicId"></div>//未缩写
<div :id="dynamicId"</div>

---

2.还有bool型，当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

<button :disabled="isButtonDisabled">Button</button>

---

3.动态绑定多个值

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

---

4.v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。

<p v-if="seen">Now you see me</p>

---

5.href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

---

6.监听DOM时间 v-on指令

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>//v-on缩写就是@

---

举例

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 v-bind:class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

<style>
.title {
  color: red;
}
</style>

三，事件监听

1.用v-on进行监听，简写语法和用法上面提到过。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>

实现 increment 函数并通过使用 v-on 将其绑定到按钮上。这种就是内联事件处理器，一般用于简单场景。

---

2.方法事件处理器

<script setup>

import { ref } from 'vue'

  

const name = ref('Vue.js')

  

function greet(event) {

  alert(`Hello ${name.value}!`)

  // `event` is the native DOM event

  if (event) {

    alert(event.target.tagName)

  }

}

</script>

  

<template>

  <button @click="greet">Greet</button>

</template>

方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。

---

3.在内联事件处理器中访问事件参数

有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) { // 这里可以访问原生事件 
if (event) { event.preventDefault() } alert(message) }

所以看出想要进行事件访问，funtion中有一个参数是event

还有一系列按键操作，就不赘述。

四，表单绑定

就是v-model操作

v-mode操作可以支持文本输入框或者多选框，下拉框等等。

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p><!--这样文本内容就可以同步显示--->
</template>

还有更多例子在官网上看即可

条件渲染

v-if

v-if就是当指令的表达式为真的时候才会返回里面的值

v-else就是当指令为假返回值

<script setup>

import { ref } from 'vue'

  

const awesome = ref(true)

</script>

  

<template>

  <button @click="awesome = !awesome">toggle</button>
  <!--点击一次按钮awesome变成相反的值>
  

  <h1 v-if="awesome">Vue is awesome!</h1>
 

  <h1 v-else>Oh no 😢</h1>

</template>

这可以实现点击按钮进行切换

v-show简单，如果需要频繁切换那么v-show好一点

如果运行时绑定条件很少改变v-if好