day4 vue2以及ElementUI

创建vue2项目

可能用到的命令行们

vue create 项目名称 // 创建项目
cd 项目名称 // 只有进入项目下,才能运行
npm run serve // 运行项目
D: //切换盘符

更改 Vue项目的端口配置

基础语法

项目创建完成之后,会有一个组件HelloWorld.vue,这个组件是已经配置好的,可以直接在上面写代码来运行。

首先vue分成三个板块, 必不可少的就是template和script板块,前者写HTML代码,后者配置将组件导出需要的值。

{{属性值}}可以动态得到data中配置的属性值;

使用v-on:xxx或 @xxx 绑定事件,其中xxx是 事件名, 例如 @click;

methods中配置方法,computed中配置计算属性,也是写成一个方法的样子,返回运算结果,可以直接用{{方法名}}来执行;

# v-model 用于收集表单数据,=“属性名”则该属性可以获取到表单组件的数据,有三个修饰符—— lazy : 失去焦点再收集数据; number:输入字符串转为有效的数字; trim:过滤掉首尾输入的空格

条件渲染——

条件渲染有 v-if v-show# v-if
写法:  v-if="表达式"v-else-if="表达式"v-else="表达式"
适用于: 切换频率较低的场景
特点: 不展示的DOM元素 直接被移除----------------------------# 注意 : v-if 可以和 v-else-if, v-else 一起使用,但要求结构不能被"打断"# v-show
写法:v-show="表达式"
适用于: 切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用 display:none 隐藏掉--------------
# 注意:
使用v-if时 元素可能无法获取到,而使用v-show 一定可以获取到
<template>标签只能与v-if 配合使用

v-for列表渲染——

<li v-for="user in userList" :key="user.id">{{user.username}}--{{user.tel}}</li>

 script中,data(){}是比较特殊的一,几乎只有data才会使用方法的方式,其他都是属性的方式,

