m0_63622279的博客

在实际项目中，需根据项目的Vue版本、构建工具以及具体需求选择合适的动态绑定图片方式。如果使用Webpack构建，Vue 2和Vue 3都可采用。今天在给自己的小demo加视差滚动皮肤盒子的时候，出现了一个图片加载失败的问题，我的图片放在assets目录下。若使用Vite构建，Vue 3中。

子组件：有三个插槽 header,main,footer。多个插槽的情况下，需要对不同的插槽进行区分（插槽名）标签将自定义的内容插入到子组件中。子组件：存在一个mian块的插槽。子组件中的插槽，通过。v-slot:插槽名。来进行具名插槽的插入。来进行具名插槽的插入。

是一个用于定义组件可以触发哪些自定义事件的函数。通过使用defineEmits可以完成子组件对父组件的传值。（上面的defineProps为父组件向子组件进行传值）当在不同场景下，父组件控制子组件展示不同的样式，或者传递不同的数据，这个时候就需要使用到props，子组件通过props来接收父组件传递过来的数据。场景复现：不同的页面中导航栏展示不同的颜色，这个时候就需要对导航栏组件使用props声明，如此父组件就可以完成对子组件的不同场景的不同定义。

今天，在安装markdown包时出现了下面的问题，说淘宝镜像证书已经过期npm包管理器在尝试从淘宝的npm镜像仓库（registry.npm.taobao.org）获取md-editor-v3包时，由于证书已过期而失败，然后解决方案的话就是切换镜像源,npm config set registry https://registry.npmmirror.com/

今天在写项目时，写到一个嵌套评论的遍历时，控制台出现了一个报错信息，但是并不影响页面的渲染，然后一看这个错的原因是 key值重复，那么问题的解决方式就很简单了。（vue for循环读取key值时， key需要是唯一的，如果key值重复会导致报错，影响页面渲染卡顿。for循环读取key值时， key需要是唯一的，如果key值重复会导致报错，影响页面渲染卡顿。只需要遍历时将key加上一个随机值即可，最简单就是同时遍历出索引与key相加。

二、安装使用 ant-design-vue安装脚手架工具使用组件全局完整注册三、后台管理通用页面的demo1. 代码部分2. 页面显示

vue3中粒子背景特效插件的使用。常用配置项说明：color: String类型 默认’#dedede’。粒子颜色。particleOpacity: Number类型 默认0.7。粒子透明度。particlesNumber: Number类型 默认80。粒子数量。

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件轻量版编辑器轻量版编辑器左侧编辑区域使用 textarea 实现。优点：足够轻量缺点：不支持更为丰富的编辑区功能扩展。例如：无法根据不同的语法在输入框内显示不同的样式。进阶版编辑器进阶版编辑器左侧编辑区域使用 CodeMirror (opens new window)实现。优点：可以根据 CodeMirror 提供的 Api 来自定义扩展编辑区域功能，提高编辑体验。缺点：文件体积远大于轻量版预览组件。

使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。

我的踩坑记录就是明明，网页的资源文件已经渲染，但是无法看到图片，然后查了半天，最后发现是h3标签的那块儿内容占了位置将我的图片顶了下去，QAQ。tips: vue3不再使用require函数导入，而是使用支持es6的import函数去导入。(ಥ﹏ಥ)，以后一定要相信自己的想法，坚持自己没错啊！

验证是否安装成功，检查项目根目录下的 package.json,其中的 devDependencies 里面会多出一个axios及其版本号。// 接口地址：http://hmajax.itheima.net/api/news。// 2. 更新到 list 中。首先，打开当前的项目终端，输入。// 1. 发送请求获取数据。// 请求方式：get。

Vue Cli 脚手架安装，修改npm仓库地址为npm install cnpm -g --registry=https://registry.npm.taobao.org，安装命令npm install -g @vue/cli，查看 vue cli 脚手架是否安装成功 vue --version

后端全局配置解决跨域问题的方式有下面两种，二选一即可，1.添加 CorsConfig 配置类，2.重写 webMvcConfigurer 中的 addCorsMapping。CORS 全称 Corss-Origin Resource Sharing,是由w3c制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。

组件的注册，全局注册和局部注册，一般组件都是局部注册，哪里用到在哪里声明即可，全局注册只有当组件很通用时，在当前项目中很多地方都用才会去全局注册。局部注册的方式是，哪里需要就去哪里导入注册，先使用import 组件对象 from '组件相对路径'将组件导入，然后使用 components:{组件名,组件对象}的方式去注册。全局注册的方式是，在当前项目的main.js中，使用import 组件对象 from '组件相对路径'导入，然后使用 Vue.Component('组件名',组件对象)去注册。

只需要利用计算属性（计算属性绑定到全选上），来计算每一项是否复选框都被选择，若是则将全选按钮选中。显然这是一个计算属性的get。点选全选复选框，从而决定单个的复选框被选中还是取消，只需要在计算属性的set时，将每一项遍历然后修改其选中状态。思路：首先每个项的复选框绑定到数据上，然后复选框全部选中，则全选复选框被选中。同理全选复选框的点选取消也会影响单个的复选框被选中还是取消。// set 根据手动选中全选，实现所有复选框的选中和取消。// get 通过所有复选框选中，然后自动选中全选按钮。

可以看出计算属性貌似和方法差不多，但实际上不是，计算属性会有一个缓存，效率高的多。② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名=“方法名”tips:计算属性使用了两次只在初始化调用了一次，methods方法使用两次调用两次。计算属性的缓存特性 ，计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 然后 并再次缓存。一个小例子，带你搞懂计算属性和methods方法。作用：给实例提供一个方法，调用以处理业务逻辑。

v-model的 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容 ① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新 .语法: v-model = '变量'常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值.v-model 应用于其他表单元素它会根据 控件类型 自动选取 正确的方法 来更新元素.

写的很简单，就是一个小练习，哈哈哈，下面的几张图分别是轮播图的第一张，中间图，最后一张的效果图。使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。1.vue实例中声明一个data属性imgArr，用于存放每张轮播图的地址，4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。2.同时定义一个默认起始索引index=0,3.然后给两边的箭头监听点击事件，// 图片url 数组。

前提条件：确保安装了node.js,且对应的环境变量正确配置。首先创建一个空文件夹，然后使用vscode打开。,查看是否能出现对应的版本号信息。第一个vue项目构建完毕。

在组件中添加props属性可以传递值 比如一个组件用来传递你的博文名称…在自定义组件中，可以自己添加一些属性 也是通过props来添加，然后传递数据的话就直接{{}}即可。props以字符串数组形式的，没有默认值类型—所以你可以灵活的使用v-bind指令来将其绑定数据.props:{}这样的话会有一个好处，当你提供了默认类型后，浏览器的控制台里面就会提示。(注意，如果提供默认类型的话，则props不能再使用[]而是使用{}).

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的,所以 v-on里面是可以写方法名称的。这里并没有达到我想要的效果，就是对应的鼠标事件也遍历上去。

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。通过classObject对象中的属性值，来动态的决定app3的样式，由下图可见，classObject已经被绑定到了app3中。在传入对象的基础上，绑定一个计算属性（常用且强大的模式）–可以设定多个属性值来决定当前的类属性是否附加，如app4。上篇文章，略微的说过一些v-bind指令的用法，v-bind指令可以动态的为html元素添加属性。v-for指令，循环遍历渲染。

用于对不同的点击事件做不同的处理。一个简单的点击事件的例子：