VUE基础快速入门

VUE 和 VUE-Cli

在这里插入图片描述

  • VUE 是一种流行的渐进式JavaScript框架,用于构建Web用户界面
  • 它具有易学、轻量级、灵活性强、高效率等特点,并且可以与其他库和项目集成
  • 是目前最流行的前端框架之一
  • VUE-Cli 称为“VUE脚手架”,它是由VUE官方提供的客户端,专门为单页面应用快速搭建的脚手架
  • 使用它可以轻松的创建新的应用程序,而且可以自动生成vue和webpack工程模板

前端工程分类

前端工程分为单页面架构和多页面架构

  1. 多页面架构(传统方案):
    指工程中存在多个*.html 文件,每一个页面对应一个 html 文件
  2. 单页面架构(VUE 脚手架工程):
    指工程中只有一个 html 页面文件,通过一个 html 页面中的内容改变实现多页面的效果
    每个页面至少对应一个*.vue 文件
    用户的URL只对应一个页面,我们可以随时替换这个页面的内容,方便更新
    在这里插入图片描述
    每个页面可以由多个部分组成,每个部分都可以按需替换
    局部替换的做法,也反向实现了页面某些部分的"复用"

在这里插入图片描述
注意:

  1. html 文件是页面全部内容,vue 文件可能是页面的一个部分,也能是页面的所有内容
  2. 两种方式对用户体验没有影响,不论哪种方式在用户端是一样的

在这里插入图片描述
2. IDEA工具VUE工程初始化

  1. 确保IDEA中有vue插件

在这里插入图片描述

  1. 通过 IDEA 的 Terminal 工具,在工程的根目录下,执行 vue create 工程名 来创建工程
  2. 通过 cd 工程名 指令 进入到创建的 vue 工程目录下
  3. 启动工程: npm run serve
  4. 停止工程:Ctrl+C 输入 Y 回车
  5. 修改端口号:在 package.json 文件的第 6 行修改:
"serve": "vue-cli-service serve --port 9090",
  1. VUE项目工程结构解析
    项目中需要大家关注的主要内容:

  2. public 文件夹:里面存放静态资源文件,如:图片/视频等

  3. src/router/index.js:路由配置文件,在里面配置请求地址和 VUE 组件的映射关系

  4. src/views:在里面创建对应每个页面的*.vue 文件

  5. App.vue:此组件工程启动后自动挂载到 index.html 页面的组件,可以理解为工程的入口

  6. main.js:当需要引入其他框架或对进行配置时使用此文件

  7. package.json:修改端口号

  8. 新view.vue 的创建方式

  9. 在 v1/src/App.vue中添加新view文件的router-link链接
    在这里插入图片描述

  10. 在v1/src/views文件夹下创建一个新的VueComponent(也就是.vue文件)

在这里插入图片描述
3. 编写新创建好的.vue文件

  1. template标签中放的是HTML
  2. style标签中放的是CSS
  3. script标签中放的是JS
    注意:vue3的script开始标签中必须要有setup,否则代码不生效!
    在这里插入图片描述
    在这里插入图片描述
  4. 还需要在v1/src/router/index.js文件中配置路由跳转的路径
  5. path就是App.vue中router-link标签中to属性的值
  6. 箭头函数加载的就是对应的.vue文件的路径
    在这里插入图片描述
  7. 写完可以启动项目访问:http://localhost:9090/ 进行测试,如果看到了下图所示的内容,则表明配置成功了

在这里插入图片描述
5. MVC 与 MVVM
MVC 设计模式就是将实现前端业务的所有代码划分为三部分

  • M: Model 模型 , 对应数据相关代码
  • V: View 视图, 对应的是页面标签相关
  • C: Controller 控制器, 对应的是将数据显示到页面中的过程代码
    MVC 设计模式的弊端: Controller 需要频繁的进行 DOM 相关操作(遍历查找元素),比较浪费资源
    MVVM 设计模式就很好的解决了这个问题:
    MVVM 设计模式也是将实现前端业务的所有代码划分为三部分
  • M: Model 模型 , 对应数据相关代码(数据)
  • V: View 视图, 对应的是页面标签相关(页面)
  • VM:ViewModel 视图模型,直接将页面元素与变量进行绑定
    • 视图模型负责将页面中可能发生改变的元素和某个变量在内存中进行绑定
    • 对变量进行监听,当变量发生改变时,会从内存中找到和变量所对应的元素, 让元素进行改动
      这样就不用像 MVC 设计模式中通过遍历查找的方式查找元素了,大大提高了执行的效率

