vue todolist
最近初学vue，做最简单的todolist<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> #container{ width: 700px; height: 100px; padding: 40px; margin: 0 auto; } li{ list-style: none; } .close-bt...
2024-01-10
vue之slot用法
slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。一、单个组件如果子组件的模板不包含 slot，那么父组件的内...
2024-01-10
vue--todolist的实现
简单示例：<template> <div id="Home"> <v-header></v-header> <hr> {{title}} <br> <p><input type="text" v-model="todo" /> <button @click="doAdd()">添加</button></p> <p v-for="(x,k) in list">{{x}}---- <button @click="removeData(k)">删除</button><...
2024-01-10
Vue-Devtools插件使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包12cd vue-devtoolscnpm install3.修改manifest.json文件把"persistent":false改成true 4.编译...
2024-01-10
vue中slot的笔记
一言以蔽之：本来写在子组件里边的内容默认是不显示的，如果想相对于子组件在哪里进行显示，则使用slot标签代表占位符，代替那部分内容，是行间元素还是块级元素取决于原先的那个标签。参考的连接是：https://blog.csdn.net/sinat_17775997/article/details/52484072...
2024-01-10
vue-devtools使用问题？
Chorm浏览器打开控制器vue项目就报关闭就不会有这个错，大佬们 这怎么弄回答：这有个文章和你的问题一样：https://blog.csdn.net/egg_er/article/details/124679458这个如果不行试试：在谷歌游览器中移除devtools插件，再重新添加一下。目前我用的 "vue": "^2.7.10" 插件4.14 没有报错回答：试一下使用低版本的vue dev...
2024-03-01
Vue-Devtools安装配置教程
最简便的方法是用FQ来通过google应用商店进行安装，但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装，但是极其不建议用这个方法安装，非常麻烦，而且必须要有node的基础，非常不接地气下面来一个最简便的方法（送给伸手党）：查看过很多博客大多数都是，要安装Vue-Devtools，在一个git...
2024-01-10
vue的slot的使用问题
根据官方文档来说，有三种使用方式https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容单个插槽 https://github.com/Sinosaurus/blogs/blob/master/example/slot01.html具名插槽 https://github.com/Sinosaurus/blogs/blob/master/example/slot02.html作用域插槽 https://github.com/Sinosaurus/blogs/...
2024-01-10
vue中插槽slot的使用
一、什么是插槽官方解释：Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。大白话：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。二、基...
2024-01-10
玩转vue的slot内容分发
vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件。单个Slot在children这个标签里面放Dom，Vue不会理...
2024-01-10
vue 简易toDoList
vue+bootstrap简易响应式任务管理表：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"/> <link rel="stylesheet" type="te...
2024-01-10
Vue内容分发slot
前面的话 为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot编译作用域 在深...
2024-01-10
vuejs之Vue Devtools
Vue Devtools大法好这是一篇小白friendly教程Vue Devtools是一款谷歌浏览器插件，专门为调试vue而设计。假设你做了一个vue应用，当你在调试的过程中，打开的控制台是这样的：满眼都是data-v的这种标签，你的组件在什么位置，可能要一个一个标签点开之后找，你的应用的数据是什么状态，可能要靠console打...
2024-01-10
详解Vue slot插槽
1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件（传的是HTML格式）。父组件App:子组件Category：在父组件或者子组件里都可以给插槽中的内容设置样式，效果一样作用域插槽：1.理解:数据在组件的自身（Category），但根据数据生成的结构需要...
2024-01-10
Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- <link rel="stylesheet" href="fonts/iconfont.css" /> --> <style> * { font-family: simhei, Helvetica, Arial, sans-serif; ...
2024-01-10
关于vue.js中slot的理解
slot这块看官网文档，起初有点不懂，仔细研究还是最终理解了，slot是用来干嘛的呢，先看下一个例子：<script src="https://unpkg.com/vue/dist/vue.js"></script><div > <children> <span>我是父组件放在自组件中的，没有slot我不会显示</span> </children> </div> ...var vm = new Vue({ el: '#app', co...
2024-01-10
vue 的 solt 子组件过滤
如上图：1、定义了一个类似下拉的组件 mySelect ， 然后里面有自定义的组件 myOptions2、有很多时候，我们希望， mySelect 组件内部的子组件，只能是 myOptions 。 不应该有 <div>666</div>3、在mySelect 里面做一层过滤，去掉不需要的组件下面先看看myOptions.vue 组件代码<template> <div class="options"> <div>这里...
2024-01-10
使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容。比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果使用者关注轮播内容的静态效果，组件负责让其滚动起来组件:<div class="horse-lamp"> <div class="lamp"> <slot name="lamps"></slot> </div> <div class="lamp"> ...
2024-01-10
vue实现ToDoList简单实例
一、需求与准备1、准备 使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时...
2024-01-10
Vue使用slot遇到的问题
导航栏重复显示遇到的问题解决办法遇到的问题项目里面使用NavMenu实现导航栏，然后使用slot插槽显示界面，错误界面如下图，可以看到body里面有重复的hMenu，界面显示也有两个导航栏，菜鸟不懂这是怎么了啊！解决办法我检查代码，发现路由相关的位置引入了导航栏组件，并配置了路由跳转，...
2024-01-10
Vue.js常用指令：v-model
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者组件上创建双向绑定。代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
2024-01-10Vue作用域插槽slot-scope实例代码
vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到（https://cn.vuejs.org/v2/guide/components.html#单个插槽）作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内...
2024-01-10
vue-cli修改小图标（shortcut）
1、首先修改build文件夹下webpack.dev.conf.js文件，在new HtmlWebpackPlugin下添加favicon字段（你的小图标），如下：new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: './src/assets/images/bitbug_favicon.ico' }),2、然后在根目录的index....
2024-01-10
（转）vue＜slot＞插槽的使用方式
slot是父组件和子组件的通信方式，可以将父组件的类容显示到子组件当中。简单理解就是，在子组件内占坑，父组件坑。首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。下面通过一个例子来展示匿名...
2024-01-10
一起学vue指令之v-html
一起学 vue指令 v-html 指令可看作标签属性某些情况下，我们点击百度搜索下一页，服务器应该就返回下一页的数据页面，包含其他资源链接等。返回的数据的本质是一个含HTML代码的字符串。以百度链接为例...
2024-01-10
