vue文档、视频、电子书、源码

由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察length来判断。 为什么Vue不能观察到数组length的变化 如下代码，虽然看起来数组的length是10，但是for in的时候只能遍历出0, 1, 2，导致了只有前三个索引被加上了getter 和setter var a = [0, 1, 2]a.length = 10// 只是显示的给length赋值，索引3-9的对应的value也会赋值undefined// 但是索引3-9的key都是没有值的// 我们可以用for-in打印，只会打印0,1,2for (var key in a) { console.log(key) // 0,1,2} 那么vue提供了一些解决方法 使用内置的Vue.$set 让数组显式的进行某个索引的观察 Vue.set(array, indexOfItem, newV……

前言 Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。 初始化项目 首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。 # vue init webpack vue-typescript? Project name vue-typescript? Project description A Vue.js project? Author? Vue build standalone? Install vue-router? No? Use ESLint to lint your code? No? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No 安装TypeScript相关依赖和项目其余依赖，用npm或cnpm # cd /vue-typescript# npm install typescript ts-loader --save-dev# npm install 配置 修改目录下bulid/webpack.base.conf.js文件，在文件内modulerules添加以下规则 { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { append……

VUEJS学习网址：https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得。 关注点： 父子组件之间的通信 看图说话： Pass Props 子组件本身与父组件是孤立的，通过子组件中显示声明的props属性，接收父组件数据; 父组件的数据更新时，子组件的prop会跟着更新； 此数据流动是单向的（看着）; Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听？如果父组件需要监听，使用v-on绑定监听，触发对应事件; 以上为通用语，具体分析 子组件可以接收一个字符串，在子组件内部可以用{{label}}使用 v-input label="姓名"/v-input 子组件可以接收动态参数 input v-model="msg" /v-profile :message="msg"/v-profile 子组件接收到数据之后想处理一下不小心改了怎么办？ 给prop创建一个副本（建议深拷贝），处理副本，不动prop; 父组件的数据改变后，子组件的prop会自……

TypeScript TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份，微软发布了首个公开版本的TypeScript，在2013年6月19日，微软发布了TypeScript 0.9的正式版本，到目前为止，TypeScript已发展到2.x版本 安装TypeScript 安装TypeScript主要有两种方式： 通过npm方式安装（Node.js包管理器） 安装TypeScript的Visual Studio插件 说明：Visual Studio2016和Visual Studio 2013 Update 2默认包含了TypeScript。npm安装的命令如下： npm install -g typescript 创建TypeScript文件 在编辑器中新建一个greeter.ts文件，并输入以下JavaScript代码： function greeter(person) { return "Hello, " + person;}var user = "Jane User";document.body.innerHTML = greeter(user); 上面的代码直接输出“hello Jane User”。 编译代码 在在命令行中运行TypeScrip……

首先安装 nodemon ，如果是全局安装，那么所有的项目都可以使用mock服务 npm install nodemon 再安装 express-mockjs npm i -D express-mockjs 接下来按照以下的步骤来 第一步 在项目根目录下建立api-interface文件，再建立一个文件夹叫mocks,这里面放json或者js都可以，然后再在mocks同级目录下建立app.js文件 第二步编写app.js 第三部 在mocks文件中编写一个叫test的json文件，文件中代码如下 然后写入 /** * 测试接口 * * @url /test-demo * * 详细的说明 * uid: userID * name: username * email: 邮件 */{ "code": 0, "result|5": [ { "uid|+1": 1, "name": "@name", "email": "@email" } ]} 第四步 启动 app.js 脚本如下 node api-interface/app.js 点击点击，链接如图 mock服务效果图，如图： 第四部，再新建一个js文件，文件名称是user,文件代码如下 /** * 用户页面 - 用户信息接口 * * @url user?uid=233 * */module.exports = function (req) { var uid = req.……

因为项目需要，vue开发项目，必须将已写的以px为单位的部分，转换为rem。要是全部转换，这大量的计算量，哪怕是sublime Text 的cssrem插件，也是一个庞大的工作量。所以，直接使用插件没商量。 第一步：因为rem是根据更元素来计算大小，所以，捕捉到当前屏幕的大小并赋值给html，这是其一 第二步：使用px2rem插件，来捕捉当前项目的所有px，直接计算相对应数值。 这样，以后写界面，就可以直接用px来构建界面，不用自己去计算啦！ 1、安装插件(我是安装了淘宝镜像，所以是cnpm,若是没装淘宝镜像，就npm) $ cnpm i postcss-px2rem --save$ cnpm install px2rem-loader --save 2、配置px2rem build目录下vue-loader.conf.js中，做如下修改： module.exports = {loaders: utils.cssLoaders({sourceMap: isProduction? config.build.productionSourceMap: config.dev.cssSourceMap,extract: isProduction}),transformToRequire: {video: 'src',so……