- 博客(20)
- 收藏
- 关注
RSS订阅原创 vue笔记 (十) vue-cli2和vue-cli3的使用与对比
CLI 是 Command-Line Interface , 翻译为命令行界面, 俗称脚手架。Vue CLI 是一个官方发布的 vue.js 项目脚手架，使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。vue-cli的使用前提，已安装node和webpack。vue-cli2安装$ npm install -g @vue/cli注意:上面安装的是vu...
2020-03-31 19:36:38
481
原创 webpack (二) loader、plugin的使用
loader的使用在之前的实例中，主要是用 webpack 来处理 js 代码，并且 webpack 会自动处理 js 之间相关的依赖。但在开发中往往不仅仅有基本的 js 代码处理，也需要加载 css、图片，也包括一些高级的将 ES6、TypeScript 转成 ES5 代码，将scss、less 转成 css，将 .jsx、.vue 文件转成 js 文件等。对于webpack本身的能力来说...
2020-03-30 19:17:44
193
原创 webpack (一) webpack的基本使用、和grunt/gulp的对比
认识webpack什么是Webpack？官方的解释：At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。我们可以用两个关键词来解释上面这句话：模块化和打包，所谓打包，说白了就是编译；模块化可...
2020-03-28 00:08:28
306
原创 前端模块化开发－发展过程及解决方案
为什么需要模块化JavaScript原始功能在网页开发的早期，js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码很少，直接将代码写在 ...
2020-03-27 12:28:52
155
原创 Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)
slot 翻译为插槽，插槽的目的是让我们原来的设备具备更多的扩展性。vue组件中使用插槽，也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。vue2.6.0之前用法单个插槽(默认/匿名插槽)在子组件中，使用特殊的元素 就可以为子组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用。具名插槽当子组件的功能复杂时，子组件的插槽可能并非是一个。比...
2020-03-26 22:37:40
789
原创 Vue学习笔记 (八) 父子组件通信
父子组件的传值父传子：通过props向子组件传递数据子传父：通过自定义事件向父组件发送消息父传子props验证1.默认值props: { cmessage: { type: String, default: '默认值', // 默认值 }当默认值类型是数组或对象时，default后面必须是一个函数props: { cmessage: { ...
2020-03-25 23:05:43
137
原创 Vue笔记 (七) 组件化思想
Vue组件化组件化是 Vue.js 中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树：注册组件的基本步骤(了解)Vue.extend()这种写法在Vue2.x以后基本就很少见了，会直接使用语法糖，但内部还是这个原理。全局组件和局部组件当我们通过调用 Vue.component() 注册组件时，组件的注册是全...
2020-03-24 22:15:07
462
原创 Vue笔记 (六) v-model的基本使用及实现原理
v-model的基本使用vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。<div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2></div><script src="../js/vue.js"><...
2020-03-23 16:14:48
309
原创 JavaScript高阶函数filter、map、reduce的使用
filter函数(过滤)filter用于过滤，就是把数组中的每个元素，使用回调函数func进行校验，回调函数func返回一个布尔值，将返回值为 true 的元素放入新数组let array = [1, 2, 4, 6]let newArray = array.filter(item => item < 6)console.log(newArray) // [1, 2, 4]m...
2020-03-23 13:59:13
174
原创 Vue笔记 (五) 阶段性小案例
鼠标点击改变样式如下图，给出一个列表，鼠标点击样式跟着改变。css:.active { color: red;}html：<div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:index === currentIndex}" ...
2020-03-22 23:06:55
120
原创 Vue笔记 (四) 事件监听v-on、条件判断v-if、v-show、循环遍历v-for
v-on在前端开发中，我们需要经常和用户进行交互，这个时候，就必须监听用户发生的事件，比如点击、拖拽、键盘事件等，在 Vue 中监听事件使用 v-on 指令基本用法<!-- 'add'是在下面定义的方法名 --> <button v-on:click="add">+</button>// ...data: { num: 0},methods...
2020-03-21 23:15:48
3557
原创 Vue笔记 (三) 绑定属性v-bind和计算属性computed
v-bind基本用法v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props值(后期介绍链接)。前面学习的指令主要作用是将值插入到我们模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定，比如：动态绑定 a 元素的 href 属性、动态绑定 img 元素的 src 属性。这时可以使用 v-bind 指令来动态绑定属性<img v-bind:s...
2020-03-20 22:50:05
4196
原创 Vue笔记 (二) Vue的插值操作和简单V指令
插值操作Mustache可以通过Mustache语法(也就是双大括号),将data中的文本数据插入到HTML中：<div class="div"> <!-- 插到标签中 --> <h2>Hello {{name}}</h2> <!-- 使用了两个Mustache--> <h2>{{firstName}} {...
2020-03-20 11:04:03
158
原创 Vue笔记 (一) Vue简介、MVVM、Vue生命周期
Vue简介Vue（读音 /vjuː/，类似于 view）是一个渐进式的框架，什么是渐进式：渐进式意味着你可以将 Vue 作为应用的一部分嵌入其中，带来更丰富的交互体验，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统（比如：Core+Vue-router+Vuex）也可以满足你各种各样的需求Vue 有很多特点和Web开发中常见的高级功能：解耦视图和数据可复...
2020-03-19 14:17:49
215
原创 Javascript Bom概念及常用api
BOM简介JavaScript的实现包括以下3个部分：1.核心（ECMAScript）：描述了JS的语法和基本对象。2.文档对象模型 （DOM）：处理网页内容的方法和接口3.浏览器对象模型（BOM）：与浏览器交互的方法和接口BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而window对象又具...
2020-03-18 23:28:42
323
原创 Dom修改、添加和删除
修改修改内容elem.innerHTML 获取或修改指定元素标签内的 html内容，包含HTML标签innerText 获取或修改指定元素标签内的文本值，不包含HTML标签(elem.textContent也可实现，但是有兼容问题)elem.value 获取或修改表单元素的值修改属性HTML DOM与核心(Core)DOM的区别核心DOM(万能，但繁琐)1.获取属性值(两种方法)...
2020-03-18 16:45:36
616
原创 核心(Core)Dom与HTML DOM的概念和区别
什么是DOMDOM全称Document Object Model(文档对象模型),DOM 定义了访问 HTML 和 XML 文档的标准。W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档(包括HTM、XHTML和XML)的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型HTML DOM与核心...
2020-03-18 15:27:14
1742
1
原创 hexo博客-next主题美化、配置
修改标签样式实现方法：修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag"，将后面的#换成<i class="fa fa-tag"></i>。效果图：文章结束标志效果图：实现方法：在\themes\next\layout\_macro中新建 passage-end-tag.swig 文件,并添加以下内容：...
2020-03-17 22:29:57
355
原创 Dom概念、Dom树、Dom查找
DOM概念什么是DOM: Document Object Model，是W3C规定的专门操作网页内容的统一的API标准，用DOM操作网页内容，几乎兼容所有浏览器。简述HTML DHTML XHTML XML的区别HTML：专门编写网页内容的语言，标签名固定XHTML：更严格的XHTML标准DHTML：一切可以实现网页动态效果的技术的统称,包含：HTML+CSS+JSXML：可扩展的标...
2020-03-15 16:46:33
464
原创 hexo搭建个人博客
安装Git(mac可忽略)下载地址安装步骤：一路next安装完成后输入git version查看版本，看到版本号说明安装成功$ git versiongit version 2.25.0.windows.1安装Node.jsHexo是基于Node.js制作的静态博客，我们要用到Node.js里面的npm(node package manager)包管理器来安装插件。下载地址...
2020-03-11 13:41:04
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人