前端
文章平均质量分 66
有码无尘
web开发工程师
展开
-
VUE2 入坑指南07--vuex
vuex是什么Vuex 是一个专为vue.js应用程序开发的状态管理模式;说人话:公有数据放于公共区域,做数据共享,以便各个组件之前调用vuex使用npm i vuex -S在一个模块化的打包系统中,必须显式的通过 Vue.use() 来安装 Vuex;main.js:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) //注册vuex到vue中var store = new Vuex.Store({ state原创 2021-02-02 23:31:06 · 88 阅读 · 0 评论 -
VUE2 入坑指南06--路由
路由主要要通过url 中的 hash (#) ,来实现不同页面之间的切换,特点:http请求中不会包含hash相关的内容引入:npm install vue-routerimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)基本使用使用 cdn 导入 vue.js 和 vue-router.js 包导入后 window 全局对象中,就有 VueRouter 的路由构造函数,在n原创 2021-02-02 23:14:10 · 114 阅读 · 0 评论 -
VUE2 入坑指南05--组件
组件化和模块的区别组件: 就是为了拆分vue实例的代码量,以不同的组件,来划分不同的功能模块组件和模块化的不同:模块是从代码逻辑划分的,方便代码非常开发,保证每个功能模块职能单一组件是从 UI 界面划分的,方便 UI 组件的重用创建组件的方式一、Vue.extend 来创建全局的 Vue 组件 var com1 = Vue.extend({ template:'<h3>Vue.extend 创建的组件</h3>' })Vue.c原创 2021-02-02 23:13:07 · 76 阅读 · 0 评论 -
VUE2 入坑指南04--动画
动画使用 transition 元素,把需要被动画控制的元素,包裹起来v-enter 进入之前v-enter-to 进入之后v-enter-active 入场动画时间段v-leave 离开前v-leave-to 立候的终止状态,此时动画已经结束v-leave-active 离场动画时间段列表动画:实现列表过渡,若是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup ,且每项需要 :key=“ite原创 2021-02-02 23:11:48 · 129 阅读 · 0 评论 -
VUE2 入坑指南03--vue-resource
实现 get 、post、jsonp 请求this.$http.get(‘url’).then(function(result){ result.body //返回的数据});//手动发起的post请求,没有表单格式(application/x-www-form-urlencoded),有的服务器处理不了//emulateJSON:true 表示为表单格式this.$http.post(‘url’, {}, {emulateJSON:true}).then(function(result){原创 2021-02-02 23:10:33 · 82 阅读 · 0 评论 -
VUE2 入坑指南02--生命周期
vue实例的生命周期生命周期钩子 = 生命周期函数 = 生命周期事件组件创建阶段的生命周期函数beforeCreate(){} 第一个生命周期函数,实例被创建前会执行它,此时data和methods中的数据还没初始化created(){} 第二个生命周期函数,此时 data 和methods数据刚刚初始化,可调用beforeMount(){} 第三个生命周期函数,编译模板之后,挂载渲染之前,执行到它,此时页面中的元素数据还未被vue替换mounted(){} 第四个生命周期函数,原创 2021-02-02 23:09:17 · 295 阅读 · 0 评论 -
VUE2 入坑指南01--指令
vuemvvmapp.js 项目入口文件router.js 路由分发controller 业务处理model 数据的curd (create read update delete)m 页面中的数据vm中间调度者v 页面html结构vue 与mvvm的对应当导入包后,浏览器内存中就多了一个vue构造函数el: 绑定区域data:el 中要用到的数据v-cloak、v-text、v-htmlv-cloak :解决插值表达式闪烁的问题,F12 online调慢网速,原创 2021-02-02 23:06:01 · 158 阅读 · 0 评论 -
vue+webpack环境搭建精简篇
一、新建项目目录例如 vue_webpacknpm init -y创建 dist、src 文件夹;src 中创建 index.html、main.js项目目录 npm i webpack --save-dev 安装webpack项目目录 npm i webpack-dev-server -D 安装webpack-dev-server项目根目录新建 webpack.config.js//这个配置文件,就是一个 JS 文件,通过 Node 中的模块操作,向外暴露了一个配置对象const path原创 2021-01-21 16:15:12 · 163 阅读 · 1 评论 -
从零搭建vue2+webpack3项目-下
配置处理css样式的第三方loadersrc/css/下建立 index.css文件在main.js 导入index.css文件 : import './css/index.css'导入后保存报错,没有解析css文件的loader,解决:注意: webpack默认只能处理 JS 文件跟目录cmd: npm i style-loader css-loader -D //安装处理css的loader打开webpack.config.js 配置文件,新增一个配置节点为 module:plug原创 2021-01-20 21:14:09 · 187 阅读 · 1 评论 -
从零搭建vue2+webpack3项目-上
一、系统环境安装node,此处不再讲解;nrm 的使用作用:提供了一些常用的 NPM 包镜像地址运行 npm i nrm -g :全局安装nrm包使用 nrm ls 查看当前所有可能用的镜像地址使用 nrm use npm 或 nrm use taobao 切换不同的镜像地址注意:只是提供了几个下载包的url地址,但是每次装包的时候,都是用 npm二、项目结构的搭建创建一个项目文件夹 例如webpack-study 作为项目目录在项目根目录下 npm init -y 初始化项原创 2021-01-20 21:12:51 · 160 阅读 · 0 评论