vue
Walzerhi
高级认证忍者
展开
-
vueMS(四)
css样式相关2.h1-h5样式中的居中居左等操作text-align: left;居左 想要再在居左的基础上向右移动几个像素,配合padding-left:10px;使用设置图片大小:要在div里加style=‘width:10rem;height:10rem’ 设置图片居中: position:absolute left: 50%; transform: translate(-50%, -50%);水平居中分布3.px和rem的换算1rem=16px像素单位原创 2020-08-27 16:57:17 · 217 阅读 · 0 评论 -
vueMS(三)
11.计算属性?计算属性和 methods 有什么区别?1、两者的执行结果是完全相同的2、计算属性是基于它们的依赖进行缓存的,只有在相关依赖发生改变时它们才会重新求值也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不在执行函数3、methods方法,每当触发重新渲染时,调用方法将总是再次执行函数 4、计算属性具有缓存功能,而methods没有12.vue数据双向绑定原理VUE实现双向数据绑定的原理就是利用了 Object.defineProper原创 2020-08-27 16:47:54 · 190 阅读 · 0 评论 -
vueMS(二)
1.mvvm 框架是什么?Model-View-ViewModel的缩写,模型-视图-视图模型 m-model:【模型】指的是后端传递的数据v-View:【视图】指的是所看到的页面.vm-viewmodel:【视图模型】mvvm模式的核心,它是连接view和model的桥梁,一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM事件监听。2.vue-router 路由的两原创 2020-08-27 16:08:14 · 185 阅读 · 0 评论 -
vueMS(一)
vue生命周期1.什么是vue的生命周期?从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed2.vue生命周期的作用是什么?在生命周期的不同阶段调用对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能3.第一次页面加载会触发哪几个钩子会触发下面这几个beforeCre原创 2020-08-27 14:24:38 · 209 阅读 · 0 评论 -
vue实现转盘使用css3动画
只标注重要部分作为记录动画:<img src="../assets/roomlist/pan.png" :style="{transform:rotate_angle,transition:rotate_transition}" />data() { return { rotate_angle:0,//转盘转的角度(rotate(180deg)) rotate_transition: "transform 4s ease-in-out", //动作的执行方式原创 2020-08-21 14:18:28 · 730 阅读 · 0 评论 -
$nextTick()的作用
本文摘自https://blog.csdn.net/Cui_7788/article/details/103143373什么是nextTick()vue更新dom是异步操作的,$nextTick()是用来知道什么时候dom更新完成实例有一个div,默认用v-if隐藏,点击按钮之后,改变v-if的值让它显示出来,并且读取到div中的值。<template> <div> <div id="changeDom" v-if="showDiv">显示文本<转载 2020-07-28 15:28:35 · 11488 阅读 · 1 评论 -
vue中$set的用法
一.什么是$set要明白什么是set我们就先要了解vue的数据双向绑定的原理,VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,不是响应式的,所以会出想数据变化,页面不变的情况。此时需要用到$set。二.具体应用<!-- vue中$set的用法 --><template> <div>原创 2020-07-28 13:56:26 · 9488 阅读 · 0 评论 -
vue组件之间的传值
首先我们调用组件父子组件不一定是父子路由,我们在一个组件里调用另一个组件即可形成父子组件。一.父组件向子组件传值创建好两个组件,父组件为Compont.vue,子组件为DataComponT.vue,父组件Compont里我们引入子组件:<template> <div> <DataComponT v-bind:secondlist="secondlist"></DataComponT> </div></template原创 2020-07-27 16:45:29 · 108 阅读 · 0 评论 -
vue-app打包流程
转载:https://baijiahao.baidu.com/s?id=1655878004078867586&wfr=spider&for=pc转载 2020-07-15 15:33:34 · 157 阅读 · 0 评论 -
vue手动添加rem移动端适配
添加rem项目下新建rem.js文件内容为:(function () { function resize() { var baseFontSize = 100; //设计稿100px相当于1rem var designWidth = 750;//设计稿宽度 var width = window.innerWidth;//获取屏幕宽度 var currentFontSize = (width / designWidth) * bas原创 2020-06-04 11:03:35 · 335 阅读 · 0 评论 -
vue-cli3以上使用Iconfont-阿里巴巴图标矢量库
添加资源到阿里矢量图官网搜索想要的图标,选取想要的矢量图标加入购物车,打开购物车选择创建项目或者添加到项目,然后在我的项目里点击下载到本地,至此我们得到大致如图文件其中,demo_index.html为教你怎么用这些矢量图的方法,打开我们选第二种方法Font Class。具体用法为,在你的项目的public文件夹下引入矢量图资源引入之后,我们在public文件夹下的index.html假如我们要引入矢量图的代码,此处有教程,具体为:<link rel="stylesheet" href="&原创 2020-06-04 10:06:48 · 883 阅读 · 0 评论 -
前端本地启用模拟服务,以及解决vue跨域问题
1.本地启动node服务提前安装好node的相关配置,然后在任何位置新建文件夹,文件夹下新建index.js文件,输入以下代码:let express = require('express')let app = express()// app.use((req, res, next) => {// res.append('Access-Control-Allow-Origin', '*')// res.append('Access-Control-Allow-heade原创 2020-06-02 14:18:29 · 806 阅读 · 0 评论