HJYDC-CSDN博客

原创 Vue3-双向绑定

v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value='',可以简写为 v-model=''双向绑定:在网页改动的数据会渲染到dom树上，网页会相应改变。单向绑定:在网页改动的数据不会渲染到dom树上。只要在方框中写内容就能立马响应到网页上。

2025-05-12 11:57:48 185

来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。由于插值表达式不能直接放在标签的属性中,所有要渲染元素的属性就应该使用v-bind。handler的值可以是方法事件处理器,也可以是内联事件处理器。绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下。.capture：使用事件捕获模式而不是冒泡模式。v-bind可以用于渲染任何元素的属性,语法为。.self：只在事件发送者自身触发时才触发事件。vue中的事件名=原生事件名去掉。.stop：阻止事件冒泡。

2025-05-11 16:14:09 163

原创 Vue3 文本渲染命令

v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本。v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本。v-***的命令必须依赖元素,并且要写在元素的开始标签中。插值表达式中支持javascript的运算表达式。v-test v-html是vue3的文本渲染命令。v-*** 这种写法的方式使用的是vue的命令。v-***指令支持ES6中的字符串模板。插值表达式中也支持函数的调用。先定义一些常见的数据。

2025-05-10 22:54:00 125

原创插值表达式

插值表达式是将数据渲染到元素的指定位置的手段之一。插值表达式中支持javascript的运算表达式。我们想把这些数据渲染到页面上就可以使用插值表达式。语法：{{数据名/函数/对象调用api}}插值表达式不绝对依赖标签,其位置相对自由。插值表达式支持一些常见运算符。插值表达式中也支持函数的调用。可以看出插值表达式不依赖标签。插值表达式支持对象调用api。我们定义一些常见数据。

2025-05-10 22:16:49 190

原创响应式数据和setup语法

在这个代码中我们发现点击加号后中间的数不会变化，这是因为vue3中要先经过ref函数或者reactive函数处理后才是响应式的。实现一个简单的功能两个按钮一个+，一个-，中间一个数字点击加号，数字加一；注意: 1 ref处理的响应式数据在js编码修改的时候需要通过.value操作。只需要把这些都删了再把<script>变为<script setup>就可以了。2 ref响应式数据在绑定到html上时不需要.value。非响应式数据: 修改后VUE不会更新DOM。响应式数据: 修改后VUE会更新DOM。

2025-05-09 17:38:49 150

原创 Vue中css样式的引入方式

2 将css样式保存到独立的css文件中，那个.vue需要，就在哪里导入。3 如果某个样式要在所有.vue中生效，那么可以在main.js中导入。1 在.vue文件中的style标签中。2.1 在script标签中可以导入。2.2 在style标签中可以导入。

2025-05-09 16:59:48 233

原创 vite+vue3项目的目录结构

vscode是vs自带的不需要改public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。assets /目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。目录：用于存放组件相关的文件。

2025-05-09 10:49:12 443

原创使用vite构建工程化前端项目

右击 VSCode 图标 “属性” ，然后在“兼容性”勾选“以管理员身份运行此程序 ”，接着单击“应用”，最后“确定”就行了。第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了。在你想创建vue项目的文件夹内输入npm create vite@latest。我们在vscode创建一个前端工程化项目前要给予vs控制台权限。npm install命令安装基础依赖。查看项目下的package.json。cd进入刚刚创建的项目目录。出现这个就表示创建好了。2 安装项目所需依赖。

2025-05-09 10:04:57 253

原创 vue的快速体验

Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。v-bind:style="colorStyle"关联css样式。vue可以简化程序员在改变如网页文字时dom编程的麻烦过程。我们要改变span中的文字只能通过dom树。v-text="message"关联文字。@click="fun1()"关联方法。在一般的dom编程里。

2025-05-08 23:13:55 207