蜀山 22/10/15 vue3

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量97 收藏
点赞数
分类专栏： # 蜀山 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ninoninoni/article/details/127602032
版权

目录

vue语法 回顾

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

条件渲染指令

v-if

在这里插入图片描述
条件成立，显示这个段；条件不成立，不显示
先搭建环境 先把项目引入进来
在这里插入图片描述
初始可运行界面
在这里插入图片描述

在终端把项目运行起来
在这里插入图片描述

如果data的值为0，也表示没有数据，运行起来不显示数据
当数值为true，运行起来

js弱类型的脚本语言

书写板块
在这里插入图片描述
在这里插入图片描述
只有放在trmplate标签上，才不会被显示出来，其他标签不可以

在这里插入图片描述

v-show

在这里插入图片描述
在这里插入图片描述
当data值为0，不显示

在这里插入图片描述

当data值为1，就会显示
在这里插入图片描述
v-show不能加在template标签上，

原理是因为，v-show是简单地切换元素css属性，display
通过diaplay控制元素是否显示到页面

面试：
什么时候使用v-if
什么时候使用v-show

v-for

第一种语法形式结构
在这里插入图片描述
在这里插入图片描述
显示的效果 把数字按行显示出来
在这里插入图片描述

如果是使用p标签，那就是成列显示内容

在这里插入图片描述
在这里插入图片描述

如果是使用标签
在这里插入图片描述

在这里插入图片描述

第二种语法形式结构

在这里插入图片描述
在这里插入图片描述
先去定义一些数组类型的变量，数组类型里面含字典类型

所有内容以行的内容显示,整段全部展示
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

按列表形式呈现出来
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

如果说我们只希望拿出里面的数值
展示形式
在这里插入图片描述
在默认情况下，我们取值会默认取到第一项
在这里插入图片描述

在这里插入图片描述
如果前面是加了数字索引
在这里插入图片描述
在这里插入图片描述
VUE里面不一样，数据的索引是从0开始的

展示书籍信息
直接展示
在这里插入图片描述
在这里插入图片描述
同时接收几个参数
在这里插入图片描述
在这里插入图片描述
接收参数的同时进行索引添加

在这里插入图片描述
在这里插入图片描述
希望展示的效果
在这里插入图片描述

原始数据

单独一个进行循环
在这里插入图片描述
双重循环
在这里插入图片描述
在这里插入图片描述

ui组件

在这里插入图片描述

在这里插入图片描述
项目创建
在指定目录下创建项目
在这里插入图片描述
在这里插入图片描述
views 要看的具体的页面

plugins 通用的js代码 第三方通用库

api从后端获取的数据

把项目启动起来 yarn dev

页面的渲染
在这里插入图片描述
集成vant

在这里插入图片描述
在这里插入图片描述
全局加载
在这里插入图片描述

路由

在这里插入图片描述
因为没有设计setup标签，自己设计一个导出
在这里插入图片描述
自己要有选择性地选择代码

然后换个文件夹来加载组件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

路由配置

在这里插入图片描述
在这里插入图片描述
上面存放路由模块
下面存放路由内容

在这里插入图片描述
目录样式
在这里插入图片描述
在这里插入图片描述

默认是的导入router里面的index。ts，在使用时需要声明一下内容

先挂载上进行一个链接

当点击链接关键词的时候，需要有地址的变动
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
定义一级路由

在这里插入图片描述
定义子路由

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

一级路由
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
推荐使用冒号，方便于动态解析
在这里插入图片描述
使用name反向解析地址

在访问页面是，地址变为dashboard
在这里插入图片描述
登陆注册页面
在这里插入图片描述

home页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

京屿大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-UI 实现三级联动
what_where的博客
11-04 2936
首先确定你的vue是有引入element的 模块代码 <template> <div> <el-select v-model="prov" style="width:167px;margin-right: 25px;"> <el-option v-for="option in arr" :value="option.name"> {{ option.name }} </el-option>
Vue 实现省市区三级联动选择（附带JSON数据）
夜璨如炽
10-30 5065
功能需求： 做一个省市区三级联动得选择控件，效果如图 1.html 部分 代码 <div class="col-sm-10"> <select id="s_province" name="s_province" class="form-control" style="width:32%" v-model="address.s_province"> <option value="defualt" disabled>请选择省</option
蜀山 22/10/8 vue2
ninoninoni的博客
10-30 257
vue
蜀山 22/9/25 vue1
ninoninoni的博客
10-23 65
vue
Vuecli 城市三级联动的使用
m0_63498341的博客
12-07 1471
首先说一下实现思路： 1.采用单独的js文件存储省市区数据，可以是json或者js文件。 2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。 3.最好采用单独的组件实现，方便修改和复用。 引入mint-ui: //当前项目下命令行输入 npm i mint-ui --save //在main.js文件中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vu
vue下载Excel，word
cq_run的博客
06-13 374
【代码】vue下载Excel。
如何使用vue-baidu-map只高亮合肥市蜀山区
11-22
根据提供的引用内容，使用vue-baidu-map只高亮合肥市蜀山区的方法如下： 1. 首先，确保已经安装了vue-baidu-map插件，并在项目中引入该插件。 2. 在Vue组件中，使用`<baidu-map>`标签包裹地图组件，并设置地图的...
Vue项目中城市下拉选择 城市js文件
m0_59078472的博客
09-06 673
/* * @Author: taoshiwei * @Date: 2019-04-09 14:38:13 * @Last Modified by: taoshiwei * @Last Modified time: 2019-04-09 14:38:13 * * 城市 地区 */ const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', .
vue + element cascader级联选择器编写城市选择器
username_xu的博客
05-15 4957
需求： 1、城市选择 2、城市输入 实现： html <el-cascader :options="options" change-on-select filterable @change="handleChange"> </el-cascader> js import cities from '@/common/c...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 768
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1642
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 2307
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 389
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1061
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue part 5
E___V___E的博客
08-29 883
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 799
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
react 样式和vue样式的区别
weixin_44565776的博客
08-29 453
react 和vue 样式使用注意事项
纯vue实现笔记系统
xc9711的博客
08-30 1319
只用vue前端实现笔记系统
Already included file name 'd:/code/learnvue/vue_test/src/components/School.vue' differs from file name 'd:/code/learnvue/vue_test/src/components/school.vue' only in casing. The file is in the program because: Imported via './components/School.vue' from file 'd:/code/learnvue/vue_test/src/App.vue' Root file specified for compilation Root file specified for compilation
07-08
错误信息显示，文件名为'd:/code/learnvue/vue_test/src/components/School.vue'与'd:/code/learnvue/vue_test/src/components/school.vue'的大小写不同。 在这个程序中，文件被包含进来的原因有三个： 1. 从'd:/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值