【Vue】初学笔记

vue 声明式渲染

Vue 理解为聚合了 JavaScript+HTML+CSS 的代码组织形式，将属于同一组件的 JavaScript+HTML+CSS 封装在 .vue 文件中

声明式渲染核心思想是通过声明最终的显示结果，不需要显式地定义每一步该如何操作。 JHS 则是与之相对的命令式变成，开发者需要逐步指示操作系统如何实现渲染。

在实操学习尝试的下述例子中，或许能有更直观的理解

1. JS+HTML

这是我在初步接触学习vue时写的一段简单的页面点击计数器的实现，用JS+HTML套用到vue上的思想去编写的，当然这段代码作为App.vue 是无法运行的，涉及到Vue自身的生命周期管理、DOM的问题，
let myButton = document.querySelector('button') 这一行使用了选择器去绑定时间处理器，但是在 Vue 的setup 阶段，DOM元素还没有被渲染，Vue 也就是此时通常不直接操作DOM。

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

// 组件逻辑
// 此处声明一些响应式状态
  const counter = reactive({count: 0})
  let myButton = document.querySelector('button')
  myButton.onclick = function(){
    counter.value++;
  }
</script>

<template>
  <h1>Make me dynamic!</h1>
  <button>
    {{counter}}
  </button>
</template>

2. Vue

vue中的实现方式，Vue 会帮助我们自动管理 DOM 渲染的工作，我们只需要进行事件的绑定和修改
<button @click="increment"> 直接将click 与 increment 函数绑定， 相当于 “点击”==> “increment”，事件的监听绑定等底层操作由Vue自动管理。

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

// 组件逻辑
// 此处声明一些响应式状态
const counter = ref(0)
const increment = () => {
  counter.value++;
}

</script>

<template>
  <h1>Make me dynamic!</h1>
  <button @click="increment">
    {{counter}}
  </button>
</template>

下面稍微记录一下常用的绑定、监听指令

属性绑定

v-bind
v-bind是vue中的一个指令，动态绑定HTML属性
通常的html中元素属性是静态的

<img src="logo.png" alt="logo">

但是若希望 src 的属性值是动态的，随着JS的值而变化，可以用该指令

<template>
  <img v-bind:src="logoUrl" alt="Logo">  <!--把src属性绑定到 logoUrl 变量-->
</template>

<script setup>
const logoUrl = 'logo.png';
/*...*/
</script>

这样当JS中的 logoUrl 因某步操作修改，html中的属性也同步修改
几乎所有的HTML属性、DOM属性和自定义属性都可以绑定

事件监听

v-on
监听DOM事件

<button v-on:click="increment">{{ count }}</button>
<button @click="increment">{{ count }}</button>

https://cn.vuejs.org/guide/essentials/event-handling

表单绑定

同时使用 v-bind v-on 来在表单的输入元素上创建双向绑定

function onInput(e) {
  // v-on 处理函数会接收原生 DOM 事件
  // 作为其参数。
  text.value = e.target.value
}

<input :value="text" @input="onInput">

实现的效果是 text 与 input 的输入值关联起来，输入框输入后同步得到text值

v-model 简化

<input v-model:value="text">

列表渲染

v-for

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

遍历 todos 里的元素，按列表格式输出出来，todo 是一个局部变量，表示当前正在迭代的数组元素。 key 属性使得 Vue能够精确地定位到每一个<li>