vue
肥猫哈哈哈
冲
展开
-
Vue中的transition
动画周期在它过渡的过程中会有6个class样式来设置transition的过渡动画的效果v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被原创 2021-07-05 09:03:52 · 443 阅读 · 0 评论 -
v-model双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每原创 2021-06-16 20:03:44 · 127 阅读 · 0 评论 -
webpack打包
项目开始时webpack配置,需要自己在项目根路径下创建vue.config.js文件一、 配置 proxy 跨域使用vue-cli发开项目,在本地开发环境中,如果遇到跨域的问题。可以通过配置proxy的方式,解决跨域问题:module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新原创 2021-06-06 18:59:04 · 141 阅读 · 0 评论 -
axios封装与api接口管理
我们为什么要封装axios和api接口管理?主要目的是为了让我们后期维护更加方便,同时简化我们的代码。axios封装步骤1.第一步我们先安装axiosyarn add axios -S2.第二步我们先在src目录中创建network文件夹,http.js文件中存放axios封装,api.js用来管理我们的接口在http.js中我们首先引入// 在http.js中引入axiosimport axios from 'axios'; // 引入axiosimport router from原创 2021-06-03 17:02:01 · 226 阅读 · 0 评论 -
多环境变量配置
首先我们在package.json中的scripts进行配置:"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode testing"},然后我们通过:通过 npm run serve 启动本地 , 执行 development通过 npm run testing 打包测试 , 执行 test原创 2021-06-02 14:10:43 · 154 阅读 · 0 评论 -
vue-router
一、路由原理路由就是用来解析URL实现不同页面之间的跳转二、路由的两种模式hash模式:在浏览器中符号的“#”,以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用, hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。原创 2021-05-23 20:41:03 · 123 阅读 · 2 评论 -
什么是Vuex
一、Vuex的概念vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。二、五大核心state – 存放状态getters – state的计算属性mutations – 更改状态的逻辑,同步操作actions – 异步操作module – 将store模块化三、基本使用通过是在根目录下新建一个st原创 2021-05-23 20:06:59 · 148 阅读 · 0 评论 -
vue生命周期函数
beforeCreate(){} 创建前实例完全被创建出来之前,实例dom和数据对象 data 都为 undefined,还未初始化。created(){} 创建后数据对象 data 已存在,此时可以调用 methods 中的方法,操作 data 中的数据,但实例dom 还未生成,不能进行dom操作,如果需要操作dom,可以在 this.$nextTick(() => { }) 中进行操作。beforeMount(){} 挂载前vue 实例的 $el 和原创 2021-05-20 21:02:32 · 139 阅读 · 0 评论 -
vue组件传参
1、父传子在父组件中的子组件标签上绑定一个自定义属性,这个自定义属性的值就是我们要传递的参数,我们在子组件接收是使用props<heads :data="list" />// 比如这是我们注册好的子组件标签<script> export default { data(){ return { list:["数据1","数据2","数据3",] } } }</script><script> export defaul原创 2021-05-20 07:52:48 · 405 阅读 · 0 评论