Vue.js学习总结——1

vue.js 学习笔记3——TypeScript

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

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学习笔记：在元素和 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学习之如何在手机上查看vue-cli构建的项目

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

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学习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学习（第一课）

学习资料来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : el:元素名字 data放数据: 2.双向绑定: 用到一个指令 v-model : 指定到一个数据上,这个数据与页面显示就双向绑定了. 这里写错了 ,不能加等号!!! 这样P标签就可以随这个input的改变而改变. 3.列表渲染 v-for 循环数据读取数据渲染到标签: v-for=" x…

Vue.js学习 Item4 -- 数据双向绑定

Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值文本数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理单次插值,今后的数据…

Vue.js 学习示例

本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例:快到年底了争取和大家多分享点东西,希望能对各位有所帮助:本章内容希望大家喜欢,也希望各位多多扫码支持和推荐谢谢: » Vuejs - 学习大杂烩 » WebApi + Vue.js 示例下面一步一个脚印的来分享: » Vuejs - 学习大杂烩首先,咋们要学习一个js框架,那么肯定要引入该框架的基础库,这里我创建一个页面并且引用官网的库是: <script src="https://unpkg.com/vue/dis…

Vue.js学习与理解

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单.在使用 jQuery 手工操作 DOM…

Vue.js 学习笔记一

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

Vue.js学习 — 微信公众号菜单编辑器(一)

学习里一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&…

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系列一简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染二优势 1 vue则是通过Vue对象将数据和View完全分离开来了.对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定.这就是传说中的MVVM. 2 我们可以理解成VU…

Vue.js学习笔记（一） - 起步

本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1非常相似,如果有Angular 1相关的使用经验,上手会非常快. 相比较其他的React.Angular 2等MVVM框架,它更加的轻量,效率也更高,也能更好的与其他库集成. 它拥有以下几个出色的特性: 数据双向绑定指令模板组件当前最新的版本为2.1.4.后续也会在这个版本下演示Demo.…

偏前端-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配…