用vue.js学习es6（一）：基本工具及配置

【用vue.js学习es6（一）：基本工具及配置】的更多相关文章

用vue.js学习es6（一）：基本工具及配置

一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(sublime 3): import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urlli…

用vue.js学习es6（二）：let和const使用

一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. 二.let和const使用方法: (1).在javascript中我们通常使用var会发生变量提升,即脚本开始运行时,变量已经存在了,但是没有值,所以会输出undefined, 而let不会发生变量提升,这表示在声明它之前,变量是不存在的,这时如果用到它,就会抛出一个错误. (2).var 是函数…

用vue.js学习es6（六）：Iterator和for...of循环

一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iterator的作用有三个: 一是为各种数据结构,提供一个统一的.简便的访问接口: 二是使得数据结构的成员能够按某种次序排列: 三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费. 1.在ES6中,有三类数据…

用vue.js学习es6（五）：set和map的使用

一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); //Set {1, 2, 3} console.log(data); (2).添加: add data.add(4); //Set {1, 2, 3, 4} console.log(data); //Set不会重复添加成员 data.add(4); //Set {1, 2, 3, 4} consol…

用vue.js学习es6（四）：Symbol类型

一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolean).字符串(String).数值(Number).对象(Object). let s = Symbol(); typeof s; //"symbol" 2.Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分.…

用vue.js学习es6（三）：数组、对象和函数的解构

一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b,c] = [1,2,3]; console.log(a); //1 console.log(b); //2 数组解构还有以下几种: (1). var [a,[b,c]] = [1,[2,3]]; //1 console.log(a); //2 console.log(b); //3 console…

vue.js 学习笔记3——TypeScript

目录 vue.js 学习笔记3--TypeScript 工具基础类型数组元组枚举字面量接口类类型类类型要素函数函数参数 this对象和类型重载迭代器 Symbol.iterator 声明.解构.展开.类型断言泛型泛型约束交叉类型.联合类型索引类型映射类型类型兼容类型保护.推断模块和命名空间装饰器类装饰器: 函数装饰器: 属性装饰器: 参数装饰器: vue.js 学习笔记3--TypeScript 工具 npm install -g typescript…

Vue.js学习笔记（2）vue-router

vue中vue-router的使用:…

vue.js学习资料

vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用vue.js搭建APP https://sally-xiao.gitbooks.io/book/content/vuejszu_jian.html(1/2)Vue构建单页应用最佳实战 http://div.io/topic/1701…

vue.js学习之如何在手机上查看vue-cli构建的项目

vue.js学习之如何在手机上查看vue-cli构建的项目一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目二:输入ip和端口号打开项目三:将地址复制,使用二维码转换工具(草料二维码)生成二维码后,使用手机扫描,就可以查看了. 注意:扫描后浏览器会有一个提示信息,点击访问原网页就行了后续更新: 2017/12/20更新,新版vue-cli,部分手机浏览器访问白屏: 将config/index.js 的devtool: 'eval…

Vue.js学习笔记：在元素和 template 中使用 v-if 指令

f 指令语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.…

vue.js学习之better-scroll封装的轮播图初始化失败

