123-CSDN博客

原创 Vue学习12--插槽

Vue学习12–插槽什么是插槽插槽是子组件提供给父组件使用的一个占位符，用，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。相当于在子组件中放置了一个占位符，父组件传递进来的html片段会被加载到这个占位符的地方。简单理解就是，在子组件内占坑，在父组件里填坑。放在组件元素之间的html片段会被插槽占位符进行加载。插槽如何使用1、在子组件中使用插槽组件指定插槽的名字：2、使用方：在父组件引入的子组件元素之间直接添加需要传递的html

2021-10-29 15:19:19 572

原创 Vue学习11--混合继承

Vue学习11–混合继承混合继承实现的效果：A有一个data属性,和一个say方法B有一个see方法和一个name属性A继承B后，A除了有自己的一个data属性,和一个say方法，还有B的一个see方法和一个name属性在C里混合AB后，C有自己的东西和A的一个data属性,和一个say方法，还有B的一个see方法和一个name属性一、继承Vue.extend方法Vue.extend( Vue ComponentOptions ) 是全局方法，使用基础 Vue 构造器，创建一个“子类”。参数

2021-10-29 15:15:32 316

原创 Vue学习10--父子组件通信

Vue学习10–父子组件通信父子组件是指一个A组件把另外一个B组件引入并使用，把A称为父组件，把B称为子组件。父组件向子组件传数据使用标签的属性来传递原理：props形式：父组件里： <子组件名：属性名=“值”>子组件里：需要在js里用props属性接收父组件传递过来的属性数据子组件里每个接收的变量的属性：type：指定数据类型，（Array、Object、String、Number、Boolean）若类型不匹配也会报错：[Vue warn]: Invalid pr

2021-10-29 15:09:20 230 2

原创 Vue学习09--生命周期

Vue学习09–生命周期生命周期 – 钩子函数生命周期实际上是指虚拟dom的整个生命周期关于生命周期指一个组件从创建到销毁的整个过程划分为四个阶段：创建 --> 挂载 --> 更新 --> 销毁每一个阶段会划分为两个小阶段：xxx之前，xxx之后一二阶段创建和挂载：create、mount创建：之前 -> beforeCreate，之后 -> created挂载：之前 -> beforeMount，之后 -> mountedbef

2021-10-29 15:01:58 417

原创 Vue学习08--开发模式

Vue学习08–开发模式开发模式Vue有两种常见的开发模式：SPA和MPASPA：single page application 单页应用，整个应用只有一个html页面MPA：multiple page application 多页应用单页应用不用配置，Vue本身默认的就是一个单应用开发模式，直接用组件进行开发即可。如果要配置多页应用：需要在vue.config.js文件中进行页面配置，添加一个 pages 属性，它因该是一个对象，因为需要指定页面应用的名字// 这个检查机制太

2021-10-27 16:12:34 528

原创 Vue学习07-- Vue的组件

Vue学习07-- Vue的组件组件开发：具备一定功能得页面片段Vue的组件Vue的组件是功能高内聚、业务低耦合的一个通用的方法、模块称为组件组件是可复用的 Vue 实例，且带有一个名字，通常一个应用会以一棵嵌套的组件树的形式来组织。Vue的组件在项目中以一个有着 .vue 后缀的文件的形式存在如何定义一个组件需要给vscode安装一些vue插件：Vetur和Vue 3 Snippets一个vue组件需要三个模块html 模板(template) – 直接书写html代码，根元素

2021-10-27 16:04:25 649

原创 Vue学习06--虚拟节点

Vue学习06–虚拟节点虚拟节点（virtual dom）在Vue中没有真实的Dom节点，在代码中写的dom都是虚拟dom(VDom)基本原理：虚拟dom是一个普通对象，它是描述真实dom的js对象，它至少会包含tag属性(描述当前节点是一个什么元素)，VNodeData属性(描述当前节点有哪些属性)，VNodeChildren属性(描述当前节点有哪些子节点，特殊子节点为innerTest)虚拟dom可以使用render方法的形参createElement方法来创建得到优点：虚拟DOM

2021-10-27 16:03:00 1972

原创 Vue学习03

vue的开发模式SPA(single page application 单页应用–只有一个页面)，它的业务多用组件(一个一个的业务模块)var vm = new Vue({ // data: function() { data() { return { list: Array(10).fill('').map((_, i) => { return {id: `ID-${i}`, name: `我的电脑0$

2021-10-25 11:09:26 83

原创 Vue学习02

Vue双向绑定原理在上一节里演示了如何用Vue实现数据的双向绑定，接下来要分析的是Vue双向绑定的原理Vue的v-model是基于什么实现的：由效果可知，Vue的v-model是基于inpout输入框的oninput事件来实现的。下面用oninput事件来实现一下我们看到的效果(可以将下段代码复制直接放到body标签里，运行看效果)<div> 输入姓名：<input oninput="inputEvt()" id="input" type="text"&

2021-10-22 19:12:22 65

原创 Vue学习01

框架模式：MVVM版本简述：vue3.x的语法和vue2.x写法差不多，可以兼容vue2，其实vue3是推荐TS来进行项目开发，它借鉴了React的函数式编程。引入vue的方式：vue资源链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js方法一：直接在线引用，要求电脑必须联网<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">

2021-10-22 12:49:48 97

原创 nodejs学习遇到的问题一

nodejs学习遇到的问题一问题：原因：方法使用错误，我是多写了一个参数解决：将多写的参数删掉可解决问题出处：错误形式：res.send({code:200, message:“success”}, token);正确形式：res.send({code:200, message:“success”, token});我的问题是在token的时候没有注意到花括号的位置，将token写在了对象的外面，导致res.send方法多了一个参数，而出现的错误。问题：原因：Ajax请求头书写错

2021-10-21 12:46:25 240

原创 mongoDB的学习一

一、数据库的分类● 关系数据库：Oracle、sql server、MySQL、db2 – 常用于存储业务数据● 文档数据库：MongoDB – 常用于webServer存储结果集● 内存数据库：Redis – 常用于热数据、消息队列二、mongodb的启动进入mongodb的bin目录，在地址栏打开cmd,或者直接打开cmd进入mongodb的bin目录输入mongo （启动mongo的客户端，不能关闭）输入mongod（启动mongodb服务）注：如果系统不支持自动启动mongodb：

2021-10-19 18:52:07 259

原创仿淘宝项目遇到的问题整理

仿淘宝项目遇到的问题整理问题1：Ajax请求返回一个php文件现象：Ajax请求成功状态码为304,返回值为一整个php文件,直接通过localhost访问php文件得到值为1（正常值）原因：使用了vscode自带的服务器5500端口打开文件，5500解析不了Apache的php文件解决：用localhost或者127.0.0.1访问html文件即可问题2：图片不显示现象：图片存在，且本身和父级元素均可见，但图片不显示原因：父级的父级设置了overflow:hidden且父级所在的位置位于父级的父级的

2021-10-18 21:00:51 142

weixin_45048086的博客