初识vue3之单文件组件script setup
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录关于 vue3 script setup的尝试。 本文会随着作者日常使用进行补充及内容修正 本文参考于： 单文件组件<script setup> 默认自动暴露 <script setup> 是在单文件组件 (SFC) 中使用组合式API的编译时语法糖。相比于普通的<script>语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typescript 声明 props 和抛出事件。 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。 <template> <div>当前msg的值：{{ msg }}</div> <div>当前msg的值(ref的值会被自动解包)：{{ msgRef }}</div> ...
初识vue3之响应式数据
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录关于 vue3 响应式数据的尝试。 本文会随着作者日常使用进行补充及内容修正 refs 类型声明 import { ref, Ref } from 'vue' export default { // setup参数参考 https://v3.cn.vuejs.org/guide/composition-api-setup.html#%E5%8F%82%E6%95%B0 setup() { // 声明类型 字符串 const stringVal = ref<string>('1') // 声明类型 数字 const numberVal = ref<number>(1) // 声明类型 泛型 function useState<State extends string>(initial: State) { const state = ref(in ...
避坑指北：vue使用history路由
背景 在部署vue项目时，路由模式默认使用哈希(hash)模式，但是由于某些原因，要求使用history模式。但是对于现在的部署环境则遇到了一个问题。首先是目录： site ---- 项目根目录 ├── siteA ---- 项目A │ └── index.html └── siteB ---- 项目B └── index.html 即项目放在了同一个根目录下，那么此时我们就需要调整vue的一些配置。具体如下 Vue项目配置 路由设置 export default [{ path: '/siteA', name: 'siteARoot', component: () => import('@/views/siteA/index'), children: [ { path: 'index', name: 'Index', meta: { title: 'siteA' ...
初识vue3之better-scroll组件封装
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录封装基于BetterScroll 2.0插件封装的 scroll-view 组件。适用于移动端的弹性滚动及下拉刷新、上拉加载等场景。 弹性滚动 下拉加载 上拉刷新 滚动前后及滚动中事件 滚动条（待添加） 本文会随着作者日常使用进行补充及内容修正 简单的实现过程 实现之前需要先明确一下需求： 弹性滚动 下拉刷新、上拉加载 自定义传入内容 事件派发 弹性滚动 实现弹性滚动只需要按照官方示例初始化即可实现。 <template> <div class="wrapper" ref="wrapper"> <div class="content"> <div v-for="i in 100">{{ i ...
初识vue3之基础语法记录
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录一些在 vue3 中的一些语法改变（只记录composition api语法），当然使用@vue/composition-api插件也可以令vue2适用本文所记录的语法。 本文会随着作者日常使用进行补充及内容修正 数据相关(data) setupscript setuptsx<template> <div> <!-- vue模式下展示ref数据不需要加.value --> <div>当前title：{{ title }}</div> <input v-model="title" type="text" /> <div>当前用户名：{{ form.name }}</div> ...
VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： <!DOCTYPE html> <html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ el: '#page', data: { msg: 'Hello Vue!123' } }) &l ...
一、VUE中的遗漏的知识
render中的h函数 h函数可以创建虚拟dom，通过创建的虚拟dom再转化为真的的DOM，从而渲染到页面中。 <script> // render function // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上 const app = Vue.createApp({ template: ` <my-title :level="2"> hello xiaokang </my-title> ` }) app.component('my-title', { props: ['level'], render() { const { h } = Vue return h('h' + this.level, {}, [ this.$slots.default(), h('h4', {}, 'xiao ...
7、VUEX
VUEX是什么 vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 vuex的核心概念 state提供唯的公共数据源，所有共享的数据都要统一放到 Store的 State中进行存储。 export default new Vuex.Store({ // 共享数据 state: { count: 0 }, mutations: {}, actions: {}, modules: {} }) 使用方式 通过this.$store.state访问属性 <h3>当前最新的Count值为：{{ $store.state.count }}</h3> 在template模板中可以省略this 导入模式 通过计算属性 import { mapState } from 'vuex' export default { data () ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...