vue.js学习之better-scroll封装的轮播图初始化失败问题一:slider组件初始化失败原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载解决方法: 在slider组件中监听页面传过来的图片数据,如果图片更新了,再次出发页面slider的初始化 1:首先在slider.vue的prop中注册一个变量 imgData: { type: Array, default: null } 2:监听 watch: { imgData() { setTi…

vue.js学习之跨域请求代理与axios传参

vue.js学习之跨域请求代理与axios传参一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用‘/ap…

vue.js学习之打包为生产环境后，页面为白色

vue.js学习之打包为生产环境后,页面为白色一:配置问题当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.js 2:在build对象找到assetsPublicPath,值改为‘./’ 二:页面高度问题在低版本的ios手机上,页面也是白屏,这个时候应该是html,body都没有设置高度,我们在页面加上如下代码就行: html, body { width: 100%; height: 100%; margin:…

vue.js学习总结

下面使用的命令工具为git bash 使用命令行工具搭建vue.js项目 vue.js官网命令行工具安装为了提升安装速度,建议将 npm 的注册表源设置为国内的镜像 1.输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org,后续将使用cnpm代替npm进行安装 2.输入命令:cnpm -v,查看当前cnpm的版本号 3.输入命令:cnpm install -g vue-cli,给全局安装vue-cli,这样才能使…

Vue.js学习-组件注册与使用

Vue.js学习文档地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 HTML: <p> 看不到自己注册的组件todo-item: <todo-item></todo-item> </p> <p>上面,注册组件失败, 因为:使用这个组件的p元素Vue并不认识. 其实只要Vue中el通过id找到p就可以,能被识别下面的成…

vue.js学习记录

vue.js学习记录文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例生命周期 beforeCreate:不能访问this.$el和this.$data用于初始化非响应式变量created:可以访问this.$data,不能访问到this.$el属性,this.$refs内容,用于ajax请求,created里赋值,data不用定义beforeMount:this.$el和this.$data都初始化了,挂载前thi…

Vue.js 学习笔记之四：Vue 组件基础

到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时候,我们就需要开始注意代码的可复用性了,针对这个问题,Vue.js 框架提出的解决方案就是先将用户界面上的元素按照不同的功能划分成一个个独立的组件,例如导航栏.公告栏.数据表格.用户注册表单.用户登录界面等.这样一来,我们在之后的工作中就可以像玩乐高玩具一样,根据需要将这些组件组合成各种具体的应用程…

Vue.js 学习笔记之五：编译 vue 组件

正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器,这样做可能会导致某些用户无法使用应用程序.其次,即使将来所有的 Web 浏览器都完全支持了 ES6 标准规范,直接在 JavaScript 原生的字符串对象中编写 HTML 模版的做法也会让我们的编程工具无法对其进行高亮显示与语法检查,这不仅会让编程体验大打折扣,也会增加编码的出错概率.为了解决这个…

Vue.js 学习笔记一

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知识都是基于vue.js 2.0版本一.简介 Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. 另一方面,当与单文件组件和…

Vue.js学习

<!DOCTYPE html> <html> <head> <title>xxx</title> </head> <body> <div id="app"> {{ message }} </div> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动…

Vue.js 学习笔记第2章数据绑定和第一个Vue应用

本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感受Vue.js最核心的功能: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport"…

Vue.js 学习笔记第1章初识Vue.js

本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.js,你也可以运用这些知识点快速构建出一个Vue.js应用. 1.1 Vue.js 是什么 Vue.js的官方文档中是这样介绍它的: 简单小巧的.渐进式JavaScript框架,是以应付任何规模的应用. 简单小巧是指Vue.js压缩后大小仅有20KB. 所谓渐进式(Progressive),就是你可以…

偏前端-vue.js学习之路初级（一）概念

首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://c…

vue.js学习笔记(一)——vue-cli项目的目录结构

vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用. vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. 总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build——[webpack配…

Vue.js 学习笔记第7章组件详解

本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件与复用 7.1.1 为什么使用组件在正式介绍组件前,我们先来看一个简单的场景,如图7-1所示: 图7-1中是一个…

Vue.js——学习笔记（一）

Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 总之一句话:有问题,查官网.本笔记只适合学习复习使用.如果学习话,请自行查阅Vue官网. 本笔记来源于:自学过程,参考Vue官方文档.--大娃基础安装…

Vue.js 学习

一,Vue.js 介绍 Vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动 Vue.js是用于构建交互式的Web界面的库,它提供MVVM数据绑定和一个可组合的组件系统,具有简单.灵活的API.从技术上讲,Vue.js集中在MVVM模式上的视图模型…

Vue.js——学习笔记

Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 总之一句话:有问题,查官网.本笔记只适合学习复习使用.如果学习话,请自行查阅Vue官网. 本笔记来源于:自学过程,参考Vue官方文档.--大娃基础安装…

Vue.js学习笔记（1）

数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时…