vue | 易学教程

vue中的路由配置（逆战班）

阅读更多关于 vue中的路由配置（逆战班）

一.首先安装Vue CLI后，在脚手架文件夹view或components下创建组件，接着在router文件夹的index.js中进行配置 1.import ‘自定义组件名’ from ‘组件路径’，引入组件比如 import maps from '@/views/maps.vue'（@代表src根目录） 2.然后为每个组件指定路径,如果有二级路由，在childern里继续配置 import maps from '@/views/maps.vue' import section from '@/views/section.vue' import finance from '@/views/finance.vue' Vue . use ( VueRouter ) const routes = [ { path : '/maps' , component : maps , children : [ { path : '/maps/section' , component : section } ] } , path : '/finance' , component : finance , ] 3，要切记的是，二级路由配置完后，要在maps组件里为section组件留个路由容器 < router - view > < / router - view > 二、声明式路由和编程式路由跳转

vue项目如何监听窗口变化

阅读更多关于 vue项目如何监听窗口变化

获取窗口宽度：document.body.clientWidth 监听窗口变化：window.onresize 同时回顾一下JS里这些方法：网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 将document.body.clientWidth赋值给data中自定义的变量： data ( ) { return { screenWidth : document . body . clientWidth , } } , 在页面mounted时，挂载window.onresize方法： mounted ( ) { const that = this window . onresize = ( ) => { return ( ( ) => { window . screenWidth = document . body . clientWidth that . screenWidth = window . screenWidth console . log ( that . screenWidth ) if ( that .

VUE系列之李南江写VUE源码

阅读更多关于 VUE系列之李南江写VUE源码

一 VUE响应式原理第一部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-Vue基本模板</title>  <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"> <p>{{ name }}</p> </div> <script> // 2.创建一个Vue的实例对象 let vue = new Vue({ // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域 el: '#app', // 4.告诉Vue的实例对象, 被控制区域的数据是什么 data: { name: "李南江" } }); /* 1.Vue响应式的原理(数据改变界面就会改变)是什么? 时时监听数据变化, 一旦数据发生变化就更新界面 2.Vue是如何实现时时监听数据变化的? 通过原生JS的defineProperty方法 3.defineProperty方法的特点可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象 4.defineProperty用法 obj: 需要操作的对象 prop:

新建一个vue cli项目

阅读更多关于新建一个vue cli项目

- 一、新建一个vue cli项目 1、用webStorm或者phpstorm直接新建一个vue.js项目，步骤如下：（1）打开软件，点击 NEW PROJECT （2）输入你的工程名，然后点击CREAT （3）配置NPM，点击这个图标 - 二、用cmd命令新建一个项目 1、打开运行，cmd工具 2、打开npm服务 (1)搭建VUE CLI环境,输入 npm install -g @vue-cli 等待配置完成（2）验证是否VUE安装成功，输入 vue -V 查看当前vue版本 3、新建一个vue项目，输入 vue create demo1 demo1就是你的项目名，然后会提示你选择哪种项目模式,再按enter键，直接进入项目构建 4、运行你的项目（1）打开你的vue项目，输入 cd demo1 demo1就是你的项目名，然后输入 npm run serve 运行你的项目 4、在浏览器中输入 http://localhost:8080/ 查看是否成功，如果成功显示页面，那么vue-Cli的第一个项目你已经成功搭建！来源： CSDN 作者： Mr.Hu. 链接： https://blog.csdn.net/sinat_39049092/article/details/104575074

常用vue组件通信方式详解（props、emit、eventbus、vuex）-逆战班

阅读更多关于常用vue组件通信方式详解（props、emit、eventbus、vuex）-逆战班

常用vue组件通信方式详解相信对于很多初学者来说，学习vue中最麻烦的地方就是处理组件间的通信了，组件间通讯的方法有很多种，有 children 、 parent 、依赖注入、 href 、语法糖v-model甚至可以通过 cookie 、 localStorage 等方法，这里就不做讲解，接下来就详解几个最常用的vue中的组件通信方式父传子：props < div id = "box" > < my - child : passdata = "data" > < / my - child > < -- data为父组件中的数据 -- > < / div > //my-child组件中 props : [ "passdata" ] 在父组件中通过向子组件添加自定义属性，属性值为父组件中的变量，在子组件中通过==props:[“自定义的属性名”]==来获取父组件中传递过来的数据data 子传父:$emit < div id = "box" > < my - child @event = "handleEvent" > < / my - child > < -- handleEvent为父组件中的事件不推荐写参数会变得多此一举 -- > < / div > //子组件中 < button @click = "passdata()" > 点击 < / button >

vue----打包上线引用外部cdn

阅读更多关于 vue----打包上线引用外部cdn

一般vue,vue-router,axios等其他库可以使用外部cdn 在webpack.base.conf.js里面 externals:{ 'vue':'Vue', 'vue-router':'VueRouter', 'axios':'axios' }, 然后在index.html页面加上外部资源 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script> 提示!!! 如果项目是已经启动了，需要重新启动，要不然会找不到VueRouter！！！ npm run dev 来源： https://www.cnblogs.com/cyany/p/12388515.html

vue js报Uncaught SyntaxError: Unexpected token 错误

阅读更多关于 vue js报Uncaught SyntaxError: Unexpected token 错误

原文链接: https://dsx2016.com/?p=980 微信公众号:大师兄2016 直接上图 vue 本地调试没有问题打包上线后,线上的某个页面打开空白,报以下错误 Uncaught SyntaxError: Unexpected token < 排查定位代码检查代码检查,一般 Unexpected token < 的错误,字面上的意识就是代码中可能有多余的<的符号,造成js阻塞其次可能是合并冲突,导致未解决冲突的代码被提交了 <<< 之类的语法检查本地没有问题,打包到线上有问题,可能是 webpack 编译过程中 ES6 某些语法没有转为 ES5 也可以引起类似的报错,如箭头函数等 let age = 0 setInterval(() => { age++; }, 1000); 文档类型前端的表现不一定是前端的问题,也可能是服务端的问题,如设置跨域, nginx404 配置等点击控制台错误的代码提示,查看 network 对应的文件加载状态可以看到报错的文件内容,这里注意了,一旦 js 打开为 doctype html ,那么很大概率是 nginx 把 js 文件当做 html 文件响应的,于是解析错误这个时候记得查看该文档的响应信息正常情况返回 content-type: application/javascript 错误的情况下, js

Vue的小小注意点

阅读更多关于 Vue的小小注意点

Vue.use的本质调入被导入插件install的方法,有这个插件,就代表肯定会有一个install方法组件data为什么必须是一个函数因为组件是要实现页面复用,保证多个页面组件显示不同的数据,不能我在A地方用了,B也改变; 如果data是一个对象,组件在多个地方用的数据都是同一个对象,那么A数据变了也会影响B数据,这就没法实现复用所以data是一个函数,在函数返回一个对象,那么组件被用几次都会产生一个新的独立的对象,那么就会互不影响写组件时有些要设置全局组件: axios设置全局可用 Vue.prototype.$axios=axios axios设置基地址 axios.default.baseURL="基地址" 组件name的属性直接在组件的内部写name:值,便于在插件中检索来源： CSDN 作者： qq_40612627 链接： https://blog.csdn.net/qq_40612627/article/details/104573952

vue Enter键盘事件

阅读更多关于 vue Enter键盘事件

1 原生input使用键盘事件 <input @keyup.enter="onLogin"> 2 Element-ui （el-input）使用键盘事件 <el-input v-model="form.password" type="password" placeholder="密码" autocomplete="off" @keyup.enter.native="onLogin"></el-input> 来源： CSDN 作者：卜卦丶cc 链接： https://blog.csdn.net/qq_37896578/article/details/104582672

windows安装npm教程

阅读更多关于 windows安装npm教程

windows安装npm教程 1、在使用之前，先类掌握3个东西，明白它们是用来干什么的： npm: nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。 2、nodejs下载网址： https://nodejs.org/en/ 【如果嫌下载的慢，可以下载其他网站上的，别人有现成的，下载的比较快】 3、下载好后，双击安装： 4、默认，下一步： 5、接受协议： 6、选择安装路径： 7、会默认自己添加环境变量： 8、接下去一路“next”，最后点击finish 9、安装好后，对应的各个文件的作用： 10、cmd打开终端： 11、检查是否正常 12、再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录： 13、然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:

订阅 vue