TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

最新文章

2021-04-06

Vue实例的生命周期

Vue实例的生命周期
一、关于生命周期Vue实例有一个完整的生命周期,在每个阶段中有不同的特性。操作为什么是放置在created放置在其他位置就不可以吗,是什么是钩子函数?二、生命周期从开始创建、初始化数据、编译模板、挂载DOM、渲染>更新>渲染、卸载等一些列过程,这就是Vue的生命周期。通俗的说法就是Vue实例从创建到销毁的过程,就是生命周期。下面及时Vue实例生命周期,图中标注红色框的即是可以注册的钩子。beforeCreate: 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created: 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。beforeMount: 在挂载开始之前被调用:相关的 render 函数首次被调用。mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounte...

Vue

20 阅读
2021年04月06日
20 阅读
0 评论
2021-04-06

Vant UI组件库基本使用

Vant UI组件库基本使用
一、Vant官网Vant是轻量、可靠的移动端 Vue 组件库。https://youzan.github.io/vant/#/zh-CN/intro二、安装Vant可以通过命令行的方式安装,也可以选择使用图形化界面方式安装。npm install --save vant三、安装插件 babel-plugin-import有全部组件导入,有按需导入。更多推荐是按需导入,因为组件库中并不是所有组件都是需要使用的。babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。npm i babel-plugin-import -D# vue/cli-3 # 在 babel.config.js module.exports = { presets: [ '@vue/app' ], plugins: [ # 添加的内容 ['import', { libraryName: 'vant', libraryDirectory: 'es', style: ...

Vue

20 阅读
2021年04月06日
20 阅读
0 评论
2021-04-06

页面基本骨架(VueRouter使用)

页面基本骨架(VueRouter使用)
一、页面划分页面中是可以划分为5大模块,为此创建对应的5个组件。HomeView主页、AssortView分类、SearchView搜索、CartView购物车、MineView我的。二、Vue-Router简介Vue-Router路由管理器,是官方推荐的深度插件,利于我们构建单页面应用。- 嵌套的路由/视图表 - 模块化的、基于组件的路由配置 - 路由参数、查询、通配符 - 基于 Vue.js 过渡系统的视图过渡效果 - 细粒度的导航控制 - 带有自动激活的 CSS class 的链接 - HTML5 历史模式或 hash 模式,在 IE9 中自动降级 - 自定义的滚动条行为三、Vue-Router安装npm install vue-router四、Vue-Router基本定义安装路由路由功能(导入项目)# main.js文件中 import VueRouter from 'vue-router' Vue.use(VueRouter)导入组件# main.js文件中 import HomeView from './components/HomeView/HomeView.v...

Vue

21 阅读
2021年04月06日
21 阅读
0 评论
2021-04-06

移动端适配解决方案

移动端适配解决方案
一、移动端适配问题在移动端中,会有各式各样的屏幕大小,在不同屏幕下网页内容自适应屏幕显示的问题也就凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,但是对于页面有复杂结构或者视觉上有特殊要求的,就需要通过其他手段来解决了。所谓移动端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局。二、关于rem网页中常用的大小设置单位是 px或是em。但在这提到移动端适配解决方案就是rem,那么rem是什么呢?当使用rem单位,他们转化为像素大小取决于页根元素的字体大小,即html元素的字体大小。根元素字体大小乘以rem值。html{ font-size: 16px; } p{ font-size: 1.5rem; /* 1.5 * 16 = 24px */ width: 2rem; /* 2 * 16 = 32px */ }html{ font-size: 20px; } p{ font-size: 1...

Vue

16 阅读
2021年04月06日
16 阅读
0 评论
2021-04-06

页面基本拆分

页面基本拆分
一、页面内容整体页面中,分为主页、商品详情、分类、搜索、搜索结果、购物车、我的、订单详情这几个大模块内容。二、页面基本结构页面机构划分是先整体后局部。而这里整体结构划分即是: 主页、分类、搜索、购物车、我的五大模块内容。三、基本思路在App.vue添加一个下图所示的基本结构,当点击底部标签栏时,主体内容(中间白色部分)就会发生改变。而此时不用管内容是什么,先要明确整体页面的基本结构以及基本操作。

Vue

24 阅读
2021年04月06日
24 阅读
0 评论