![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2.0
eling-
佛是过来人,人是未来佛
展开
-
vant+postcss-pxtorem适配移动端rem
npm安装npm install postcss-pxtorem --save.postcssrc.js做如下修改// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { "plugins": { "postcss-import": {}, "postcss-u...原创 2019-10-15 15:10:29 · 414 阅读 · 0 评论 -
vuex的基本用法与核心概念
Vuex1.简介Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生改变简单来说,就是用来集中管理数据2.基本用法2.1 安装vuexcnpm install vuex -S2.2 创建store.js文件,用于配置vuex,在main.js中导入,并配置store选项main.js:...原创 2019-03-21 23:39:37 · 334 阅读 · 0 评论 -
vue 自定义全局组件(插件)方法步骤
自定义全局组件(插件)全局组件:就是可以在main.js里面使用Vue.use()进行全局引入的,然后在其他组件中度可以使用如:vue-router import VueRouter from 'vue-router' Vue.use(VueRouter)普通组件:每次使用都需要引入如:axios import axios from 'axios'自定义一个全局组件...原创 2019-03-21 22:10:25 · 1180 阅读 · 0 评论 -
vue- Element UI
Element UI1.简介Element UI是饿了么团队提供的一套基于vue2.0的组件库,可以快速搭建网站,提高开发效率Element UI pc端Mint UI 移动端2.快速上手2.1 安装element-ui模块命令:cnpm install element-ui -S2.2 在main.js 引入element-ui,再引入element-ui的css文件(需要单...原创 2019-03-21 21:26:59 · 209 阅读 · 0 评论 -
第一个vue+webpack模块化之使用路由
vue模块化开发之使用路由1. 生成项目命令:vue init webpack-simple vue-cli-model2. 进入项目目录后,安装项目需要的模块命令:cnpm install3. 引入路由router3.1 先安装vue-router 命令:cnpm install vue-router -S3.2 操作步骤 1). 在main.js内引入vue...原创 2019-03-21 00:17:37 · 481 阅读 · 0 评论 -
vue-cli脚手架基本用法
vue-cli脚手架1.简介vue-cli是一个vue脚手架,可以快速构建项目结构vue-cli本身集成了多种项目模版 simple webpack 包含了ESLint代码规范检查和unit单元测试等 webpack-simple 跟webpack差不多,只是没有代码规范检查和单元测试 browserify browserify-sim...原创 2019-03-20 23:08:49 · 129 阅读 · 0 评论 -
vue组件之间的数据通信
组件之间的数据传递(通信)1.父子组件1).在组件内部定义另一个组件称为父子组件2).子组件只能在父组件中使用3).默认情况下,子组件是无法访问父组件的数据的html部分:<div class="box" id="app"> <my-hello></my-hello>原创 2019-03-11 13:59:19 · 358 阅读 · 0 评论 -
vue路由的使用
vue路由的使用1.路由的使用步骤1.html部分使用router-link组件定义导航,to属性指向路径url <router-link to="/home">导航主页<router-link>2.html部分使用router-view来渲染路由内容 <router-view></router-view>3.定...原创 2019-03-19 15:39:08 · 168 阅读 · 0 评论 -
vue 自定义指令
自定义指令Vue.directive(&amp;amp;quot;指令名&amp;amp;quot;,{});Vue.directive内部钩子函数1). bind(){} // 绑定元素时执行,只执行一次(常用)2). inserted(){} // 当被绑定元素插入到dom时执行3). update(){} // 当被绑定元素更新时执行4). componentUpdated(){} // 被绑定元素模版完成一次周期更...原创 2019-03-04 16:45:09 · 112 阅读 · 0 评论 -
vue 计算属性
计算属性基本用法1.计算属性的特点1、可以对属性数据进行逻辑处理操作2、对计算属性中的数据进行监视,也就是被计算的属性如果被修改,那计算属性后的结果就是被修改后再计算的结果;例如:msg:hello vue,经过计算属性计算后,反转值为:vue hello;如果此时msg被修改为:my name is vue, 那此时计算属性会监视原来的数据被更改,会重新计算结果为:vue is n...原创 2019-02-27 14:07:08 · 411 阅读 · 0 评论 -
vue 生命周期
vue的生命周期 (个人理解)vue实例从创建到销毁的过程,称为生命周期,共有八个阶段,分别为:1.创建组件实例,还没观测数据和事件配置—beforeCreate(){}2.创建组件实例完成,事件配置完成—created(){}3.渲染模版之前,还未挂载数据—beforeMount(){}4.渲染模版之后,挂载了数据—mounted(){}5.数据更新之前—beforeUpdate(...原创 2019-02-26 21:02:03 · 127 阅读 · 0 评论 -
vue - ajax之使用axios或resource发送HTTP请求
一、发送ajax请求1.简介vue本身不支持发送ajax请求,需使用vue-resource、axios等插件来实现axios时一个基于Promise的HTTP请求客户端,用来发送请求,也就是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护参考:GitHub上搜索axios,查看API文档2.使用axios发送ajax请求2.1 安装axios并引入npm...原创 2019-02-26 17:55:27 · 243 阅读 · 0 评论 -
vue 组件-component
组件-component1.什么是组件组件(component)是vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码组件是自定义元素(对象)2.定义组件的方式方式1:先创建组件的构造器,然后由构造器创建组件 /* 方式1:先创建组件的构造器,再由构造器创建组件 */ var myComponent = Vue.extend({ t...原创 2019-03-05 16:50:32 · 442 阅读 · 0 评论 -
vue - 基本用法
一、常用指令1.什么是常用指令用来扩展html标签的功能2.vue中常用的指令v-mode双向数据的绑定,一般用于表单元素v-for对数组或对象进行循环操作v-on用来把绑定事件,用法:v-on:事件名 = 函数v-show / v-if用来显示或隐藏元素,v-show是通过display实现,v-if是每次都删掉元素再重新创建二、事件和属性1.事件1.1事件简写...原创 2019-02-25 22:22:46 · 151 阅读 · 0 评论 -
vue 过渡动画
过渡动画1.简介vue在插入、更新或者移除DOM的时候,提供了多种不同方式的应用过渡动画本质上还是使用css3动画:transition,animation2.基本用法使用transition组件,将要执行动画的元素包含在该组件内&lt;transition&gt; &lt;p&gt;执行动画的元素&lt;/p&gt;&lt;/transition&gt;原创 2019-03-04 23:21:52 · 313 阅读 · 0 评论 -
vue 实例的属性和方法
vue实例的属性和方法1.属性vm.$el ===&amp;amp;gt; 用于获取vue实例内el指定的dom对象vm.$data ===&amp;amp;gt; 用于获取vue实例内的数据对象 datavm.$options ===&amp;amp;gt; 用于获取vue实例内的自定义属性或方法vm.$options方法实例: var vm = new Vue({ el: &amp;quo原创 2019-02-27 23:28:43 · 1333 阅读 · 0 评论