LuiChun

构建vue.js流程图

第一步需要你先安装router插件cnpm install vue-router@4然后再配置router/index.js文件

旧版本升级之后请按以下流程操作。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

<template> <div> <p>宫格</p> <!-- van-grid :border="false" 通过插槽可以自定义格子展示的内容。去掉小线条--> <!-- <van-grid :column-num="3">默认一行展示四个格子，可以通过 column-num 自定义列数。 --> <van-grid :border="false" :column-num="5"

<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

一创建项目：方式一： 进入可选方式来创建项目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

[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]$

https://www.bilibili.com/video/BV15K4y1T7Nj?p=1建议看视频看文字看图的效率就不说了

一 创建项目：方式一： 进入可选方式来创建项目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/

命令讲解【查看版本】[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

https://study.163.com/course/courseMain.htm?courseId=1005974007之前看过他的Vue2视频，这次讲的更好了

https://learning.dcloud.io/#/?vid=0

谢谢各位大佬的贡献1：安装django2：dajngo3新建app，并且访问3：dajngo3设置静态文件访问4：django3安装rest_framework，并测试5：dajngo3,vue3前端项目搭建,vue项目结构的介绍6：django3，vue前后端分离数据请求7：vue3中setup()函数的使用一8：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

<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>&

下面使用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

前端项目搭建查看当前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

安装nodejs当我想更新我当前的版本的时候-出现错误Node 更新失败：cp cannot stat ‘usrlocalnversionsnode12执行下面代码（-那么删除这个版本先）cd /usr/local/n/rm -rf versionsnodejs的官网地址是（这个下载很慢）https://nodejs.org/en/当你用浏览器下载时用浏览器打开下面这个淘宝镜像网址找到你要的版本https://npm.taobao.org/mirrors/node/比如我要找到

官网下载好对应的版本注意官网下载的应用里面目前找不到设置中文的设置。双击文件包提取到你想要放置的位置提取后的Postman文件夹里面有打开文件的快捷图标如果你是命令行的方式解压tar.gz文件，这种文件是tar文件的压缩文件，可以使用tar命令进行解压。解压：tar zxvf abc.tar.gz解压文件到指定文件夹： tar -zxvf abc.tar.gz -C home/...

: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

在虚拟环境中安装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并且在

在虚拟环境中安装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文件夹下创建一个

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.

<template> <div> <!-- 添加增加方法 传递给子组件--> <!-- 垃圾方法 --> <!-- <Shijian :addTodo="addTodo" /> --> <!-- 使用新方法 --> <!-- 监听绑定 --> <Shijian ref="header" /> <!-- 传递给子组件数据 --&

配置新的工具文件夹配置缓存文件接收数据页面<template> <div> <!-- 添加增加方法 传递给子组件--> <Shijian :addTodo="addTodo" /> <!-- 传递给子组件数据 --> <!-- 传递删除方法 子组件--> <Shijianone :todos="todos" :delTodo="delTodo" /> <!-

<template> <div> <!-- 添加增加方法 传递给子组件--> <Shijian :addTodo="addTodo" /> <!-- 传递给子组件数据 --> <!-- 传递删除方法 子组件--> <Shijianone :todos="todos" :delTodo="delTodo" /> <!-- 传递给子组件 --> <.

子组件<template> <div> <h4>Xiongdi</h4> <button @click="aClick">删除父组件的D区块</button> </div></template><script>export default { name: "Xiongdi", methods: { aClick() { // 弹出删除.

<template> <div> <!-- 直接通属性过传递值 --> <!-- 下面这个中没有动态绑定的 --> <!-- <div><Soni name='林北辰' age='25' phone='13602388099'/></div> --> <!-- 动态绑定加冒号 --> <!-- 虽然后面的phone没有去掉引号 但这个会影响搜索性.

无论把这些钩子放到哪个位置，都是按顺序执行<template> <div class="all"> <div class="one"> <h3>生命周期</h3> <div> <h4>new Vue()</h4> </div> <div> <h4>Init Events&Li

搭配animate4失效了，那么算了，先用vant先把<template> <div> <div> <h3>动画过渡</h3> <button @click="show = !show">切换</button> </div> <div class="one"> <div> <h3>插入图片并且

<template> <div> <div> <h3>动画过渡</h3> </div> <div class="uuu"> <h3>网站夜间模式</h3> <button @click="show = !show">切换</button> <div class="abc" v-if="show".

需要加载一个插件(时间插件)<template> <div> <div> <h3>过滤时间</h3> <h3>组键内的金额格式过滤</h3> <p>{{ money | moneyFormat }}</p> <p>{{ page | moneyFormat }}</p> <h3>全局设定的.

<template> <div> <div> <h3>事件</h3> <div> <!-- 有括号,有参数打印参数 --> <button @click="clickcount(0)">小区域0</button> <!-- 没有括号弹出事件对象 --> <button @click=.

<template> <div> <div> <fieldset> <legend>练习</legend> <div> <span>姓名:</span> <input type="text" placeholder="名字" v-model="newPerson.name" /> .

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

v-once只渲染一次（在细节里面优化性能）只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容跳过，（在细节里面优化性能）ref尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。<template> <div> <h3>指令</h3> <p v-text=

v-text更新元素的textContentv-html更新元素的innerHTML【不建议使用】因为在网站上动态渲染HTML容易导致XSS攻击v-pre不编译里面的元素v-cloak一般用在非工程化的页面上作用：防止闪现–内容未加载完成出现未编译的代码用法：和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕<template> <div> <h3>指令</h

vue排序设置<template> <div class="mid"> <div class="left"> <h3>排序</h3> <div> <button @click="orderByAge(0)">默认</button> <button @click="orderByAge(1)">年龄大到小</button&gt