随笔分类 - vue.js
前端框架
摘要：一，安装pinia库: 1,官网: https://pinia.vuejs.org/ 代码地址: https://github.com/vuejs/pinia 2,安装: liuhongdi@lhdpc:/data/vue/child$ npm -S install pinia added 2 pa
阅读全文
摘要：一，js代码: 1,main.js import { createApp } from 'vue' import App from './App.vue' import router from './route' //判断是否移动端的函数 const isMobileFunc = () => { l
阅读全文
摘要：一，创建全局css文件 创建global.css文件，保存全局样式,如图: global.css的代码: .titleDiv { width:800px; text-shadow: 2px 2px 5px #777; line-height: 22px; font-size: 22px; color
阅读全文
摘要：一，js代码： <template> <div> <!--输入--> <div style="display: flex;flex-direction: column;"> <div style="margin-left: 20px;width:500px;"> <div style="width:
阅读全文
摘要：一，js代码: <template> <div> <div style="width:450px;margin: auto;text-align: center;font-size: 20px;color:#777777;padding-top: 10px;padding-bottom: 10px;
阅读全文
摘要：一，js代码 <template> <div> <div style="width:800px;display: flex;flex-direction: row;"> <el-input v-model="plainText" :rows="6" type="textarea" placehold
阅读全文
摘要：一，js代码: 1,选择国家或地区的component CountrySelect.vue <template> <div> <div class="selCountry" style="border: 1px solid #CCC;width: 250px;height:35px;"> <div
阅读全文
摘要：一，js代码 1,Child.vue <template> <div style="background: #ffff00;"> <div>这是子组件</div> <div>参数default:{{defaultStr}},参数top:{{topStr}}</div> <div>变量:{{child
阅读全文
摘要：一，安装axios库: 1，相关地址 官网: https://axios-http.com/ 代码地址: https://github.com/axios/axios 2,安装 liuhongdi@lhdpc:/data/vue/axios$ npm install --save axios add
阅读全文
摘要：一，js代码 <template> <div style="background: rgb(0, 0, 0);width:100%;height:100vh;"> <div style="position:relative;"> <video ref="homeVideo" style="posit
阅读全文
摘要：一，js代码： <template> <div> <div style="position:relative;"> <video ref="homeVideo" style="position: absolute; width: 100vh; height: 100vw; left: -60vw;
阅读全文
摘要：一，思源黑体和思源宋体的下载地址: 思源黑体 https://github.com/adobe-fonts/source-han-sans/releases 思源宋体 https://github.com/adobe-fonts/source-han-serif/releases 说明：刘宏缔的架构
阅读全文
摘要：一，vue-router的官网: 1,官网: https://router.vuejs.org/ 2,在npmjs的地址: https://www.npmjs.com/package/vue-router 3,文档地址: https://router.vuejs.org/zh/introductio
阅读全文
摘要：一，js代码: <template> <div style="background: #ffffff;" id="root" @mousemove="onMove" @mouseup="onEnd"> <div id="wrapper" style="position: relative;width
阅读全文
摘要：一，代码: <template> <div class="wrapper" ref="wrapper" @touchstart.prevent="onStart" @touchmove.prevent="onMove" @touchend.prevent="onEnd" @touchcancel.p
阅读全文
摘要：一，js代码： 1，html代码 <div ref="loadingDiv" v-show="loadingShow" style="left:0;top:0;position:fixed;width:100vw;height:100vh;background: #000000;opacity: 0
阅读全文
摘要：一，安装所需的库@vueuse/core liuhongdi@lhdpc:/data/vue/lazy$ npm install --save @vueuse/core 说明：刘宏缔的架构森林是一个专注架构的博客， 网站：https://blog.imgtouch.com本文: https://bl
阅读全文
摘要：一，把baidu的icon保存到本地: 在本地增加一个icon供测试用: 访问: https://www.baidu.com/favicon.ico 保存到public目录下， 名字保存为 faviconbd.ico 说明：刘宏缔的架构森林是一个专注架构的博客， 网站：https://blog.im
阅读全文
摘要：一，js代码 1,css代码:定义变量 <style> :root { --tabbar-background: red; } </style> 2,html代码：调用变量 直接用var函数即可: <tabBar id="tabbar" style="width:100%;font-size:0.2
阅读全文
摘要：一，编写js代码 1，Parent.vue <template> <div> <Child @eventParent="receiveMessage"></Child> </div> </template> <script> import Child from './Child' export de
阅读全文