liwan09的博客

在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问代码实例：在根组件main.js中定义data数据，methods及computed属性页面子组件中调用根组件数据实现 注意：对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。使用 $parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触

Vue是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 不支持 IE8 及其以下版本，因为 Vue 使用了 IE8 不能模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。其目标为使JavaScript可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript和JavaScript的关系：前者是后者的规格；后者是前者的一种实现。ECMAScript 背景JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，

一、let关键字let关键字用来声明变量，使用let声明的变量有几个特点：不允许重复声明 有块级作用域 不存在变量提升 不影响作用域链let关键字代码说明//let不允许重复声明 let a=2;let a=3;console.log(a);//报错：uncaught SyntaxError:Identefter 'a'has already been declared//let不允许重复声明function func(a){ let a=9;}func();//

一、项目搭建1、创建一个.NET Core WebAPI项目，包含简单的增删改查接口功能2、VS2017 创建一个MVC项目，从https://code.angularjs.org/下载angularJS包，项目中引入相关的angularjs二、功能实现1、mvc项目中创建三个页面——登录页面（Login）、数据列表页(AccountList)、编辑页面（AcocuntEdit）...

一、Angular项目文件结构二、项目文件介绍项目文件中主要的文件为 文件夹src，下面分为两部分介绍，根目录中的src文件夹和除了src文件夹以外的文件。1、src文件夹文件 描述 app/app.component.{ts,html,css,spec.ts} 使用 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件，随着...

一、了解什么是AngularJS简单的来说，AngularJS是通过指令扩展HTML,通过表达式把数据绑定到HTML中，使用javascript编写的一个库，是一个JavaScript框架。相关的JS文件下载 https://code.angularjs.org/二、关于AngularJS的学习分步在了解了什么是AngularJS后，大概的熟悉一下关于AngularJS的相关的模块...

