浏览目录 let const let es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效 for循环相信大家都玩过.下面这种现象扭曲了我们块级作用域的思想!如果将var改成let就可以了! 再看一个例子: var a = []; for (v…

init 首先要起一个项目,推荐用vue-cli安装 $ npm install -g vue-cli $ vue init webpack demo $ cd demo $ npm install demo 是这个示例项目的名字 现在看到目录结构如下 下面来稍微介绍下 build 目录是一些webpack的文件,配置参数什么的,一般不用动 src 源码文件夹,基本上文件都应该放在这里. static 生成好的文件会放在这个目录下. test 测试文件夹,测试都写在这里 .babelrc bab…

这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以及它的用途. 系列文章: 渲染, 指令, 事件 组件, Props, Slots Vue-cli Vuex (You are here!) Animations Vuex 如果你错过了关于组件及 Vue-cli 的部分,在阅读本篇文章之前应该先读读这几部分.现在我们已经了解了关于组件.传递状态和 p…

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题 首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'…

初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-directive.html#简介 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中. inserted: function (el) { // 聚焦元素 el.focus() } }) 使用 <input v-focus>…

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天哪...),于是就琢磨着把vue简单的过下,如下所讲只是个人一些理解,不到的地方还望园友指正,涉及到的东西有vue.vue-router.vuex.axios以及nodejs一些后台东西,废话不说了直接上菜吧. 一.vue.js 1.项目搭建使用vue-cli脚手架,首先必须安装vue.vue-cl…

Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios MINGW64使用简介: 在运行项目的目录下开启,其中,ctrl+c是退出,clear是清除. NPM使用技巧: 国内网络访问npm的速度是比较慢的,所以我们可以采用淘宝开发的cnpm代替. 方便调试查看工具: 谷歌浏览器的vue插件. Vue模块介绍: vuex: 管理核心数据 vue-rout…

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue开源插件,而这些插件大都来自第三方开发者们,是他们为vue社区提供了大量的技术支持和解决方案.本文立足vue开源的理念,主要为vue开发者讲解编写vue插件的方法和步骤,通过理论与实践相结合的方式来加深大家对vue插件编写的认识. vue插件介绍 1. 插件与组件 在讲解插件之前,我们首先来了解下v…

什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就是集中管理所有的状态. 为什么要用vuex? 对于父子组件之前的通信,父组件通过porps传递到子组件,子组件通过$emit发送事件都到父组件; 对于组件与组件之间的通信,可以new一个新的Vue实例,专门用来做event bus进行通信. 当多个组件之间共享一个状态时,event bus可能就变成…

开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新…

系列教程<一步步带你做vue后台管理框架>第二课 github地址:vue-framework-wz 线上体验地址:立即体验 闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简单方便之后你就会爱上这个框架欲罢不能的. 首先跟所有的vue项目一样,两种方式,一种去项目github地址:vue-framework-wz上下载代码包到本地,或者使用 git clone https://github.com/herozhou/vue-framework-wz.git 无论哪种方式,只要我们…

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1.在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2.准备本地的翻译信息 const messages = { zh: { message:…

继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及 官方文档:https://parceljs.org/getting_started.html 官方 GitHub:https://github.com/parcel-bundler/parcel 一.基本用法 Parcel 可…

首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 我的理解是 就是vue组件之间的数据管理 event bus 对…

首先AST是什么? 在计算机科学中,抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码. 我们可以理解为:把 template(模板)解析成一个对象,该对象是包含这个模板所以信息的一种数据,而这种数据浏览器是不支持的,为Vue后面的处理template提供基础数据. 这里我模拟Vue去实现把template解析成ast,代码已经分享到 https://github.com/z…

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1.require.ensure()实现按需加载…

问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use(axios),就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件,看完之后就明白了. 定义组件 生成模版 vue init webpack-simple custom-gl…

一.mixins的理解     vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?      组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立.      而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当…

vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ..., store, ..., }); src/store/index.js import mutations from "./mutations"; const initStore = { state: { userBasicInfo: {}, siteBaseInfo: { dow…

1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Router支持3种路由模式: ◊ hash:使用URL hash值作为路由 ◊ history:依赖HTML5 History API和服务器配置 ◊ abstract:支持所有JavaScript运行环境,如node服务器端.如果发现没有浏览器的API,路由就会强制进入该模式. vue-router提供…

1. 组件简介 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件:为了拆分Vue实例的代码量,以不同的组件来划分不同的功能模块,需要什么样的功能,可以去调用对应的组件. 模块化和组件化的区别: ◊ 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一. ◊ 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用. 2. 注册组件 Vue.js提供两种组件注册方式:全局注册和局部注册.…

目录 第一章.环境搭建 第二章.目录结构 第三章.Vue调试 第四章.定义页面 附录资料 第一章.环境搭建 1.1.准备: npm: 6.9.0 (npm > 3.0) node: v10.15.3 (node > 6.11.5) vue: 2.0+ 1.2.nodejs安装 window系统可以直接去官网下载:https://nodejs.org/en/ 1.3.npm安装 查看npm版本 npm -v 升级npm cnpm install npm -g 升级或安装cnpm npm inst…

最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可. <script src="../xxx.js"></script> Vue 我们也可以这种引入的方式 <div id="root">{{name}}</div><script src="./dist/vue.js"></script><script>    co…

一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router需要相应的js文件,可到官网下载或者使用CDN: https://unpkg.com/vue-router/dist/vue-router.js使用Vue需要引入相应的JS文件,可到官网下载或者直接使用CDN:https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/…

1.搭建vue的开发环境: 1.必须要安装node.js 2.安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli 3.新建项目 vue init webpack-simple gw 然后一直回车,新建完成后,cd到gw目录下,执行 cnpm install 4.运行项目 npm run dev 运行成功后,可以通过访问 http://localhost:8080/ 2.vue路由 vue路由的意思就是不用手动挂载组件,实现动态挂载的方式 1.基础路由…

根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { config.resolve.alias .set('components', resolve('src/components')) } } 引入时只需写绝对路径 import Header f…

web Components 学习之路 https://www.cnblogs.com/zhaowinter/p/5447246.html vue学习指路. vue全局配置. ignoredElements  至今看不懂: https://blog.csdn.net/sinat_17775997/article/details/75950356 directive   https://blog.csdn.net/qq_36242361/article/details/74641403 指令定义函…

定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSrc='www.baidu.com'; const token='; const hasEnter=false; const userSite="中国钓鱼…

vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1  123456  test2  123456  test3  123456 默认登录test1 用vuex统一管理聊天对象.聊天信息等 点击相应的对象,发送文本 1. 引入环信依赖 2. vuex 环信前期准备全局状态控制 import {dotData} from '@/utils'import Vue from 'vue'// im聊天状态const IM_CHART_D…

组件化 1.定义全局组件 1.要在父实例中使用某个组件,组件必须在实例值之前定义2.组件其实也是一个Vue实例,因此它在定义时也会接收:data.methond.生命周期函数等3.不同的组件不会与页面的元素绑定,否则就无法复用了因此也没有el属性4.组件渲染需要html模板,所以增加了template属性,值就是HTML模板,模板的内容必须由html双标记包裹5.全局组件定义完毕,任何vue实例都可以直接在html中通过组件名称来使用组件了6.data定义方式比较特殊,必须是一个函数 <!DOC…