<template><div class="hello"><h1>{{ msg }}</h1><h3>姓名:{{ name }}</h3><!-- 插值语法 --><h3>学校:{{ school }}</h3><h3>我要计算:{{ count }}</h3><input type="number" v-model.lazy="add" /><br /><el-button type="primary" @click="cal(10)">Change Name</el-button><div>{{ show }}</div><div><!--条件渲染:if show v-if条件不成立不占位置,v-show 条件不成立也占位置--><p v-if="check()">{{ name }} 你好!</p><p v-show="check()">counter is greater than 10</p></div><di>列表渲染v-for</di><ul><li v-for="(item, index) in bankList" :key="index">{{ item.bankName }}</li></ul></div>
</template><script>
export default {name: "HelloWorld", // 组件名称data() {return {name: "郑欣怡",school: "燕山大学",count: 0,add: 100,firstName: "郑",lastName: "欣怡~",questionList: [{ questioner: "玉米", experName: "张", id: 100 },{ questioner: "苹果", experName: "李", id: 200 },{ questioner: "香蕉", experName: "王", id: 102 },{ questioner: "苹果", experName: "李", id: 103 },],bankList: [{ bankName: "工商银行", bankCode: "ICBC", bankAddress: "北京市朝阳区" },{ bankName: "建设银行", bankCode: "CCB", bankAddress: "北京市海淀区" },{ bankName: "农业银行", bankCode: "ABC", bankAddress: "北京市西城区" },{bankName: "邮政储蓄银行",bankCode: "PSBC",bankAddress: "北京市通州区",},{ bankName: "招商银行", bankCode: "CMB", bankAddress: "北京市顺义区" },{ bankName: "浦发银行", bankCode: "SPDB", bankAddress: "北京市大兴区" },{ bankName: "兴业银行", bankCode: "CIB", bankAddress: "北京市房山区" },{ bankName: "光大银行", bankCode: "CEB", bankAddress: "北京市密云区" },],};},props: {// 接收父组件传递的属性msg: String,},// 事件处理methods: {changeName() {this.count++;if (this.count % 2 === 0) {this.name = "韩梅梅";} else {this.name = "郑欣怡";}},cal(num) {this.count += num;// this.count += this.add;},check() {// alert("check" + this.count);return this.count > 10;},},computed: {// 计算属性show() {return this.firstName + this.lastName;},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 当前样式只对当前页面有效 */
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

组件化开发

 # Vue中使用组件的三大步骤 :
一 定义组件(创建组件)
二 注册组件
三 使用组件(写组件标签) 

在App.vue中注册组件:

import HelloWorld from './components/HelloWorld.vue'import MyVue from './components/My.vue'export default {name: 'App',components: {HelloWorld,MyVue}}

在App.vue中使用组件:

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
<!--使用自定义的组件--><NewVue/><hello-vue/><FormVue/></div>
</template>

导入ElementUI

使用ElementUI中的css渲染让网站中的组件更加美观。

Element - The world's most popular Vue UI framework

网站中包含了大量样式,可以直接得到样式的代码,复制到自己的项目中,前提是还得将Element UI装入项目:

命令行执行:

npm i element-ui -S

在main.js中配置:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';//样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推动智慧交通建设,边缘计算赋能交通信号灯数据处理与决策能力

随着智慧城市建设的快速发展&#xff0c;智慧交通已成为城市发展的重要组成项目。智慧交通旨在通过大数据、人工智能、物联网等先进技术&#xff0c;实现交通系统的全面感知、智能分析、主动服务和协同管理。边缘计算在交通信号灯物联网应用中展现了交通信号灯数据处理与决策能…

手机怎么设置不同的ip地址

在数字化日益深入的今天&#xff0c;智能手机已成为我们生活、工作和学习中不可或缺的设备。然而&#xff0c;随着网络应用的广泛和深入&#xff0c;我们有时需要为手机设置不同的IP地址来满足特定需求。比如&#xff0c;避免网络限制、提高网络安全、或者进行网络测试等。本文…

内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案

知识点&#xff1a; 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题&#xff1a;遇到防火墙就用隧道技术&#xff0c;…

Ubuntu设置网络

进入网络配置文件夹 cd /etc/netplan 使用 vim 打开下的配置文件 打开后的配置 配置说明&#xff1a; network:# 网络配置部分ethernets:# 配置名为ens33的以太网接口ens33:addresses:# 为ens33接口分配IP地址192.168.220.30&#xff0c;子网掩码为24位- 192.168.220.30/24n…

软考-软件设计师(3)-数据结构与算法:树、图、队列、查找算法、排序算法、霍夫曼编码/树、环路复杂性、算法/时间复杂度/空间复杂度等高频考点

场景 软考-软件设计师-数据结构与算法模块高频考点整理。 以下为高频考点、知识点汇总,不代表该模块所有知识点覆盖,请以官方教程提纲为准。 注: 博客:霸道流氓气质-CSDN博客 实现 知识点 树:节点的度、树的度、深度、高度、满二叉树、完全二叉树、平衡二叉树、B树…

【iOS】——Block概要和使用规范

Block概要和使用规范 Block定义 Block是带有自动变量的匿名函数&#xff0c;这里的自动变量是局部变量&#xff0c;匿名函数是说不需要知道该函数的名称也可以调用。无需提前声明或命名就能作为参数传递给其他函数或方法&#xff0c;或者作为变量保存和执行 Block的语法 完…

利用宝塔部署前后端分离springboot项目,以EasyPan为例

前置准备 服务器购买 请参考其他教程&#xff0c;这里不再赘述。 项目 部署到服务器前请确保项目在本地运行正常 安装宝塔面板 宝塔Linux面板的安装配置以及基本使用教程&#xff08;超详细&#xff09;_宝塔linux面板新手使用教程-CSDN博客 sql文件 IDEA中怎样导出数据…

删除的视频怎样才能恢复?详尽指南

在日常生活中&#xff0c;我们有时会不小心删除一些重要的视频文件&#xff0c;或者在整理存储空间时不慎丢失了珍贵的记忆片段。这时候&#xff0c;我们可以通过一些数据恢复工具和技巧&#xff0c;找回这些被删除的视频。本文将详细介绍几种常见且有效的视频恢复方法&#xf…

docker 安装jenkins详细步骤教程

Jenkins 是一个开源的持续集成(CI)和持续部署(CD)工具,用于自动化软件开发过程中的构建、测试和部署。 特点和功能: 持续集成:Jenkins 可以自动触发构建过程,检查代码变更并进行构建、测试和部署,以确保团队的代码始终保持可集成状态。 插件生态系统:Jenkins 拥有丰富…

Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问

Vue的设置 我们创建并启动一个Vue项目&#xff0c;如下所示&#xff1a; 打开cmd&#xff0c;输入ipconfig查询本地ip地址&#xff1a; 想通过本地ip地址访问&#xff0c;把localhost改成本地ip地址&#xff0c;发现打不开&#xff1a; 这是因为Vue项目默认只有localhost&…

【Linux】进程IO|重定向|缓冲区|dup2|dup|用户级缓冲区|模拟缓冲区

目录 前言 重定向 实验一 为什么log.txt文件的文件描述符是1 为什么向stdout打印的信息也出现在文件中 实验二 用户级缓冲区 为什么要有用户级缓冲区 系统调用 dup 为什么close(fd1)之后还能向log.txt写入数据&#xff1f; dup2 缓冲区 观察现象 测试1 测试2 测…

【Pytorch实战教程】Pytorch中保存和加载模型的详细介绍

文章目录 保存模型方法一:只保存模型参数方法二:保存整个模型加载模型方法一:加载模型参数(推荐)方法二:加载整个模型训练时保存模型加载并继续训练总结在PyTorch中,保存和加载模型是非常重要的步骤,尤其是在训练大规模模型或需要多次重复实验时。 保存模型 在PyTorch…

C++初阶学习第三弹——类与对象(上)

目录 一.初步认知对象 二.类的基本组成、 1.类的定义 2.类的访问限定符及封装 3.类的作用域 4、类的大小的计算 5.this指针 三.总结 一.初步认知对象 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。…

WPF脱机应用:实现拼音模糊搜索的AutoCompleteBox

引言 在用户界面设计中&#xff0c;提供快速且直观的搜索体验是提升应用可用性的关键。WPF&#xff08;Windows Presentation Foundation&#xff09;提供了丰富的控件&#xff0c;其中AutoCompleteBox是一个能够辅助用户输入并提供自动完成建议的控件。然而&#xff0c;在脱机…

Linux下普通用户无法执行sudo指令

当执行sudo指令时出现&#xff1a; xxx&#xff08;普通用户名字&#xff09; is not in the sudoers file 说明在/etc/sudoers文件中没有把xxx加入到可执行sudo指令的名单中&#xff0c;因此需要修改sudoers文件。 解决方法&#xff1a;1、vim /etc/sudoers &#xff08;要…

Java类加载器实现机制详细笔记

1. 类加载器的基本概念 类加载器&#xff08;ClassLoader&#xff09;&#xff1a;在Java中&#xff0c;类加载器负责将Java类动态加载到JVM中。它是实现动态类加载机制的核心组件&#xff0c;对于开发复杂应用程序&#xff08;如插件系统、模块化设计等&#xff09;至关重要。…

什么是hdfs如何使用驱动程序访问hdfs

目录 什么是hdfs 主要特点包括&#xff1a; 架构组成&#xff1a; 应用场景&#xff1a; 如何使用驱动程序访问hdfs 准备工作环境&#xff1a; 启动 Hadoop 服务 可能遇到的问题&#xff1a; ssh验证失败 验证Hadoop服务 对hdfs进行文件操作 什么是hdfs HDFS&#x…

vite5+vue3开发阅读APP实战笔记20240725

目前界面长成这样&#xff1a; 配置别名 修改vite.config.js import {defineConfig} from vite import vue from vitejs/plugin-vue import path from "path"// https://vitejs.dev/config/ export default defineConfig({server: {open: true,port: 8088,},plug…

论文阅读【检测】:商汤 ICLR2021 | Deformable DETR

文章目录 论文地址AbstractMotivation技术细节多尺度backbone特征MSDeformAttention 小结 论文地址 Deformable DETR 推荐视频&#xff1a;bilibili Abstract DETR消除对目标检测中许多手工设计的组件的需求&#xff0c;同时表现出良好的性能。然而&#xff0c;由于Transfor…

MongoDB - 聚合阶段 $count、$skip、$project

文章目录 1. $count 聚合阶段2. $skip 聚合阶段3. $project 聚合阶段1. 包含指定字段2. 排除_id字段3. 排除指定字段4. 不能同时指定包含字段和排除字段5. 排除嵌入式文档中的指定字段6. 包含嵌入式文档中的指定字段7. 添加新字段8. 重命名字段 1. $count 聚合阶段 计算匹配到…