04 2019 档案
摘要：1、什么是盒子模型？ 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个
阅读全文
摘要：NPM介绍： 为什么要保存至的的package.json？因为节点插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入的的package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。 6. 使用
阅读全文
摘要：（1）node功能 准确的说是使用vue-cli 脚手架搭建项目的时候需要nodejs。也可以用script标签引入vue.min.js这样的，在js里实例化vue也行。 使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less，等，启动测试服务器lo
阅读全文
摘要：webpack能够把.vue后缀名的文件打包成浏览器能够识别的js 而这个.vue文件装换需要打包器vue-loader 这个vue-loader打包器是可以从npm上面下载（npm上面有很多资源包） npm下载文件之后，webpack打包文件的时需要node环境去运行 .
阅读全文
摘要：（1）npm介绍 在正式介绍Node.js学习之前，我们先认识一下npm。 npm是什么东西？npm其实是Node.js的包管理工具（package manager）。 为啥需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个
阅读全文
摘要：（1）目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： （2）允许上传的文件 .
阅读全文
摘要：（1）协同开发和发布 在中大型的公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目。为此，小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作。 网页开发：以往我们在开发完网页之后，需要把网页的代码和资源放在服务器上，让用户通过互联网来访问。 小
阅读全文
摘要：（1）宿主环境 我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。之前把小程序涉及到的文件类型阐述了一遍，接下来结合demo项目来讲一下这些文件是怎么配合工作的。 （2）渲染层和逻辑层 首先，简单了解下小程序的运行环境。小程序的运行环境
阅读全文
摘要：通过开发者工具快速创建了一个demo项目，观察后可以发现这个项目里边生成了不同类型的文件： 接下来分别看看这4种文件的作用 （1）JSON配置 JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。可以看到在项目的根目录有一个 app.json 和 project.co
阅读全文
摘要：（1）申请帐号 进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。 在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 登录 小程序后台 ，我们可以在菜单 “设置” 就可以看到小程序的 AppID 了 。小程序的 AppID 相当于小程序
阅读全文
摘要：【小结】 （1）弹性容器与弹性元素 对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。 弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。 （2）主轴方向 可以在弹性容器上通过flex-dir
阅读全文
摘要：既然写项目，那么少不了用jq，那我们就引入进来吧 1、因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery 打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。 dependencies:{ "jquery":"^2.2.1"}
阅读全文
摘要：箭头函数的语法非常简单，看一下最简单的箭头函数表示法 之前没有接触过箭头函数的人可能会惊讶于其代码的简洁。对比之前如果要写一个这样的函数 箭头函数的简洁性一目了然。 对比： .
阅读全文
摘要：【问题描述】 返回顶部组件里，用到数据操作。通过方法里改动this数据，但发现直接使用失效 此时发现无效？？？ 检查后发现this指向window，而非vue实例，所以无法操作数据。 【解决方案】 .
阅读全文
摘要：1.关于公共的css 在src下面新建public.css，然后在main.js中引入进来 import '@/public.css',这样所有页面中都会使用这个样式了，如果只是部分页面需要，那还是不用用这种公共配置，在页面中引入就好了。 2.关于公共的JS 创建好vue-cli后，如果想安装些开发
阅读全文
摘要：vue脚手架搭建好项目后，组件间的引用通过components 使用时 【注意】 有时为了区分明显，一般在使用时在前面加上v-，所以可以对上面做下改动 使用时 .
阅读全文
摘要：方法一： 下载swiper： swiper4.0使用入口：http://www.swiper.com.cn/usage/index.html； html： 在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动 var mySwiper = 删
阅读全文
摘要：（1）项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变，如下图： 点击index.html，通过浏览器运行，出现以下报错，如图： 那么应该如何修改呢？ 具体步骤如下： 此时点击index.html，通过浏览器运行便，发现动态绑定的static的图片找不到，故static
阅读全文
摘要：有的时候用vue-cli创建好项目之后，写代码时会出现换行和空格报错，出现这么写错误是什么原因呢？ 相信第一次接触时有点摸不着头脑。其实是在你用vue-cli脚手架构建项目时用了ESLint代码检查工具，如下图 解决方案很多种，最简单就是在创建项目初始化时，在这个选项选择N即可。 （1）ESLint
阅读全文
摘要：处理静态资产 你可能已经注意到，在项目结构中我们有两个静态资产目录：src/assets和static/。他们之间有什么区别？ 要回答这个问题，我们首先需要了解Webpack如何处理静态资产。在*.vue组件中，您的所有模板和CSS都会被解析vue-html-loader并css-loader查找资
阅读全文
摘要：1. 变量声明const和let； 2. 模板字符串； 3. 箭头函数； 4. import导入模块、export导出模块； 5. promise
阅读全文
摘要：（1）什么是mvvm？ MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Mode
阅读全文
摘要：（1）什么是Render函数 先来看一个场景，在博客网中，一般有一级标题、二级标题、三级标题...，为了方便分享url，它们都做成了锚点，点击后，会将内容加载网址后面，以#分隔。 例如‘特性’是一个<h2>标签，内容含有一个<a href='#特性'>#</a>的链接，点击后url便带有了锚点信息，
阅读全文
摘要：webpack 是利用loader 来处理各种资源的，wepback的配置基本上就是为各种资源文件，指定不同类型的loader。 1，处理css 最基本的css 处理loader 是css-loader , style-loader. css-loader 处理的是css 中的@import 和ur
阅读全文
摘要：每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。 【一】父组件→子组件 （1）父组件传递数据 在vue-c
阅读全文
摘要：vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解
阅读全文
摘要：（1）概念： 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是
阅读全文
摘要：改变props情况：①作为初始值使用；②计算方法 （1）父元素props→子元素 父元素数据通过props传递给子元素 （2）自定义事件 子组件可以使用 $emit 触发父组件的自定义事件。 语法格式： 分布： ①子组件添加事件 ②子组件添加方法和$emit(event事件名称,arg传值) ③父组
阅读全文
摘要：参考文章：https://blog.csdn.net/weixin_42676530/article/details/82961279
阅读全文
摘要：参考文章：https://blog.csdn.net/diligentkong/article/details/75040348
阅读全文
摘要：参考文章：https://blog.csdn.net/diligentkong/article/details/75040651
阅读全文
摘要：（1）组件通信 父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。 两者区别：props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template、计算属性com
阅读全文
摘要：JS标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面 在js里面，经常需要使用js往页面中插入html内容。比如这样： 如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号
阅读全文
摘要：将html结构写在一对script标签中，设置type=“x-template” .
阅读全文
摘要：今天，我们来讲一个比较有趣的一个功能吧 先来看一段代码示例： <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div
阅读全文
摘要：数据挂载 在实例化Vue的时候，两种方式挂载数据 方法一：最常用的方法 注：文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素 方法二：$mount 注：利用$mount挂载的方法有一个很大的好处，就是将实例化的内容和他对HTML的关联分开，可以更直观的展现。
阅读全文
摘要：console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。 console.dir()可以显示一个对象所有的属性和方法。 代码格式： 之前想打印输出，ul的相关属性 控制台输出结果： 现在可以利用co
阅读全文
摘要：（1）引入顺序 引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”: 然后点击页面顶部download按钮下载 less.js, 在<head> 中引入: 注意你的less样式文件一定要在引入less.js前先引入。 备注：请在服务器环境下使用！本地直接
阅读全文
摘要：（1）渐进式vue 构建用户界面的渐进式框架 只关注视图层 （2）vue中的两个核心点 响应的数据绑定：当数据发生改变时，自动更新视图 利用Object.definedProperty（该属性IE8不兼容）中的setter/getter代理数据，监控对数据的操作 组合的视图组件：UI界面映射为组件树
阅读全文
摘要：一、介绍 vue.js 是 目前 最火的前端框架，vue.js 兼具 angular.js 和 react.js 的优点，并剔除它们的缺点。并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等 通过他们我们可以很轻松的构建一个大型单页应用。目前Vue版本为
阅读全文
摘要：Vue.js + vue-router 可以很简单的实现单页应用。 <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。 以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-rou
阅读全文
摘要：问题描述： JS在IE8以下浏览器运行异常 代码： <script>标签是这样子写的： 这是书写的时候Dreamweaver自动补全的。但是在自己运行的例子中我的script标签写的是： 将项目中的标签type属性修改成了text-javascript，然后，然后在IE8一下就可以运行了。 拓展：
阅读全文
摘要：说到js的运行机制，那么就要先从几个名词开始，这是为了让更多的人能看懂。 如下： 进程和线程： 进程：进程是正在运行的程序的实例。程序关于数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位； 进程有三个基本的状态： 线程：有时被称为轻量级进程(Lightweight Process，LWP
阅读全文
摘要：1、配置 Node 环境。 自行百度吧。 安装好了之后，打开 cmd 。运行 node -v 。显示版本号，就是安装成功了。 注：不要安装8.0.0以上的版本，和 vue-cli 不兼容。 我使用的 6.10.3 的版本，相对稳定。 2、使用 npm 管理依赖 使用 node 自带的包管理工具 np
阅读全文
摘要：（1）安装Less模块： （2）安装less和less-loader，命令如下 （3）打开build/webpack.base.conf.js，在module.exports 对象中添加依赖 （4）代码中的style标签中加上 lang="less" 就可以使用了 .
阅读全文
摘要：大多数文章对于到底怎样编译less文件并没有一个详细的说明，清一色的grunt命令，看得也是晕晕的，所以也就有了这篇手记的存在。 步入正题 1.安装配置好sublime text3（包括各种实用插件）和node.js后，新建一个文件夹，这里取名less_test，文件目录结构如下：其中node_mo
阅读全文
摘要：CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 C
阅读全文
摘要：（1）变量 我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护 只要我们修改 bgColor这一个变量， 整个页面的背景颜色都会随之改变。而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。 ①值变量 以 @ 开头 定义变量，并且使用
阅读全文
摘要：vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 element：基于vuejs2.0的ui组件库。 vue-router：一般单页面应用spa都要用到的前端路由。 vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
阅读全文
摘要：效果展示：（说明：使用webpack重构购物车程序，使用vue-cli生成项目脚手架） 文件结构： 代码： （1）将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清晰了很多，template标签部分编写模板，script标签部分编写组件的交互代码，编写方式和原先写
阅读全文
摘要：参考文章：https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点： node.js vue.js webpack前端工程化 本篇不是写给零基础的同学看的，读者应具备一些
阅读全文
