随笔分类 - Vue
摘要：keep-alive保持活跃，这个如何使用？先看一些例子 一、在组件中使用生命周期回调函数 created(),destoryed(*),activated(),deactivated() 分别是创建，销毁，活跃，不活跃。 Home.vue中定义这4个函数 1 <template> 2 <div>
阅读全文
摘要：全局导航守卫：解释不清 需求：希望点击每个菜单是，网页的title显示菜单名称。 2种方式实现 方式1：每个组件通过回调生命周期函数时，来创建一个title元素 Home.vue,About.vue 1 <template> 2 <div> 3 <h2>我是首页</h2> 4 <router-lin
阅读全文
摘要：之前使用的parameters的方式传递参数，现在介绍另一个传递阐述的方式，query. 一、通过router-link使用query传递 1、创建Profile.vue组件 2、路由器定义了Profile组件的路由 3、在App.vue中使用<router-link>标签引用profile，但是引
阅读全文
摘要：以下是嵌套路由设置方法 一、创建嵌套组件 比如Home下有1个新闻列表和一个消息列表。分别创建新闻组件和消息组件，这2个组件和Home组件不是父子组件关系 HomeNews.vue 1 <template> 2 <div> 3 <ul> 4 <li>新闻1</li> 5 <li>新闻2</li> 6
阅读全文
摘要：一、vuecli 2 打包 npm run build进行打包，打包完成后检查dist下的包 dist/static/css dist/static/js 原因，原来的webpack打包始终只有一个文件，会导致文件过大，而这里vue cli2对包进行了分包，可以方便客户端浏览器加载。 分析下包： c
阅读全文
摘要：一、动态路由： 需求：希望页面点击不同用户名称链接（父组件），进入不同用户详情的Url（路由），且在用户详情页显示不同的详情信息（子组件） 逻辑：父组件的用户名称userName（数据源）-->将名称传给父组件的router-link(<router-link :to="‘/user/+userNa
阅读全文
摘要：1.可以通过代码的方式结合router-view来实现跳转 1 <template> 2 <div> 3 <!-- <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>--> 4
阅读全文
摘要：1.创建vue init webpack vuerouter项目 2.不使用vue-router创建。 3.npm install vue-router --save 单独安装 4.创建/router/index.js文件 1 import VueRouter from 'vue-router' 2
阅读全文
摘要：一、控制台的几个命令 1.刷新页面 console控制台设置： location.href = 'aaaa' 此时页面会重新请求页面数据 2.不刷新页面 console控制台设置： location.hash= ‘aaa’ 通过哈希的方式改变，前端不会重新请求前端数据。 3.不刷新页面2 conso
阅读全文
摘要：一、路由 路由作用：A在公网IP1给公网IP2的B发送一条信息msg1，到了公网IP2后，msg1信息会进入公网IP2的内部路由器，再有路由器参照路由内部IP与B所在的电脑mac地址分配信息给B。因此，路由的核心是内部有一个内网IP与电脑MAC的对应关系映射表。 二、前端渲染，后端渲染 阶段一：后端
阅读全文
摘要：用vue cli2 新建2个项目，一个使用runtime-compiler,一个使用runtime-only，创建时选项： 创建后的项目对比main.js文件之间的区别： runtime-compiler方式生成的文件main.js中有模板和注册组件。 runtime-only方式生成的文件main
阅读全文
摘要：1.vue cli全局安装： 1.1 安装 npm install -g @vue/cli 1.2 拉脚手架2的版本（魔板）： npm install @vue/cli-init -g 备注:以上2步骤后脚手架2和脚手架3都可以用 1.3 创建Vue cli2初始化项目：vue init webpa
阅读全文
摘要：需求：目前webpack.config.js文件中即有开发环境的配置信息，又有测试环境的配置信息，比如：丑化插件希望生产环境配置，开发环境不希望配置，使用起来不太方便。 因此需要对webpack.config.js文件进行抽离。 安装插件：npm install webpack-merge@4.1.
阅读全文
摘要：webpack的插件使用。 一、配置版权 1.webpack.config.js中引用webpack, const webpack = require('webpack') 2.plugins中配置版权 new webpack.BannerPlugin('最终版权归invoker所有') 3.代码如
阅读全文
摘要：一、将Vue实例内的template,data,methods抽离到一个app对象中 main.js代码如下： import Vue from 'vue'; new Vue({ el:'#app', template:` <div> <h2>{{message}}</h2> <button @cli
阅读全文
摘要：真实项目都是使用的SPA，单页面复用 index.html文件内若需要展示内容，修改内容，需要经常修改index.html文件，这个不合理。因此将里面内容抽取到main.js中 index.html抽取的内容如下： 1.将index.html中的模板内容剪切到main.js中 2.原理，vue读取m
阅读全文
摘要：webpack想要打包vue，就需要安装vue 一、安装vue npm install vue --save 安装到本地node中，node_modules/vue 2.在main.js中引用vue 3.build： npm run build 4.浏览器查看Html文件，有报错 这个报错是因为使用
阅读全文
摘要：常见模块化规范：CommonJS,AMD,CMD,ES6的Modules,现在一般用到CommonJS和ES6的modules. 由于后续学习的webpack使用到了CommonJS.此处需要了解以下。 一、CommonJS模块化 CommonJS导出的语法： var flag = true fun
阅读全文
摘要：一、什么是编译作用域 官方准则：父组件模板的所有内容都会在父级作用域内编辑，子组件模板所有内容会在子级作用域内编译。 举个例子,在父组件Vue实例内定义一个变量 isShow=true，在子组件内也定义一个变量isShow=false，现在在父组件模板内的子组件中使用使用isShow，那么现在用的是
阅读全文
摘要：一、插槽的基本使用 场景：在实际项目中，很多页面有相似的模块（组件）架构,比如APP导航栏。 导航组件1： 导航组件2： 导航组件3： 以上三个页面共性部分就是左中右三个标签，左侧标签相同都是跳转连接，中间2个是title，1个是tab切换bar，右侧2个是跳转页面连接，1个为空。 对于这样的场景开
阅读全文
浙公网安备 33010602011771号