Vue
vue全家桶
金小壮
仰望星空,脚踏实地
展开
-
Vuex
1. Vuex 概述1.1 组件之间共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 时间绑定兄弟组件之间共享数据:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件1.2 Vuex是什么Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。2. Vuex 的基本使用按装 vuex 依赖包npm install vuex --save导入 vuex 包import Vuex from 'vuex原创 2020-12-22 18:49:27 · 103 阅读 · 0 评论 -
vue全家桶项目优化上线
1. 项目优化1.1 项目优化策略A.生成打包报告,根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制1.1.1 生成打包报告打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:通过命令行参数的形式生成报告通过 vue-cli 的命令选项可以生成打包报告--report 选项可以生成 report.html 以帮助分析包内容vue-cli-service build --report通过可视原创 2020-12-20 22:18:19 · 155 阅读 · 0 评论 -
echarts出现 “TypeError: Cannot read property ‘init‘ of undefined“报错解决
导入echarts时用:import echarts from 'echarts' 出现 “Cannot read property ‘init’ of undefined” 报错,改成 import * as echarts from 'echarts' 后解决。原创 2020-12-18 23:44:31 · 7822 阅读 · 17 评论 -
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘报错原因
配置 webpack 自动打包功能后,执行命令 npm run dev 出现以下报错:出现此问题的原因是安装的 webpack-dev-server 与 webpack-cli 的版本问题,下面是 package.json 中的版本信息我们看到 webpack-cli 的版本是 4.2.0,而 webpack-cli 从4.x.x开始就没有该目录,所以我们保证webpack-cli 和 webpack-dev-server 的版本只要都是 3.x.x 就可以解决了具体步骤:使用 npm.原创 2020-11-27 16:05:50 · 606 阅读 · 0 评论 -
Vue--前端交互 axios
1. axios 的基本特性axios是基于Promise用于浏览器和node.js的HTTP客户端特征:支持浏览器和node.js支持 promise能拦截请求和响应自动转换JSON数据2. axios 的基本用法 axios.get('/adata').then(ret=>{ console.log(ret.data) //data属性固定,用于获取后台响应数据 })3. axios的参数传递1.get通过restful传递参数也可以通原创 2020-11-26 19:22:38 · 2391 阅读 · 4 评论 -
Vue--前端交互 fetchAPI
1. fetch基本使用fetch 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多fetch默认是get请求//基本用法 fetch('http://localhost:3000/data') .then(function (data) { //text() 方法属于fetchAPI的一部分,他返回一个Promise实例对象,用于获取后台返回的数据 ret原创 2020-11-26 18:58:31 · 661 阅读 · 1 评论 -
Vue--组件化开发
1. 组件注册1.全局组件注册语法 //Vue.component(组件名称,{ //data:组件数据(函数), //template:组件模板内容 //}) //------------------------------ Vue.component('button-counter', { data: function () { return {原创 2020-11-25 11:39:30 · 129 阅读 · 0 评论 -
Vue基础--常用特性
常用特性与表单操作1. 表单操作1. 基于Vue的表单操作常见的表单元素:input 单行文本,textarea 多行文本,select 下拉多选,radio 单选框,checkbox 多选框单选框实现单选1、 两个单选框需要同时通过v-model 双向绑定 一个值2、 每一个单选框必须要有value属性 且value 值不能一样3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据复选框实现复选1、 复选框需要原创 2020-11-24 17:57:52 · 163 阅读 · 2 评论 -
Vue基础-本地应用
1. 内容绑定,事件绑定v-text:设置标签的文本值(textContent)默认写法会替换全部内容,使用差值表达式{{}} 可以替换指定内容内部支持写表达式v-html:设置标签的innerHTML内容中有HTML会被解析成标签 (存在安全问题)v-pre :填充原始信息显示原始信息 跳过编译过程v-on基础:为元素绑定事件v-on:click="doit" || @dblclick="doit"绑定的方法定义在methods属性中方法内部通过this关键字可以原创 2020-11-23 20:51:12 · 112 阅读 · 1 评论