- 博客(35)
- 收藏
- 关注
原创 Vue2,带你彻底看懂插槽的常见四种出现方式
Vue2,带你彻底看懂插槽的常见四种出现方式插槽是做什么的首先我们得知道使用插槽是做什么得,试用于什么样得场景。<body> <div id="app"> <mynav> </mynav> </div> <script src="./node_modules/vue/dist/vue.js"></script> <template id="mynav
2022-03-10 20:21:50 1292
原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/deta
解决vue-router在3.0版本以上重复点菜单报错问题
2022-02-21 10:23:19 680
原创 vue-router,Non-nested routes must include a leading slash character . Fix the following routes:login
非嵌套路由前边必须带/ 比如 path:‘/login’,修改之后就会发现不警告了。
2022-02-18 19:16:54 1546
原创 Vue2,带你探秘$attrs和$listeners
带你探秘$ attrs和$ listeners$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。演示如下:<script> let m2 = { props: ["c"]
2022-02-17 20:48:25 880
原创 Vue2,plugin插件的使用详解
plugin插件的使用我们来创建一个插件,注意必须要写install对象,install里面写具体的操作。 var wgd = { install: (Vue) => { Vue.filter("timeFormat", (val) => { let time = new Date(val) let year = time.getFullYear()
2022-02-17 20:45:51 716
原创 Vue2,过滤器的使用详解
过滤器Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>
2022-02-17 20:44:40 673
原创 Vue2,mixin混入语法
mixin 混入语法混入语法中的生命周期执行会加入到实例调用的实例当中,data和methods会遵从实例中的data和methods。我们直接来看实例: var myMxiin={ data:{ msg:'1000' }, created(){ console.log('我是混入语法中的生命周期') this.init()
2022-02-17 20:43:43 337
原创 Vue2,局部组件component的用方法
局部组件component的用方法我们来看用法:<!-- 动态组件由 vm 实例的 `componentId` property 控制 --><component :is="componentId"></component>我们来看例子:<body> <div id="app"> <!-- 组件的另外一种引入方式 --> <component :is="current">&
2022-02-17 20:42:31 1702
原创 Vue2,用实例带你看懂自定义组件的v-model
自定义组件的v-model注意这样的一个属性model: model: { prop: 'value', //继承的元素 event: 'input' //订阅到的事件 }我们来看整体的使用代码,这里是双向绑定,输入框输入什么msg就跟着变化。<body> <div id="app"><!-- 自定义组件的v-model --> <tod
2022-02-17 20:38:57 777
原创 Vue2,带你看懂插槽的使用
插槽文章目录插槽匿名插槽具名插槽作用域插槽匿名插槽匿名插槽会储存html组件标签内匿名的标签和元素。html代码如下: <!-- html --><div id="app"> <father> <button @click="pop">弹出</button> <h1>这是一个h1标签</h1> </father>
2022-02-16 11:17:49 672
原创 Vue2,生命周期
生命周期beforeCreate() 创建实例之前created() 创建实例对象后beforeMount() 在template挂载之前执行mounted() 在虚拟DOM真正挂载完毕,常常在这里操纵的DOM元素beforeUpdate()在数据更新之前updated()在数据更新完毕befpreDestroy() 这里常常有一个操作就是清除定时器,清除事件处理函数,destroyed() 销毁之后*注意:destroyed中常常要执行清除定时器还有
2022-02-15 11:36:13 302
原创 Vue2,组件,组件间的通讯,父子组件间的相互访问
组件以及组件间的通讯文章目录组件以及组件间的通讯组件使用全局定义局部组件的定义组件的嵌套父向子通讯子向父通讯兄弟组件之间的通信PubSub插件实现 任意组件间的通讯组件使用全局定义Vue.component("mynav",{ template:"<ul><li>首页</li><li>我的</li></ul>"})注意:在定义组件时里面的data属性必须是函数式编程,目的是每次调用组件返回一个独立的数。局部组件的
2022-02-15 11:22:34 312
原创 Vue2,使用Vue基础语法实现github上火热的todoMVC案例
用Vue去实现todoMVC案例安装下载初始案例首先我们下去github上下载todoMVC的初始文件,文件地址如下:https://github.com/tastejs/todomvc-app-template当然我们也可以下载压缩包,这里不要求.我们下载好后使用npm指令安装所有的依赖npm install现在我们应该可以在文件中找到index.html文件我们打开会看到一个简单的toMVC网页,没有任何的操作只有静态网页。在开始前我们做最后一步骤,配置scri
2022-02-12 10:40:34 650
原创 浅尝辄止Node.js(四),Node.js中的第三方模块以及模块的加载机制
对Node.js中的第三方模块做了整理,包括概念,常见操作等。另外对模块的加载机制进行了详细介绍。
2022-02-11 11:32:05 497
原创 浅尝辄止Node.js(三),使用http模块创建一个http服务器并完成get和post请求的书写
使用http模块创建一个http服务器并完成get和post请求的书写。首先我们先用一段代码创建一个最基本的服务器const http = require("http")const server = http.createServer((req, res)=> { res.setHeader("Content-Type", "text/html;charset=utf-8") res.end("这是:123")})server.listen(5000, ()=>
2022-02-10 21:01:50 538
原创 Vue2,v-if,v-show的区别,以及computed,watch,methods的区别与使用(含小练习)
v-if,v-show的区别,以及computed,watch,methods的区别与使用指令的补充关于显示的代码以及比较。v-if , v-else, v-else-if 条件渲染(决定是否将元素渲染到页面,决定是否在DOM上显示)<body> <div class="app"> <span v-if="isShow">Hello Vue !</span> ddd </div> &l
2022-02-10 19:50:02 741
原创 break和continue的区别
break和continue的区别break:语句用于终止循环;continue:用于跳出循环中的一个迭代;(跳过当次循环,继续下次循环)共同特点:break,continue后面的代码不执行以下是例子:示例1:breakfor(var i=0;i<10;i++){ //满足下面的条件,循环结束 if(i==3){ break; console.log('good') } console.log('i') ;
2022-02-10 11:02:27 176
原创 Vue里`$event` 中的target和currentTarget的区别
$event 中的target和currentTarget的区别$event是Vue自带的一个属性,可以看到很多属性。有点类似DOM中的event。讲到这里我们就要提出一下下面两个重要的东西:event.target 触发事件的元素对象event.currentTarget 绑定事件的元素对象我们来上案例来讲解一下两者的区别:<body> <div class="app"> <button @click="add($event)">点击
2022-02-10 08:42:06 1668
原创 浅尝辄止Node.js(一),Node.js简介,安装以及模块化的介绍
一、Node.js简介简单来说Node.js就是运行在服务端的JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。以上的概念是菜鸟教程给我们列出的,对我来说Node.js就是用前端的JS代码去写后端的逻辑和接口。废话不多说让我们开始吧!二、安装官方网址:https://nodejs.org/zh
2022-02-09 20:27:48 92
原创 浅尝辄止Node.js(二),Node.js常见的内置模块以及方法
Node.js中常见的内置模块fs文件系统模块fs模块是Node.js官方提供的,用来操作文件模块,它提供了一系列方法和属性用来满足客户对文件的操作需求。常见的方法有两个一个是fs.readFile()一个是fs.writeFile(),分别用来进行读取和写入操作。fs.readFile() 读取文件内容方法//1.导入 fs模块,来操作文件const fs = require('fs');//2.调用fs.readFile()方法读取文件//参数1:读取文件的存放路径// 参数2:
2022-02-09 20:25:24 280
原创 浅尝辄止Node.js(一),简介,安装以及模块化的介绍
一、Node.js简介简单来说Node.js就是运行在服务端的JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。以上的概念是菜鸟教程给我们列出的,对我来说Node.js就是用前端的JS代码去写后端的逻辑和接口。废话不多说让我们开始吧!二、安装官方网址:https://nodejs.org/zh
2022-02-09 20:24:02 213
原创 JavaScript中的reduce()方法使用
数组中reduce方法的使用定义:reduce()方法接受一个函数作为累加器,数组中的每个值(从左到右)。语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)total:计算结束后的返回值 (必须)currentValue:当前元素 (必须)currentIndex:当前元素的索引(可选)arr:当前元素所属的数组对象(可选)initialValue:传递给函数的初始值(可选)
2022-02-09 18:53:09 363
原创 ‘can not read a block mapping entry; a multiline key may not be an implicit key‘
‘can not read a block mapping entry; a multiline key may not be an implicit key’问题出现的地方:title: 2.8 Vue初体验date: 2022-02-08 19:27:12tags: 笔记在这三个标题的:后面都必须添加一个空格,否则就会出错。
2022-02-08 20:25:26 994
原创 table的border线重叠?试试这段代码。
table { border-collapse:collapse; }border-collpase属性设置表格的边框是否被合并为一个单一的边框,还是分开表示。属性值如下 :collpase 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性inherit规定应该从父元素继承 border-c...
2022-02-08 20:17:03 250
原创 Vue2,部分指令的认识(含小练习)
一、Vue初体验1.1 Vue安装引入 外网链接,可以去BootCDN获取<script src="">npm安装到本地npm install vue@2.6.14<script src="../node_modules/vue/dist/vue.js">注意:在2022年Vue如果不加版本号默认下载最新3X的版本1.2 第一个Vue程序<body><span id="aaa" >{{msg}}</span>&
2022-02-08 19:56:40 519 1
原创 首次Git的使用以及上传到远端仓库
首次Git的使用以及上传到远端仓库1.安装Git工具直接去官方安装就OK了。检验是否安装成功:git --version2.如何使用Git工具对代码进行管理第一次使用Git,需要配置邮箱和用户名git config set user.email "邮箱"git config set user.name "用户名"查看状态git status 初始化工程git init创建.gitignore文件,里面写的东西不会被上传[外链图片转存失败,源站可能有防盗链机制,建议将图片保
2022-02-08 10:37:30 913
原创 Markdown的语法以及快捷键
Markdown语法标题标题层级由#个数区分,数量可为1-6,分别对应一到六级标题语法:# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题段落在两段文本之间空出至少一行空白行。语法:文本一。<!-- 空行 -->文本二。换行共有四种方式<br>标签换行优点:表述清楚缺点:占行位语法:文本一。<br>文本二。段落换行优点:不影响mar
2022-02-07 11:46:05 988
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人