写在前面环境 ：Angular8图片预览组件实现的功能包括：全屏查看；放大、缩小（鼠标滚轮可放大、缩小图片）；翻页（ 键盘左右按键翻页）；旋转；拖拽功能实现首先创建angular项目，在项目中创建图片预览组件以及全屏显示的中间件全屏显示 中间件实现代码import { Directive, Input, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';@Directive({ se.

webapi下载附件代码示例/// <summary> /// 下载文件 /// </summary> /// <param name="id">附件id</param> /// <returns></returns> [HttpGet] public ResponseData DownloadFile(string id)

一、Angular CLI概述Angular CLI 是一个命令行接口（ command line interface），用于实现自动化开发工作流程，它可允许实现的包括创建一个新的Angular应用程序 运行带有LiveReload支持的开发服务器，以便在开发过程中预览应用程序 添加功能到现有的Angular应用程序 运行应用程序的单元测试 运行应用程序的end -to-end ...

前端web部署的服务器和后端提供服务API不在同一个域名下，就会产生跨域问题，在学习Angular的过程中，出现了跨域的问题，我自己整理了一下相关的解决方案，供大家参考。一、Angular CLI 配置解决在angular 项目的根目录下创建 proxy.config.json 文件，文件内容如下（参考）                                          ...

1、创建子组件需要调用的公用方法faultsolution-service.ts（名称自定义）import { Injectable } from '@angular/core';import { Observable, Subject } from 'rxjs';@Injectable({ providedIn: 'root'})export class FaultsolutionService { private onNewSolution$: Subject<.

上篇文章https://blog.youkuaiyun.com/liwan09/article/details/82288470主要讲的是初步的环境搭建，这里主要讲下相关功能的具体实现一、登录功能1、打开创建的accountinfoservice服务 accountinfo.service.ts文件，导入http、Observable、以及创建的三个实体类import { HttpClient,...

一、安装环境1、win10 pro 64位2、Node.js: 版本为v8.11.4二、Node.js的下载安装下载地址：https://nodejs.org/en/download/安装过程，按照步骤一步一步安装就可以了，不过，安装过程中，建议修改安装路径(本示例中，安装路径为D:\nodejs)，后面需要配置环境变量，同时也方便对项目的管理。由于新版的Node.js...

最近在学习Angular，对于一个初学者，大概花费了5天的时间，学习了解的angular项目的简单创建，包括一些基础问题的解决、路由、Http的配置使用等。一、准备工作1、项目需要实现的功能包括：用户的登录，用户信息的增删改查2、创建一个WebAPI 项目，并发布运行，我使用的是VsCode+.NetCore+EF+SqlServer3、创建一个angular项目二、项目架构搭...

在执行 ionic cordova platform add android 命令时，出现了“ionic : 无法加载文件 D:\nodejs\node_global\ionic.ps1，因为在此系统上禁止运行脚本。”的错误，如下图解决方案（1）以管理员身份运行vs code（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）（3）在终端执行：set-ExecutionPolicy RemoteSigned（4）在终端执行：get-E

在执行 ionic cordova build android 命令时，出现了ANDROID_SDK_ROOT=undefined (recommended setting)的错误解决方案：添加环境变量 ANDROID_SDK_ROOT 变量值同 ANDROID_HOME以管理员身份重新打开vscode,重新执行ionic cordova build android，此时的ANDROID_SDK_ROOT值内容如下图：...

问题描述ionic cordova app 开发，ion-datetime 设置当前时间为默认时间，日期格式为 yyyy-MM-dd HH:mm:ssAndroid 设置默认时间的值可以正常显示，在iphone上设置的默认时间没有显示原因及解决方法后来，仔细看了ion-datetime 日期格式化的相关说明，发现如果是单独使用日期，比如 yyyy-MM-dd 或者HH:mm:ss的日期格式，后台直接获取相对应的格式的日期，显示没有问题，比如“2020-07-29”或者 “12:30:45”，

ionic 项目执行npm i 时出现MSBUILD error:MSB3428 未能加载Visual C++组件“VCBuild.exe”的错误，如下图解决方案以管理员身份运行 cmd，执行npm install –global –production windows-build-tools命令然后将 前面的npm i 和 执行 npm install –global –production windows-build-tools的两个命令窗口关闭,然后重新执行 npm i 命令.

1、Xcode下载安装在AppStore 搜索安装Xcode安装完成后，启动Xcode2、nodejs下载安装进入nodejs官网，进行下载nodejs安装过程很简单，按照提示傻瓜式的操作安装完成后，打开终端，执行命令 node -v 和npm -v 查看版本号git无需安装，OSX自带git，输入命令可查看git版本信息3、cordov...

安装 cnpm :npm install -g cnpm --registry=https://registry.npm.taobao.org使用cnpm i命令执行安装

ionic 项目执行命令 ionic cordova platform android 时，出现错误ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema解决方案：重新安装sass-loadernpm uninstall --save-dev sass-loadernpm ins.

以管理员身份运行 cmd，执行命令：npm cache clean --force

ionic 及cordova环境配置1、安装nodejs 参见https://blog.youkuaiyun.com/liwan09/article/details/1046516502、安装cordova和ioniccmd 执行命令 npm i -g cordova ionic执行完成后，可通过 node -v 和cordova -v 查看安装的版本Android 环境配置（打...

1、项目中引入File插件，File插件使用参见https://ionicframework.com/docs/native/file2、File下载文件实现代码示例import { Injectable } from '@angular/core';import { File } from '@ionic-native/file/ngx';@Injectable({ providedIn: 'root'})export class FilesDownloadService {

一、基础配置如果需要替换应用图标，替换项目中resources下面的icon.png如果需要替换应用的加载背景图，替换项目中resources下面的splash.png替换后执行 ionic cordova resources命令在项目的config.xml 文件中，可修改app名称及描述二、安卓app打包执行项目打包命令（使用VSCode打开的项目）1、...

在执行 ionic cordova build android 时，出现Failed to install the following Android SDK packages as some licences have not been accept的错误解决方案：以管理员身份运行cmd，进入Android\Sdk\tools\bin目录，然后执行命令 sdkmanager --licenses，接下来所有的(y/N)选项全部选择y...

在执行ionic cordova build android命令时，出现Execution failed for task ':app:processDebugManifest'.的错误错误原因显示是因为相机的权限冲突问题导致的，后面发现是与插件的权限冲突，我这里是（cordova-plugin-qrscanner中的相机权限的冲突）解决方案：在plugins下找到有权限冲突的插件文件夹，然后在插件文件夹下找到 plugin.xml文件，在xml文件中，找到config-filetar...

在ionic 项目执行 npm i 命令时，出现Error: not found: python2的错误，错误如下图解决方案1、下载python https://www.python.org/download/releases/2.7/2、安装python3、设置python环境变量1）电脑右击——属性——高级系统设置—高级—环境变量2）系统变量—Path 中添加环境变量 C:\Python27（python安装目录）4、然后执行 npm ...

1、jQuery.print.js打印插件地址：https://github.com/DoersGuild/jQuery.print该打印插件适用于局部打印基础使用方法$(selector).print();或者$("#myElementId").print({ globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector:

以导入excel为例function ImportExcel() { var files = document.getElementById("file_upload").files; var formdata_file = new FormData(); formdata_file.append("file", files[0]); var userId = '001'; $.a.

1、OrgChart地址：https://github.com/dabeng/OrgChart在线Demo:https://dabeng.github.io/OrgChart/基本效果图2、JavaScript InfoVis Toolkit地址：http://philogb.github.io/jit/3、jOrgChart地址：https://github.com/wesnolte/jOrgChart注：该插件还是9年前更新的，不建议使用效果图4、 .

由于浏览器的设置保护功能，input file 获取不到真正的文件路径，可将选择的文件转为base64 <input id="file_upload" value="导入" type="file" onchange="filechange()" /> //文件选择改变事件 function filechange() { var selectFile = document.getElementById("file_upload");

下载地址：https://developer.snapappointments.com/bootstrap-select/示例地址：https://developer.snapappointments.com/bootstrap-select/examples/参数详解地址：https://developer.snapappointments.com/bootstrap-select/op...

问题描述：在使用ztree显示树节点时，发现没有子节点的节点图标没有显示后来发现在绑定的treeNode的json数据中，有个isParent字段的设置，API文档的对此的说明是详情参见：http://www.treejs.cn/v3/api.php查看相关api记录 treeNode 节点是否为父节点。1、初始化节点数据时，根据 treeNode.children 属性判断，有子节点则设置为 true，否则为 false2、初始化节点数据时，如果设定 treeNode.isPare.

function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf(“compatible”) > -1 && userAgent.indexOf(“MSIE”) > -1; //判断是否IE<11浏览器var isEdge = userAgent.indexOf(“Edge”) > -1 && !i

引言开发ngx(angular 2+)应用时，基本上到处都会用到rxjs来处理异步请求，事件调用等等。所以经常会使用Subject来处理源源不断的数据流，比如input text change, toast notification等等。这都要依赖于Subject本身既可以是Observable也可以是Observer，也就是说subject既可以作为一个数据源，也可以本身成为一组订阅者的代理。但当处理更加复杂的业务需求时，仅仅用Subject可能无法满足要求，这个时候就考虑一下rxjs提供的其他S

关于scoped css在页面定义的style 中设置scoped<style>/* 全局样式 */</style><style scoped>/* 本地页面样式 */</style>当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：&

针对 vue history路由模式下，页面刷新404问题，针对不同的发布服务器及环境，官方文档的相关解决方案如下，链接地址：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90HTML5 History 模式vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 .