Vue.js

大家好，我是一叶，经过一段时间对vue的学习，我打算把vue做一个系列，把踩过的坑和大家分享一下。 现在开始第一章：vue引用并封装echarts 在文章开始前，我先舔波echarts（真香）。阿里的G2和百度的echarts都是很不错的，echarts上手难度小，并且用户多，文档多，生态环境较好，所以中小项目的话echarts就是首选。加个题外话，我把G2、echarts都po出来，大家凭喜好选取。 G2官方demo地址： https://antv.alipay.com/zh-cn/index.html echarts官方demo地址： https://echarts.baidu.com/ 现在开始干活，进入echarts网址中，我们能看到，图表的主要参数都在option这函数里，如图1所示。我们将option（）放到vue中的methods中即可引用。 图1 在项目中打开命令行（直接在地址栏输入cmd即可打开dos面板），输入命令，如图2 所示。 npm install echarts 图2 打开项目，创建views文件夹，存放父组件index.vue，在components文件夹下创建echartscom.vue子组件，如图3所示。echartscom.vue中主要放option（），用来实现图表渲染，index.vue存放数据，echartscom.vue引用index

1、定义路由 // 阿里云文件储存 Route::group(['prefix'=>'aliyun'], function (){ Route ::get('sign', 'AliyunController@sign' ); }); 2、编写 controller 层 /* * * 返回OSS的签名验证 * @return JSON 签名信息 */ public function sign(Request $request ) { // 初始化一下必要的请求数据 $id = 'xxx'; // AccessKeyId $key = 'xxx'; // AccessKeySecret $host = '//xxx.oss-cn-shenzhen.aliyuncs.com'; // OSS库地址 $cdn_host = "//img.xxx.com"; // 真实的访问地址 $dir = 'test/'; // 上传目录设置 $callbackUrl = url('upload/callback'); // 上传回调的地址 //上传回调的参数,callbackUrl地址,callbackBody回调接收的参数,callbackBodyType通过POST调用的回调函数,所以要设置这个头 $callback_param = array ( 'callbackUrl' =>

前言 TypeScript 中有很多地方涉及到子类型 subtype 、父类型 supertype 的概念，如果搞不清这些概念，那么很可能被报错搞得无从下手，或者在写一些复杂类型的时候看到别人可以这么写，但是不知道为什么他可以生效。（就是我自己没错了） 子类型 比如考虑如下接口： interface Animal { age: number } interface Dog extends Animal { bark(): void } 在这个例子中， Animal 是 Dog 的父类， Dog 是 Animal 的子类型，子类型的属性比父类型更多，更具体。 在类型系统中，属性更多的类型是子类型。 在集合论中，属性更少的集合是子集。 也就是说，子类型是父类型的超集，而父类型是子类型的子集，这是直觉上容易搞混的一点。 记住一个特征，子类型比父类型更加 具体 ，这点很关键。 可赋值性 assignable assignable 是类型系统中很重要的一个概念，当你把一个变量赋值给另一个变量时，就要检查这两个变量的类型之间是否可以相互赋值。 let animal: Animal let dog: Dog animal = dog // ✅ok dog = animal // ❌error! animal 实例上缺少属性 'bark' 从这个例子里可以看出， animal 是一个「更宽泛

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/zxj0904010228/article/details/83143563 1. 前言：在进行hybrid app开发时，可以采用vue.js前端框架进行h5页面开发，然后使用跨平台cordova工具打包成app，如android或ios等，再h5页面也可以使用cordova丰富的插件调用原生代码，获取设备相关信息、调取手机摄像头等 2. 创建cordova项目 1） 创建cordova项目 前提：安装node和cordova，安装方式很简单，自行百度就可以了 cordova create cordovaApp com.test.cordova myApp 2）创建平台 进入cordovaApp目录 cordova platform add android 创建android平台 或cordova platform add ios 创建ios平台 3）cordova打包命令，打包成apk的时候使用 cordova build android 此时会将cordovaApp/www目录下的文件打包成apk文件，即可安装到手机 3. 在cordova项目目录下创建vue 项目 在当前cordova项目目录下，使用vue

作者：吕小鸣 链接：http://www.imooc.com/article/291995 前端架构师, 听起来就是个很高大上的职位，在大多数程序员的眼中，架构师一般从事后端开发，Java或者C++出身，它们往往拥有这十八般武艺，可以解决业务中出现的各种问题。好像架构师就从来没有和前端有过关系，那么真的是这样么，通读此文，便可豁然开朗。 前端的意义 首先，我们先来谈谈本职工作，前端的意义。前端源自用户界面，是最先和用户接触的地方，也是衡量一个项目产品好坏的第一道关口。 到底什么是前端 从最早的DOS系统说起，那时是没有前端的概念的，大多数的软件界面显示的都是冷冰冰的黑底白字的控制台命令，于是，慢慢的不仅是用户，就连广大的程序员也不满足现状，开发出一套图形化的用户界面，让一些功能更加便于操作。那时前端叫做GUI(图形用户界面)。还没有区分出多端的概念，大多数是基于操作系统开发出的原生界面。 上图来自DOS系统经典软件DOS Navigator 随着互联网的发展，第一代浏览器Netscape(网景浏览器)的诞生以及后续的IE系列浏览器的到来，”网上冲浪“这个词逐渐进入到大多数的用户生活中。直到现在大行其道浏览器Chrome，以及国内各种百花齐放的浏览器。主要给浏览器服务，实现各种特效的JavaScript语言，迎来了第一波春天。 上图来自网景浏览器 直到现在，前端逐渐拆分成：

原文地址： 关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化，比如： data () { return { watchArr: [], }; }, watchArr (newVal) { console.log( '监听：' + newVal); }, created () { setTimeout(() => { this .watchArr = [1, 2, 3 ]; }, 1000 ); }, 再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素，并在下标 0 插入一个元素 3： data () { return { watchArr: [ 1, 2, 3 ], }; }, watchArr (newVal) { console.log( '监听：' + newVal); }, created () { setTimeout(() => { this .watchArr.splice(0, 2, 3 ); }, 1000 ); }, push 数组也能够监听到 vue 无法监听数组变化的情况 但是，数组在下面两种情况无法监听： 利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue; 修改数组的长度时，例如：arr.length

上一篇：搭建vue-cli脚手架 一起学vue—— vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 上一篇已经将vue-cli脚手架搭建好了，现在来认识一下脚手架里都是些啥东西，这里对重要的文件进行解释 （只是简单解释一下，如果要深入了解的话，自己搜一下哦） .一、目录结构 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js /

1. Vue 简介 详细内容可以参考官网 Vue.js 1）兼容性 Vue 不支持 IE8 及以下版本 ，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 目前 ECMAScript 6 已经渐渐流行起来，但是有一些浏览器还不完全支持，所以在使用 ECMAScript 6 时，可以通过 Babel转码器 进行转换 2）使用方式 （1） 直接用 <script> 引入 直接在 html 页面中引入 <script> ， Vue 会被注册为一个全局变量。 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 这个适合单独的 H5 页面的使用 （2）命令行工具 vue-cli 适合构建大型应用，配合 npm ， npm 能很好的和 webpack 等模块打包器配合使用。 # 全局安装vue最新版 $ npm install vue 2. 环境搭建 1）安装 node.js 傻瓜式安装，官网下载 node.js ，一路点击 下一步 安装。 打开 命令行工具 ，输入 node -v ，如果显示 node 版本号 ，则表示安装成功。 **注意：**官网安装的 node.js 后，就已经自带 包管理工具npm 2