1.Vue3——数据响应式&模板语法&指令

千门江月

已于 2024-05-10 12:21:46 修改

阅读量461

点赞数 4

分类专栏：前端文章标签： javascript 前端 vue.js

于 2024-05-09 18:24:43 首次发布

本文链接：https://blog.csdn.net/2401_82986110/article/details/138625178

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.数据响应式&模板语法&指令

时间的朋友

人是环境的产物吗？人是时间的造物吗？人是自我意志的外化吗？都是，三股力量：自我意志，环境，时间塑造者你我的人生。所以行动起来做点自己喜欢做的事情，总是好的。【当下时间，做事情融入情景环境，做事情出现的自我意志】

听峰哥直播 20240507 ，多发朋友圈生活展示，吹捧，正反馈动力。

1. 数据响应式

vue的数据自动更新到视图层。简单理解就是，数据更新，页面自动刷新。

VueStu04-Vue响应式特性-CSDN博客 ! 在这里插入图片描述

代码示例

<template>
  <div>
    <h1>响应式数据和非响应式数据的区别</h1>

    <!-- 响应式数据 -->
    <p>响应式数据: {{ reactiveData.count }}</p>
    <button @click="incrementReactive">增加响应式数据</button>

    <!-- 非响应式数据 -->
    <p>非响应式数据: {{ nonReactiveData.count }}</p>
    <button @click="incrementNonReactive">增加非响应式数据</button>
  </div>
</template>

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

// 创建响应式数据
const reactiveData = reactive({
  count: 0
});

// 创建非响应式数据
let nonReactiveData = {
  count: 0
};

// 增加响应式数据
const incrementReactive = () => {
  reactiveData.count++;
};

// 增加非响应式数据
const incrementNonReactive = () => {
  // 尽管我们修改了非响应式数据，但Vue模板不会自动更新
  nonReactiveData.count++;
  // 为了使非响应式数据在模板中更新，我们需要重新赋予一个新的对象
  nonReactiveData = { count: nonReactiveData.count };
};
</script>

<style scoped>
/* 你可以在这里添加CSS样式 */
</style>

2. 模板语法

{{value}} 
{{value+222}}  //支持运算
{{isRight?true:flase}}  //支持三元运算

3.指令：渲染&事件&2种变量绑定

渲染

v-text、v-html，v-if、v-show，v-for

1.对于简单的数据，可以直接模板渲染。
2.对于属性而言，选择text，html
3.if选择注释该节点，show选择修改css样式
4.对于数组&对象而言，选择for渲染，使用此指令，对当前元素进行重复遍历，key采用“就地复用”的策略

<script setup>
    import { ref } from 'vue'
    const name=ref('<span style="color:red">小满</span>')
</script>
<template>
	<h1 v-html="name"></h1>
</template>

在这里插入图片描述

事件

on.click.prevent

使用事件——函数操作css样式
使用事件——函数操作数据
使用事件——函数操作元素DOM树/BOM[一般在原生中使用]

2种变量绑定

v-bind:class、style

v-model 【完成了视图响应式。即输入视图的数据自动同步到vue数据】

1.绑定class =[red,btn]、{red:isshow,...}
2.绑定style
3.v-model 表单双向绑定，数据响应式已经具备，视图响应式

4.案例

v-bind:class 样式的动态切换

思路:{basecss：activeIndexindex} 只有当activeindexindex样式才会被添加。事件：点击时，将当前index赋值给activeindex

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

const activeIndex = ref(0)
</script>

<template>
 <button v-for="i in 3" :class="{ 'active': i === activeIndex }" @click="activeIndex = i">基础按钮</button>
</template>

<style scoped>
.active {
  background-color: #41b883;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

</style>

v-model的手写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视图响应式</title>
</head>
<body>
  
  <input type="text">
  <h1></h1>
</body>
</html>
<script>
  const input = document.querySelector('input');
  const h1 = document.querySelector('h1');
  input.addEventListener('input', function() {
    h1.textContent = input.value;
  })
</script>