在这里插入图片描述
6. VUE指令练习
6.1 文本相关指令练习 AView.vue

  1. const info = ref(“文本相关的内容”); 定义响应式变量,注意需要导入!
  2. {{变量}} 插值,让此处的文本内容与变量进行绑定
  • v-text=“响应式变量名”:将文本内容与变量进行绑定
  • v-html=“响应式变量名”:将标签内容与变量进行绑定
  1. 关于写法:
  2. 响应式变量的导入语句: import {ref} from “vue”;
  3. 在JS代码中使用响应式变量: console.log(info.value);
  4. 箭头函数: const f = (参数列表)=>{方法体}
<template>
<h1>我是第一个页面</h1>
<!-- 插值指令:将页面显示的文本与响应式变量的值进行绑定
如果修改变量的值,页面显示的文本也会随之改变-->
<span>{{info}}</span>
<p>{{info}}</p>
<h1>{{info}}</h1>
<!-- 响应式变量的值还可以拼接 -->
{{info+'大家好呀!'}}
<hr>
<p v-text="info"></p> <!-- v-text渲染文本内容-->
<p v-html="info"></p> <!-- v-html若有html元素,会按照元素效果进行渲染-->
<button @click="f">点我</button> <!-- 点击事件@click -->
</template><script setup>
import {ref} from "vue";
//1.定义响应式变量,注意:必须导入!
const info = ref('我是info666');
//2.箭头函数
const f = ()=>{
info.value = '我是<mark>info2</mark>';//在JS中使用响应式变量的值,必须.value!!!
}</script><style scoped></style>

6.2 属性绑定练习 BView.vue

  • v-bind:属性名=“变量名”
  • 让HTML元素的 xxx 属性的值与变量值进行绑定
  • 可以简写成 :属性名=“变量名”
<template><h1>属性绑定练习</h1><input type="text" value="kk"> <!--输入框默认值设置为kk--><input type="text" value="info"> <!--输入框默认值设置为info--><input type="text" v-bind:value="info"> <!--输入框value属性与响应式变量info绑定--><input type="text" :value="info"> <!--属性绑定可以简写 去掉前面的v-bind--><hr><a href="url">超链接1</a><a :href="url">超链接2</a>
</template>
<script setup>
import {ref} from "vue";const info = ref('属性绑定999')const url = ref('https://www.jd.com')
url.value = 'https://www.baidu.com';
</script><style scoped></style>

6.3 双向绑定练习 CView.vue
在这里插入图片描述

  1. 双向绑定:页面中的内容发生改变,变量的值也会随之改变
  2. v-model=“变量名” 除了这个其他都是单向绑定
  3. 当需要获取用户输入的内容时使用(输入框/单选/多选/下拉选框等)
  • 之前 DOM 操作需要先获取 html 元素,再获取 html 元素的值,效率较低
  • 现在使用 MVVM 的方式:当页面的值发生改变,变量保存的值也会立即随之改变,可以直接使用
  • 双向绑定的数据会实时更新,但注意用户输入也会影响绑定的数据
