红鹰

组件v-model双向数据绑定组件v-model双向数据绑定MyInput.vue组件 完成input标签的双向数据绑定Home.vue 组件使用MyInput.vue组件时，双向数据绑定组件v-model可以双向数据绑定多个值组件绑定多个值 MyInput.vue组件Home.vue使用MyInput.vue 双向绑定多个值组件Slot插槽案例 按钮 组件Slot，按钮名称由外部指定 MyButton.vueHome.vue 使用插件MyButton.vue，指定Slot内容组件v-model双向数据

Vue组件-自定义组件事件$emit自定义组件事件$emit(子组件向父组件传递数据)案例 Home组件写登录逻辑，声明`@login`事件MyLogin 组件主要完成登录页面布局及触发事件-$emit$emit 触发事件传递的参数可进行校验-emits点击“登录”按钮时，触发login事件时，对参数是否符合规则校验-emitsmitt 第三方插件实现非父子组件间传递数据项目中引入mitt插件定义Event工具JS，可快速引用mitt 。model/Event.js在组件挂载页面时，监听指定的事件 Even

Vue组件1、简单Vue组件1.1、根组件 案例 App.vue1.2、Home组件案例 Home.vue2、父组件向子组件传递参数--props属性2.1、父组件案例 Father.vue2.2、子组件案例 child.vue3、父子组件相互间访问-`$refs`和`$parent`3.1、父组件案例 MyF.vue3.2、子组件案例 MyC.vue1、简单Vue组件每一个.vue文件都是一个组件，包括模板template，业务逻辑 script 和样式styleVue项目的每个应用都是一个个小组

localStorage 本地数据存储-mounted页面加载后触发localStorage 案例，数据保存到本地，刷新页面数据还在localStorage 案例，数据保存到本地，刷新页面数据还在<template> <div> <h3>文本框输入内容，回车保存，刷新页面数据一致</h3> <input type="text" v-model="textInfo" @keydown.enter="saveDat

Vue3 集成Sass和ScssVue 项目安装sass-loader node-sassvue组件此时可以写Sass或Scss CSS样式语法了VS Code 需要安装对应插件Vue 项目安装sass-loader node-sass默认Vue项目不能够解析sass或scss。vue create vue3Democd vue3Demonpm install#安装sass-loader node-sassnpm install -D sass-loader node-sass #or

计算属性及Watch侦听计算属性Watch 侦听计算属性<template> <div> <h3>1、计算属性,输入内容翻转展示</h3> {{reverseMessage}} <br> <input type="text" v-model="message"> <h3>2、计算属性，完成数据列表查找；文本框输入的内容是否在列表包含

Vue原生JS执行及表单双向绑定案例Vue 中写原生JS代码Vue $refs操作DOMVue3 表单双向数据绑定案例Vue 中写原生JS代码<template> <div> <input type="text" name="" id="name"> <button @click="getName">Vue中支持原生JS</button> </div></template&gt

事件监控Vue使用事件案例事件修饰符按键修饰符Vue使用事件案例<template> <div> <span>{{ msg }}</span> <br /> <button @click="modifyMsg()">简单事件</button> <button @click="modifyMsg">事件可以没有()</button> <br /&gt

Vue环境搭建NPM 环境安装-Node.js安装配置npm的全局模块的存放路径以及缓存的路径安装CNPM，国内淘宝下载比较快，只后可以用CNPM代替NPM命令了如需安装yarn，npm和yarn功能一样，可不安装任意目录下都可以使用cnpm、vue等命令，环境变量配置Vue及Vue-cli 脚手架安装安装webpack 模板通过vue-cli创建项目通过Vite 脚手架快速创建项目使用npm创建使用yarn创建NPM 环境安装-Node.js安装#检查node是否安装成功node -vnpm -v