![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
LuiChun
在US购买了一块土地,可以注册多个公司,我想把其余的地方卖出去
展开
-
vite.js项目创建流程图
构建vue.js流程图原创 2021-09-12 20:29:47 · 281 阅读 · 0 评论 -
vue3 src/main.js文件配置
原创 2021-09-12 03:14:42 · 1044 阅读 · 0 评论 -
vue路由配置src/router/index.js
第一步需要你先安装router插件cnpm install vue-router@4然后再配置router/index.js文件原创 2021-09-12 00:03:58 · 3520 阅读 · 0 评论 -
vite创建vue3,8月版本
旧版本升级之后请按以下流程操作。1:在你升级各个版本后,请重启电脑,再进行创建项目,因为旧的路径还没有及时更新,所以你的命令会执行旧版本的创建,所以会抛出异常命令1:#查看node版本[dalaojun@localhost init]$ node -vv14.15.0#查看npm版本[dalaojun@localhost init]$ npm -v7.20.5#查看vue版本[dalaojun@localhost init]$ vue -V@vue/cli 4.5.13#查看cnpm原创 2021-08-09 17:29:50 · 288 阅读 · 0 评论 -
vue3,vite2,json数据通过拼接显示链接src
<template> <div> <p>宫格</p> <!-- van-grid :border="false" 通过插槽可以自定义格子展示的内容。去掉小线条--> <!-- <van-grid :column-num="3">默认一行展示四个格子,可以通过 column-num 自定义列数。 --> <van-grid :border="false" :column-num="5"原创 2021-07-13 20:13:21 · 538 阅读 · 0 评论 -
vue3vite工程里面引入assets目录下的图片文件(一种方法)
<template> <div> <p>轮播图</p> <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white"> <van-swipe-item> <img :src="tu1" alt="" /></van-swipe-item> <van-swipe-item> <i原创 2021-07-13 12:46:30 · 5566 阅读 · 4 评论 -
国内搭建vite vue和国外的不一样的,跟着教程会踩很多坑
一创建项目:方式一: 进入可选方式来创建项目npm方式:$ npm init @vitejs/appyarn方式:$ yarn create @vitejs/app然后进入编辑项目文件夹名字【默认vite-project】最后进入选择支持的框架模板【选择需要的一个】方式二:构建vue 项目npm方式:(npm 7+版本以上 )npm init @vitejs/app my-vue-app – --template vueyarn方式:yarn create @vitejs/app m原创 2021-07-11 19:32:08 · 551 阅读 · 1 评论 -
正常的vite创建项目并且安装vue router,vant的代码示例
[dalaojun@localhost django_luichun]$ npm init @vitejs/app my-vue-app -- --template vueScaffolding project in /home/dalaojun/桌面/django_luichun/my-vue-app...Done. Now run: cd my-vue-app npm install npm run dev[dalaojun@localhost django_luichun]$原创 2021-07-11 17:13:18 · 335 阅读 · 0 评论 -
关于vite2.0和vue/cli建立项目的区别
https://www.bilibili.com/video/BV15K4y1T7Nj?p=1建议看视频看文字看图的效率就不说了原创 2021-07-11 05:30:05 · 402 阅读 · 0 评论 -
vite方式创建vue项目
一 创建项目:方式一: 进入可选方式来创建项目npm方式:$ npm init @vitejs/appyarn方式:$ yarn create @vitejs/app然后进入编辑项目文件夹名字【默认vite-project】最后进入选择支持的框架模板【选择需要的一个】方式二:构建vue 项目npm方式:(npm 7+版本以上 )npm init @vitejs/app my-vue-app -- --template vueyarn方式:yarn create @vitejs/原创 2021-07-11 05:25:57 · 3506 阅读 · 3 评论 -
vue3使用vite创建项目【2分钟】
命令讲解【查看版本】[dalaojun@localhost luichunvue]$ node -vv14.15.0[dalaojun@localhost luichunvue]$ npm -v7.19.1[dalaojun@localhost luichunvue]$ vue -V@vue/cli 4.5.13【升级vue】cnpm update -g @vue/cli【显示下面的是表示已经弃用,不用理会】[dalaojun@localhost luichunvue]$ npm u原创 2021-07-10 21:08:36 · 1839 阅读 · 0 评论 -
前端Vue3中级视频(240分钟)评分95分
https://study.163.com/course/courseMain.htm?courseId=1005974007之前看过他的Vue2视频,这次讲的更好了原创 2021-07-05 02:33:56 · 337 阅读 · 0 评论 -
前端Vue初级视频(90分钟)评分85分
https://learning.dcloud.io/#/?vid=0原创 2021-07-05 02:26:45 · 134 阅读 · 0 评论 -
Django3Vue3前后端分离项目
谢谢各位大佬的贡献1:安装django2:dajngo3新建app,并且访问3:dajngo3设置静态文件访问4:django3安装rest_framework,并测试5:dajngo3,vue3前端项目搭建,vue项目结构的介绍6:django3,vue前后端分离数据请求7:vue3中setup()函数的使用一8:vue3中setup()函数的使用二...原创 2021-07-02 12:02:40 · 928 阅读 · 0 评论 -
vue3中setup()函数的使用二
vue3的使用<template> <div id="one"> <img src="http://127.0.0.1:9000/upload/001.png" alt="" /> <h1>Hello 蒸汽鸭</h1> <h1>{{ text }}</h1> <!-- 使用双花括号来变量括起来,进行渲染,定义的变量在下面 --> </div></tem原创 2021-07-02 11:53:45 · 1196 阅读 · 1 评论 -
vue3中setup()函数的使用一
<template> <div id="one"> <img src="http://127.0.0.1:9000/upload/001.png" alt=""> <h1>Hello World</h1> <h1>{{ text }}</h1><!-- 使用双花括号来变量括起来,进行渲染,定义的变量在下面 --> </div></template>&原创 2021-07-02 11:25:51 · 2767 阅读 · 0 评论 -
django3,vue前后端分离数据请求
下面使用vue2的写法,因为vue3也支持vue2的编写方法运行django后端项目,端口需要设置为和前端项目不同(luichun) [dalaojun@localhost dalaojun]$ python manage.py runserver 127.0.0.1:9000运行前端项目vue,然后选中需要启动的项目,点击运行[dalaojun@localhost django_luichun]$ vue ui图片的路径为http://127.0.0.1:9000/upload/001.pn原创 2021-07-02 09:16:46 · 817 阅读 · 1 评论 -
dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建查看当前node版本[dalaojun@localhost django_luichun]$ node -vv14.15.0查看npm版本[dalaojun@localhost django_luichun]$ npm -v6.14.8查看npm版本[dalaojun@localhost django_luichun]$ cnpm -vcnpm@6.1.1 (/home/dalaojun/下载/node-v14.15.0-linux-x64/lib/node_modules原创 2021-07-02 06:37:52 · 796 阅读 · 0 评论 -
centos 安装nodejs与vue手脚架安装
安装nodejs当我想更新我当前的版本的时候-出现错误Node 更新失败:cp cannot stat ‘usrlocalnversionsnode12执行下面代码(-那么删除这个版本先)cd /usr/local/n/rm -rf versionsnodejs的官网地址是(这个下载很慢)https://nodejs.org/en/当你用浏览器下载时用浏览器打开下面这个淘宝镜像网址找到你要的版本https://npm.taobao.org/mirrors/node/比如我要找到原创 2020-11-12 22:11:14 · 440 阅读 · 0 评论 -
安装Postman
官网下载好对应的版本注意官网下载的应用里面目前找不到设置中文的设置。双击文件包提取到你想要放置的位置提取后的Postman文件夹里面有打开文件的快捷图标如果你是命令行的方式解压tar.gz文件,这种文件是tar文件的压缩文件,可以使用tar命令进行解压。解压:tar zxvf abc.tar.gz解压文件到指定文件夹: tar -zxvf abc.tar.gz -C home/...原创 2020-12-07 12:47:59 · 183 阅读 · 0 评论 -
图解前后端分离
原创 2020-12-15 21:58:50 · 453 阅读 · 0 评论 -
vuecli工程里面引入图片
:src前面需要添加:号进行绑定,再调用script里面进行导入data里面进行返回数据<template> <div> <van-image width="100%" height="100%" fit="contain" :src="somelogo" /> </div></template><script>import logopicture from "@/assets/logo.jpg";ex原创 2020-12-10 19:21:35 · 258 阅读 · 2 评论 -
Django3与Vue3前后端分离搭建
在虚拟环境中安装django与vue在第一个终端里面安装djangopip insstall django创建django项目django-admin startproject djangovue进入djangovue项目里面cd djangovue进行应用迁移python manage.py migrate运行一下服务器python manage.py runserver在第二个终端里面创建一个文件夹,(manage.py同目录下)mkdir templates并且在原创 2020-12-07 15:42:13 · 3637 阅读 · 2 评论 -
django3与vue3本地搭建
在虚拟环境中安装django与vue安装djangopip insstall django创建django项目django-admin startproject djangovue进入djangovue项目里面cd djangovue进行应用迁移python manage.py migrate运行一下服务器(这里的使mac电脑)./manage.py runserver创建一个文件夹,(manage.py同目录下)mark templates并且在templates文件夹下创建一个原创 2020-12-05 17:48:20 · 1174 阅读 · 5 评论 -
Vue路由设置嵌套(一级二级三级展示并且显示定向选中)
router.jsimport Vue from 'vue'import Router from 'vue-router'// 引入页面一级import Home from './views/Home.vue'import About from './views/About.vue'import Us from './views/Us.vue'// 引入二级界面import Homeone from './views/Homeone'import Hometwo from './view.原创 2020-11-29 19:42:32 · 2160 阅读 · 1 评论 -
Vue练习(修改为自定义事件)
<template> <div> <!-- 添加增加方法 传递给子组件--> <!-- 垃圾方法 --> <!-- <Shijian :addTodo="addTodo" /> --> <!-- 使用新方法 --> <!-- 监听绑定 --> <Shijian ref="header" /> <!-- 传递给子组件数据 --&原创 2020-11-27 22:36:36 · 216 阅读 · 0 评论 -
Vue调用本地缓存(监视数据变更)
配置新的工具文件夹配置缓存文件接收数据页面<template> <div> <!-- 添加增加方法 传递给子组件--> <Shijian :addTodo="addTodo" /> <!-- 传递给子组件数据 --> <!-- 传递删除方法 子组件--> <Shijianone :todos="todos" :delTodo="delTodo" /> <!-原创 2020-11-27 21:45:40 · 2157 阅读 · 0 评论 -
vue父子组件搭配(添加数据和删除)
<template> <div> <!-- 添加增加方法 传递给子组件--> <Shijian :addTodo="addTodo" /> <!-- 传递给子组件数据 --> <!-- 传递删除方法 子组件--> <Shijianone :todos="todos" :delTodo="delTodo" /> <!-- 传递给子组件 --> <.原创 2020-11-27 17:14:14 · 1086 阅读 · 2 评论 -
Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)
子组件<template> <div> <h4>Xiongdi</h4> <button @click="aClick">删除父组件的D区块</button> </div></template><script>export default { name: "Xiongdi", methods: { aClick() { // 弹出删除.原创 2020-11-27 13:27:10 · 307 阅读 · 0 评论 -
Vue父子组件传递数据
<template> <div> <!-- 直接通属性过传递值 --> <!-- 下面这个中没有动态绑定的 --> <!-- <div><Soni name='林北辰' age='25' phone='13602388099'/></div> --> <!-- 动态绑定加冒号 --> <!-- 虽然后面的phone没有去掉引号 但这个会影响搜索性.原创 2020-11-27 12:11:46 · 180 阅读 · 0 评论 -
vue监听用户在页面的浏览时间需在beforeDestroy()里面进行销毁
无论把这些钩子放到哪个位置,都是按顺序执行<template> <div class="all"> <div class="one"> <h3>生命周期</h3> <div> <h4>new Vue()</h4> </div> <div> <h4>Init Events&Li原创 2020-11-27 10:12:42 · 7707 阅读 · 0 评论 -
vue搭配animate4版本失效
搭配animate4失效了,那么算了,先用vant先把<template> <div> <div> <h3>动画过渡</h3> <button @click="show = !show">切换</button> </div> <div class="one"> <div> <h3>插入图片并且原创 2020-11-26 10:37:14 · 293 阅读 · 0 评论 -
vue图片插入与设置夜间模式/动态过渡
<template> <div> <div> <h3>动画过渡</h3> </div> <div class="uuu"> <h3>网站夜间模式</h3> <button @click="show = !show">切换</button> <div class="abc" v-if="show".原创 2020-11-26 07:37:26 · 578 阅读 · 0 评论 -
vue设置金额和时间格式(团购倒计时下次一定)
需要加载一个插件(时间插件)<template> <div> <div> <h3>过滤时间</h3> <h3>组键内的金额格式过滤</h3> <p>{{ money | moneyFormat }}</p> <p>{{ page | moneyFormat }}</p> <h3>全局设定的.原创 2020-11-26 05:10:30 · 385 阅读 · 0 评论 -
vue监听用户点击区域
<template> <div> <div> <h3>事件</h3> <div> <!-- 有括号,有参数打印参数 --> <button @click="clickcount(0)">小区域0</button> <!-- 没有括号弹出事件对象 --> <button @click=.原创 2020-11-26 03:51:16 · 1100 阅读 · 0 评论 -
vue设置列表数据添加
<template> <div> <div> <fieldset> <legend>练习</legend> <div> <span>姓名:</span> <input type="text" placeholder="名字" v-model="newPerson.name" /> .原创 2020-11-25 21:53:56 · 2514 阅读 · 0 评论 -
vue写自定义指令(全局或者组件内部)
main.js文件里面的内容全局自定义指令import Vue from 'vue'; // 默认去node_modules文件目录去找到这个vueimport App from './App.vue'; // 这个就是src目录下的App.vue// 没输入等于开发模式// 开发模式等于【Vue.config.productionTip = true】// 生产模式【Vue.config.productionTip = false】Vue.config.productionTip = tr原创 2020-11-25 07:15:13 · 1138 阅读 · 0 评论 -
vue里面v-once/ref【获取标签里面的内容】
v-once只渲染一次(在细节里面优化性能)只渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容跳过,(在细节里面优化性能)ref尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。<template> <div> <h3>指令</h3> <p v-text=原创 2020-11-25 07:14:36 · 1918 阅读 · 0 评论 -
vue里面v-cloak/v-text/v-html/v-pre的应用
v-text更新元素的textContentv-html更新元素的innerHTML【不建议使用】因为在网站上动态渲染HTML容易导致XSS攻击v-pre不编译里面的元素v-cloak一般用在非工程化的页面上作用:防止闪现–内容未加载完成出现未编译的代码用法:和CSS规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕<template> <div> <h3>指令</h原创 2020-11-25 07:13:57 · 109 阅读 · 0 评论 -
vue排序设计
vue排序设置<template> <div class="mid"> <div class="left"> <h3>排序</h3> <div> <button @click="orderByAge(0)">默认</button> <button @click="orderByAge(1)">年龄大到小</button>原创 2020-11-25 07:13:25 · 409 阅读 · 0 评论