<template><h1>双向绑定指令</h1>{{info}}<input type="text" :value="info"><hr><!-- 双向绑定:将页面与下方变量info进行绑定1)info变量的值会显示在绑定的html元素上2)页面html元素发生改变,绑定的info变量的值也会随之改变--><input type="text" v-model="info"><h3>登录页面</h3><input type="text" placeholder="请输入用户名" v-model="user.username"><input type="password" placeholder="请输入密码" v-model="user.password"><br>性别:<input type="radio" name="gender" value="1" v-model="user.gender"><input type="radio" name="gender" value="0" v-model="user.gender"><button @click="f()">登录</button>
</template><script setup>
import {ref} from "vue";
const info = ref('测试数据');
const user = ref({username:'tom',password:'123',gender:"0"})
const f = ()=>{console.log(user.value);console.log(user.value.username);console.log(user.value.password);console.log(user.value.gender);
}
</script><style scoped></style>

6.4 事件绑定练习 DView.vue

  • @click=“f()” 与 v-on:click=“f()” 都是绑定点击事件
  • @keydown.enter=“ent()” 表示绑定敲回车事件
<template><h1>事件绑定指令</h1><!-- 下面两种写法是等价的,我们一般用第2种 --><button v-on:click="f()">按钮</button><button @click="f()">按钮2</button><h3>敲回车事件</h3><input type="text" placeholder="请搜索你喜欢的影片"@keydown.enter="ent()" v-model="search">
</template><script setup>
import {ref} from "vue";
const search = ref('');
const ent = ()=>{alert('您想搜索的内容是:'+search.value);
}const f = ()=>{alert('点击了!');
}
</script><style scoped></style>
6.5 循环指令练习 EView.vue
- v-for="元素 in 数组"  遍历数组 遍历时会生成当前遍历到的元素
- v-for="元素 in 数字n"  遍历数组 从1到数字n,步长为1,数字n可以自定义
- v-for="(元素,下标) in 数组"  第2个参数是当前遍历到的元素下标,从0开始
<template><h1>循环指令</h1><ul><!-- 循环遍历arr数组,uname就是本轮循环遍历到的元素 --><li v-for="uname in arr">{{uname}}</li></ul><ol><!-- 从1开始遍历,一直到数字5,固定每次++,结束数字5可以自定义 --><li v-for="item in 5">{{item}}</li></ol><table border="1px"><caption>商品列表</caption><tr><th>序号</th><th>商品名称</th><th>商品价格</th><th>商品库存</th><th>操作</th></tr><tr v-for="(item,index) in productArr"><td>{{index+1}}</td><td>{{item.title}}</td><td>{{item.price}}</td><td>{{item.num}}</td><td><button @click="del(index)">删除</button></td></tr></table>
</template><script setup>
import {ref} from "vue";const arr = ref(["张三","李四","王五","赵六","钱七"]);const productArr = ref([{title:'小米手机',price:5000,num:800},{title:'华为手机',price:6000,num:900},{title:'苹果手机',price:7000,num:100},{title:'OPPO手机',price:8000,num:200},
]);const del = (index)=>{if(confirm('您确认要删除此条数据吗?')){//删除数组中的元素,从当前index开始,删1个元素productArr.value.splice(index,1);}
}
</script><style scoped></style>

6.6 隐藏显示指令练习 FView.vue
v-if=“变量”:控制元素是否显示

  • true 显示,false 不显示
  • 直接在DOM中跳过该元素渲染,HTML代码中没有该元素
  • 元素首次渲染需要复杂计算或初始化,v-if初次加载的速度快,推荐使用
    v-else: 和最近的未关闭的 v-if 状态取反
    v-show=“变量”:控制元素是否显示
  • true 显示,false 不显示(隐藏元素)
  • 通过设置CSS display:none;让元素消失
  • 当元素需要频繁修改显示状态时推荐使用,不用多次新建删除元素,开销较小
<template><h1>隐藏显示指令</h1><!-- v-if="布尔值" true元素显示 false元素消失false表示该元素不会被渲染到DOM中,会直接跳过这部分内容的渲染 --><p v-if="true">张三</p><p v-if="false">李四</p><p>王五</p><hr><p v-if="isShow">月亮</p><p v-if="isShow">星星</p><!-- v-else是v-if取反 它会找离自己最近的v-if进行取反 --><p v-else>太阳</p><hr><!-- v-if是直接在DOM中跳过该元素渲染,HTML代码中没有该元素 --><p v-if="false">小绿</p><!-- v-show是修改元素的CSS属性display:none;在频繁切换是否显示时才推荐,性能更好 --><p v-show="false">小红</p>
</template><script setup>
import {ref} from "vue";const isShow = ref(false);
</script><style scoped></style>
6.7 计算器练习 GView.vue<template><h1>计算器练习</h1><input type="text" placeholder="请输入数字1" v-model="a"/><input type="text" placeholder="请输入数字2" v-model="b"/><hr><button @click="calc('+')"></button><button @click="calc('-')"></button><button @click="calc('*')"></button><button @click="calc('/')"></button><h4>运算结果:{{result}}</h4>
</template><script setup>
import {ref} from "vue";
//定义响应式变量
const a = ref('');
const b = ref('');
const result = ref('');
//定义箭头函数
const calc = (o)=>{//响应式变量在JS中使用必须.value!//eval("5*2") 结果为10 将字符串形式的算式转为JS进行运算result.value = eval(a.value+o+b.value);
}
</script><style scoped></style>

6.8 猜数字练习 HView.vue

<template><h1>猜数字练习</h1><input type="text" placeholder="请输入1~100之间的整数" v-model="num"><button @click="guess()">猜一猜</button><h3>{{result}}</h3>
</template><script setup>
import { ref } from 'vue';
const num = ref('');
const result = ref('');
//生成一个随机数
let x = parseInt(Math.random()*100)+1;
console.log(x);
const guess = ()=>{if(num.value>x){result.value='猜大了';}else if(num.value<x){result.value='猜小了';}else{result.value='猜对了';}
}
</script><style scoped></style>
6.9 员工列表练习 IView.vue
```html
<template><h1>员工列表练习</h1><input type="text" placeholder="请输入员工姓名" v-model="e.name"><input type="text" placeholder="请输入员工工资" v-model="e.salary"><input type="text" placeholder="请输入员工岗位" v-model="e.job"><button @click="add()">点我添加</button><hr><table border="1px"><tr><th>员工编号</th><th>员工姓名</th><th>员工工资</th><th>员工岗位</th></tr><tr v-for="(emp,i) in arr"><td>{{i+1}}</td><td>{{emp.name}}</td><td>{{emp.salary}}</td><td>{{emp.job}}</td></tr></table>
</template><script setup>
import {ref} from "vue";const e = ref({name:'',salary:'',job:''});
const arr = ref([]);
const add = ()=>{//如果输入框有空值,不允许新增!if(e.value.name.trim()=='' || e.value.salary.trim()=='' || e.value.job.trim()==''){alert('请输入完整信息');return;}//每准备好一个员工数据,就存入arr数组中arr.value.push(e.value);//新增成功后,清空所有输入框e.value = {name:'',salary:'',job:''};//e.value = {};
}</script><style scoped></style>
6.10 个人简历练习
<template><h1>个人简历练习</h1><table border="1px"><tr><td>照片:</td><td><img :src="person.imgUrl" width="100"></td></tr><tr><td>姓名:</td><td>{{person.name}}</td></tr><tr><td>年龄:</td><td>{{person.age}}</td></tr><tr><td>好友:</td><td><ul><li v-for="fName in person.friends">{{fName}}</li></ul></td></tr></table><button @click="loadData()">点击加载数据</button>
</template><script setup>
import {ref} from "vue";//准备一个空对象用来保存数据
const person = ref({name:'',age:'',imgUrl:'',friends:[]});
const loadData = ()=>{person.value = {name:'传奇哥',age:18,imgUrl:'fcq.jpg',friends:['李四','王五','赵六']}
}
</script><style scoped></style>
  1. VUE指令总结
  2. {{变量}}:插值,让此处的文本内容和变量进行绑定
  3. v-text=“变量”:让元素的文本内容和变量进行绑定
  4. v-html=“变量”:让元素的 html 标签内容和变量进行绑定
  5. v-bind:属性名=“变量”:让 xxx 属性的值和变量进行绑定,简写是把 v-bind 去掉
  6. v-model=“变量”:让控件的值和变量进行双向绑定
    应用场景:当需要获取用户输入内容时使用
    (当变量的值改变时,控件的值会随之改变;当控件中用户输入的值改变时,变量的值也会随之改变)
  7. v-on:事件名=“方法”:事件绑定,简写@事件名
  8. v-for=“(变量,下标) in 数组”:循环遍历指令,遍历的过程中生成遍历到的当前元素
  9. v-if=“变量”:控制元素是否显示,true 显示,false 不显示(直接不渲染该元素)
  10. v-else 和 v-if 的状态取反
  11. v-show=“变量”:控制元素是否显示,true 显示,false 不显示(隐藏元素)

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

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

相关文章

简单Qt贪吃蛇项目

目录 先看效果 项目介绍 界面一&#xff1a;游戏大厅界面 界面二&#xff1a;关卡选择界面​编辑 界面三&#xff1a;游戏界面 游戏大厅页面 游戏关卡选择页面 游戏房间页面 封装贪吃蛇数据结构 初始化游戏房间界面 设置窗口大小、标题、图标等 蛇的移动 初始化贪…

RocketMQ Dashboard安装

RocketMQ Dashboard 是一个基于 Web 的管理工具&#xff0c;用于监控和管理 RocketMQ 集群。它提供了一个用户友好的界面&#xff0c;使管理员能够轻松地查看和操作 RocketMQ 系统中的各种组件和状态。 主要功能包括&#xff1a; 集群管理: 监控和管理 NameServer 和 Broker …

大数据-65 Kafka 高级特性 分区 Broker自动再平衡 ISR 副本 宕机恢复再重平衡 实测

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【vulnhub】W34kn3ss 1靶机

安装靶机 下载地址&#xff1a;https://www.vulnhub.com/entry/w34kn3ss-1,270/# 信息收集 靶机扫描 nmap 192.168.93.0/24 打开端口为22、80、443 网址访问 目录扫描 dirsearch -u http://192.168.93.162 在网址后面拼接扫到的目录&#xff0c;在/test目录下发现信息 提…

微型导轨:光学仪器精准定位的支撑者

微型导轨是指宽度在25mm以下的导轨系统&#xff0c;通常由导轨和滑块组成&#xff0c;具有体积小、重量轻、精度高、噪音低、寿命长等特点。主要用于支撑和定位光学元件&#xff0c;如镜子、透镜、滤光片等。微型导轨通过提供高精度的运动控制&#xff0c;‌有利于提高设备的性…

【Tessent IJATG Users Manual】【Ch5】IJTAG Network Insertion

The IJTAG Network Insertion FlowIJTAG Network Insertion ExampleModification of the IJTAG Network Insertion Flow How to Edit or Modify a DftSpecificationEdit or Modify MethodDftSpecification Examples IJTAG Network Insertion 可以将已有的 instrument 连接起来&…

Docker学习(6):Docker Compose部署案例

一、docker-compose部署mysql 1、准备镜像 2、编写my.cnf配置文件 # 服务端参数配置 [mysqld] usermysql # MySQL启动用户 default-storage-engineINNODB # 创建新表时将使用的默认存储引擎 character-set-serverutf8mb4 # 设置mysql服务端默认字符集…

离线+树状数组,ABC253 F - Operations on a Matrix

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 F - Operations on a Matrix 二、解题报告 1、思路分析 我们通过差分树状数组&#xff0c;可以轻松解决操作1 操作3我们也可以通过树状数组来获取对应列的值 关键是操作2会对操作3造成影响 所以我们先对…

【Linux】yum软件包管理器(使用、生态、yum源切换)

目录 1.yum-软件包管理器&#x1f638;1.1yum使用方法1.2什么是yum&#xff1f;&#x1f638;1.3yum的周边生态1.4yum源切换1.4.1 查看系统本身yum源1.4.2 软件源1.4.3yum源配置 1.yum-软件包管理器 以下操作需要联网的情况下进行 &#x1f638;1.1yum使用方法 安装软件时由于需…

【学习笔记】Day 7

一、进度概述 1、DL-FWI基础入门培训笔记 2、inversionnet_train 试运行——未成功 二、详情 1、InversionNet: 深度学习实现的反演 InversionNet构建了一个具有编码器-解码器结构的卷积神经网络&#xff0c;以模拟地震数据与地下速度结构的对应关系。 &#xff08;一…

03 库的操作

目录 创建查看修改删除备份和恢复查看连接情况 1. 创建 语法 CRATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] …] create_specification:  CHARACTER SET charset_name  CPLLATE collation_name 说明&#xff1a; 大写的标识关键…

基于YOLOv8的小麦种子品质检测系统

基于YOLOv8的小麦种子品质检测系统 (价格85) 包含 [bad seed, healthy seed, impurity] 3个类 通过PYQT构建UI界面&#xff0c;包含图片检测&#xff0c;视频检测&#xff0c;摄像头实时检测。 &#xff08;该系统可以根据数据训练出的yolov8的权重文件&#xff0c;运用在…

【多线程-从零开始-捌】代码案例2—阻塞队列

什么是阻塞队列 阻塞队里是在普通的队列&#xff08;先进先出队列&#xff09;基础上&#xff0c;做出了扩充 线程安全 标准库中原有的队列 Queue 和其子类&#xff0c;默认都是线程不安全的 具有阻塞特性 如果队列为空&#xff0c;进行出队列操作&#xff0c;此时就会出现阻…

vue2知识点4(组件 全局组件 局部组件 父子组件的生命周期钩子函数 父子组件之间的数据传递 局部路由)

目录 一、组件 1. 介绍 2. 全局组件 使用全局组件 实例和组件之间的数据不互通 组件复用 data函数式和data对象的区别: 注意 3. 局部组件 全局组件和局部组件的区别: 注册多个子组件&#xff08;局部组件&#xff09; 4. 父子组件的生命周期钩子函数 加载渲染过程…

RIP路由协议之网络工程师软考中级

几种常见的路由协议 路由协议名称路由协议分类&#xff08;工作原理&#xff09;协议分类&#xff08;工作区域&#xff09;路由算法RIP距离矢量IGPBellman-FordOSPF-ISIS链路状态IGPDijkstraBGP路径向量EGP/ IGP称为内部网关协议&#xff08;I人&#xff0c;内向&#xff09…

python判断和循环语句

python判断语句 1、单个条件判断 if 条件:满足条件要做的事情1满足条件要做的事情2 else:不满足条件要做的事情3不满足条件要做的事情2 2、多个条件判断&#xff08;满足条件1就不会判断条件2&#xff09; else可以省略不写 if 条件1:满足条件1要做的事情a满足条件1要做的事…

爆款短视频素材去哪里找?做抖音短视频爆款热门素材网站分享

爆款短视频素材寻宝&#xff1a;哪里是创作者的宝藏地&#xff1f; 在短视频创作的世界里&#xff0c;找到高质量的素材是打造爆款视频的关键。无论你是初入短视频领域的新手&#xff0c;还是拥有庞大粉丝群的资深创作者&#xff0c;选择合适的视频素材网站可以极大提升你的视…

NET 定时器 Timer和线程Thread

是否可以更新UI线程的内容 》》》资源占用&#xff1a;‌ 》定时器可以的&#xff0c;不存在跨线程问题 》Thread创建的线程&#xff0c;不能更新UI线程的内容&#xff0c; 存在跨线程 Control.CheckForIllegalCrossThreadCalls false;//默认是True 》》执行方式&#xff…

软考:软件设计师 — 11.UML 建模

十一. UML 建模 UML 建模部分是下午场考试中第三个题目&#xff0c;分值 15 分。先介绍一下这类题目的考查形式。 1. 考察形式 &#xff08;1&#xff09;类图与对象图 填类名&#xff0c;方法名&#xff0c;属性名填关系填多重度 UML 中四种基本关系&#xff1a; 依赖关…