vue脚手架的基础搭建过程

MVVM架构

Vue框架底层设计遵循MVVM架构。

Model层(M)模型层(业务逻辑层)

View层(V)视图层 主管UI

ViewModel层(VM)

将项目代码划分清晰的层次结构后,非常有利于后期代码功能维护。如果需要修改ui,则只需要修改view层代码;如果需要修改业务逻辑,则只需要修改model层代码。

基于脚手架的环境开发vue项目

开发vue项目的方式主要有两种:

  1. 基于vue.js:在html中引入vue.js,让vue.js管理页面的div#app元素。

  2. 基于脚手架环境:通过vue脚手架环境可以方便的创建一个通用的vue项目框架模板,在此基础之上开发vue向更加便捷。适合工程化开发。

vue脚手架工具:VueCLIVite

VueCLI提供了简单的创建项目包、vue项目开发模式。需要安装VueCLI

npm config get registry  # 查看npm源
npm set registry https://registry.npmmirror.com  # 设置国内npm镜像源
​
npm  install  -g  @vue/cli

VueCLI项目很大,文件很多,大多数都在node_modules中,所以以后传代码不会带着node_modules,大家下载了项目后由于缺少依赖模块,项目跑不起来的。如果需要运行项目,则应该在项目目录下执行命令:npm install。将会默认读取package.json,下载所需要的依赖包,就可以正常跑项目了。npm run serve

脚手架的运行过程: 当脚手架启动时,将会打开 public/index.html ,并且在该网页中运行 main.js ,将会创建 Vue 对象,通过 Vue 对象来管理 index.html 中的 #app 内容的显示。初始化状态下,默认将 App.vue 组件中的内容渲染到 #app 中,从而看到页面效果。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
​
Vue.config.productionTip = false
​
new Vue({router,store,render: h => h(App)
}).$mount('#app')

VueCLI项目中,所有的资源都会显示在div#app中。 在此过程中就需要实现根据不同的请求资源路径,显示不同的页面内容。这个功能由VueRouter脚手架的路由系统来管理。

脚手架路由系统(VueRouter)的设计与应用

平时在开发项目的过程中,需要访问不同的路径来看到不同的页面内容,在脚手架项目中,由VueRouter来管理项目的路由系统。 实现:访问不同的路由地址,看到不同的页面。

案例:写一个页面:首页,该页面只有首页两个字。访问:http://localhost:8080/index时,看到该页面。

实现思路:

  1. 先准备好一个vue组件:views/Index.vue。写好内容。

  2. 手动配置路由,使得当访问:/index时,看到该组件。

  3. 测试路由地址即可。http://localhost:8080/index

案例:写个登录页面:账号密码两个输入框,一个提交按钮。要求访问地址:

http://localhost:8080/login 时,看到该登录页面。

案例:写个注册页面:账号、密码、确认密码、手机号,一个提交按钮。要求访问地址:

http://localhost:8080/register时,看到该注册页面。

Vue文件的语法

在脚手架项目中,每一个vue文件都成为是一个组件。一个组件封装了页面中的局部内容(包括局部内容的html结构、局部内容的css样式、局部内容的js功能)。这样就需要研究一下.vue文件的语法。

.vue文件的基础结构
<template><div></div>
</template>
​
<script>export default {}
</script>
​
<style lang="scss" scoped>
​
</style>

template部分用于定义当前组件的页面结构。

注意:template中的内容有且仅有一个根元素。

script部分用于定义当前组件的js脚本。

注意:可以在script中通过data来定义响应式变量,通过methods定义方法。

style部分用于定义当前组件的css样式。

在style标签中可以添加scoped属性,一旦style标签上有scoped属性,则在此style段中定义的样式,仅仅针对当前组件的生效(原理是当前组件的每一个元素都会生成一个属性,然后vue将在style中定义的选择器改为使用属性选择器,仅仅选择当前组件内的元素)。如果没有scoped属性,则样式一旦加载,全局生效。

Vue的常用指令

  1. v-on 绑定事件

  2. v-bind 动态绑定属性

  3. v-show 设置元素显示或隐藏 display:none

  4. v-if v-else-if v-else 判断元素是否输出

  5. v-html v-pre v-text

  6. v-for

案例:编写一个组件页面:views/Directive.vue 当访问:/directive时,看到它。

v-for指令的用法

v-for指令用于重复输出当前元素。

案例:写一个新的组件页面:For.vue 当访问: /for时看到它。

场景1

遍历字符串数组输出每一个列表项元素:

data: {nav: ['京东超市','京东家电','秒杀','拍卖','京东生鲜','PLUS会员']
}
<ul><li v-for="item in nav">{{item}}</li>
</ul>

上述写法,类似于:

for(let i=0; i<nav.length; i++){let item = nav[i]输出  `<li> ${item} </li>`
}
场景2

遍历对象数组输出每一个列表项元素:

data: {movies: [{id:1, name:'交换余生', showingon:'2021-10-10', duration:124},{id:2, name:'杀手', showingon:'2022-10-09', duration:114},{id:3, name:'功夫', showingon:'2023-1-10', duration:194},{id:4, name:'功夫熊猫', showingon:'2011-05-10', duration:141}]
}
<div><div v-for="item in movies" :key="item.id">ID:{{item.id}}  &nbsp;&nbsp;|&nbsp;&nbsp;名称:{{item.name}} &nbsp;&nbsp;|&nbsp;&nbsp;上映时间:{{item.showingon}} &nbsp;&nbsp;|&nbsp;&nbsp;时长:{{item.duration}}分钟</div>
</div>
拓展1

在使用v-for遍历输出数组数据的同时,引用数组的下标:

<div v-for="(item,i) in movies" :key="item.id">..{{i}} 下标
</div>
拓展2

纯粹的按照数量重复输出元素:

<div v-for="item in 100" :key="item">内容</div>
:key的作用

v-for指令一般都需要配一个v-bind:key(简写 :key)来为每一个列表项设置一个唯一标识符(简单理解为每一个item一个名字)。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了,后续由于列表数据的变化需要重新渲染列表时,将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过(比较列表项的key在原始列表中是否已经存在),如果已经渲染过,就不会重新创建DOM了。

那么一般将什么设置为:key的值?

<div v-for="(item,i) in list" :key="item.id"></div>  id是唯一属性
<div v-for="(item,i) in list" :key="i"></div>  下标 但不建议

:key的数据类型只能是number和string,不能是对象。同一个列表中的列表项的key不能重复,否则控制台报错。

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

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

相关文章

IP地址定位技术发展与未来趋势

随着互联网的快速发展&#xff0c;人们对网络的需求和依赖程度越来越高。在海量的网络数据传输中&#xff0c;IP地址定位技术作为网络安全与信息追踪的重要手段&#xff0c;其精准度一直备受关注。近年来&#xff0c;随着技术的不断进步&#xff0c;IP地址定位的精准度得到了显…

【wireshark】基础学习

TOC 查询tcp tcp 查询tcp握手请求的代码 tcp.flags.ack 0 确定tcp握手成功的代码 tcp.flags.ack 1 确定tcp连接请求的代码 tcp.flags.ack 0 and tcp.flags.syn 1 3次握手后确定发送成功的查询 tcp.flags.fin 1 查询某IP对外发送的数据 ip.src_host 192.168.73.134 查询某…

485 实验

485(一般称作 RS485/EIA-485)隶属于 OSI 模型物理层&#xff0c;是串行通讯的一种。电气特性规定 为 2 线&#xff0c;半双工&#xff0c;多点通信的类型。它的电气特性和 RS-232 大不一样。用缆线两端的电压差值 来表示传递信号。RS485 仅仅规定了接受端和发送端的电气特性。它…

python趣味编程-5分钟实现一个太空大战游戏(含源码、步骤讲解)

飞机战争游戏系统项目是使用Python编程语言开发的,是一个简单的桌面应用程序。 Python 中的飞机战争游戏使用pygame导入和随机导入。 Pygame 是一组跨平台的 Python 模块,专为编写视频游戏而设计。它包括设计用于 Python 编程语言的计算机图形和声音库。

以jar包形式 部署Spring Boot项目

后端部署 当你将Spring Boot项目打包成JAR文件并上传到服务器时&#xff0c;可以考虑在服务器上创建一些目录来存放这个JAR文件以及相关的配置文件。以下是一些常见的目录结构建议&#xff1a; /opt/your-project-name/&#xff1a; 在/opt目录下创建一个与你的项目名称相关的…

【word技巧】Word制作试卷,ABCD选项如何对齐?

使用word文件制作试卷&#xff0c;如何将ABCD选项全部设置对齐&#xff1f;除了一直按空格或者Tab键以外&#xff0c;还有其他方法吗&#xff1f;今天分享如何将ABCD选项对齐。 首先&#xff0c;我们打开【替换和查找】&#xff0c;在查找内容输入空格&#xff0c;然后点击全部…

省市区编码sql

CREATE TABLE area (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键,code varchar(64) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 编码,name varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 名称,parent_code varchar(64) COLLATE utf8mb4_bin DEFAULT NULL CO…

20个CSS函数-释放设计创造力和响应能力

20个CSS函数-释放设计创造力和响应能力 CSS是网页设计的核心&#xff0c;使开发者和设计者能够制作出令人叹为观止和反应迅速的网页布局。CSS函数通过引入动态性和多功能性提升了我们的设计能力。在本文中&#xff0c;我们将开始讲解20个CSS函数。 1.rgba()&#xff1a;定义颜…

结构体打印

打印输出 通过注解来派生Debug trait&#xff0c;才可以通过println!进行打印。默认的占位符是{}&#xff0c;底层是按照std::fmt::Display具体实现进行格式化输出。 {}、{:?}、{#?}是格式化的几种形式&#xff0c;{#?}是更加易读的JSON话格式。 方法 结构体声明方法&…

【应用前沿】索托斯平台:个性化推荐变身SaaS 服务

随着互联网技术和人工智能的迅速发展&#xff0c;面对海量的数据和资源&#xff0c;如何快速准确地为每个用户提供其感兴趣的内容&#xff0c;成为我们亟待解决的问题。个性化推荐系统正是为了解决这一问题而诞生的&#xff0c;它能够通过对用户行为的分析和挖掘&#xff0c;为…

[Ubuntu]RT810xE--网线已拔出--问题解决

0 环境 ubuntu 22.04.3 LTSDell Inspiron 15 5547windows/ubuntu 双系统 1 问题说明 Dell 笔记本安装的 Ubutun 系统&#xff0c;有线网络无法使用&#xff0c;一直显示 “网线已拔出”。 网上一查&#xff0c;才了解到主要原因&#xff1a;网卡驱动安装错误。系统默认安装…

5-6求1-20的阶乘和

#include<stdio.h> //求阶乘 int main(){int n;double sum0;//求和&#xff1a;一点一点加int t1;for (n1;n<15;n){tt*n;sumsumt;}printf("结果是&#xff1a;%22.15e \n",sum);return 0; }为啥最后是%22.15e呢&#xff1f; 因为这个求和的结果太大了 所以转…

转移表达式:<![CDATA[ ]]>

你是否遇到过&#xff1a;在mybatis 时我们sql是写在xml 映射文件中&#xff0c;如果写的sql中有一些特殊的字符的话&#xff0c;在解析xml文件的时候会被转义&#xff0c;但我们不希望他被转义&#xff0c;所以我们要使用<![CDATA[ ]]>来解决。 <![CDATA[ ]]> …

【译】什么时候使用 Spring 6 JdbcClient

原文地址&#xff1a;Spring 6 JdbcClient: When and How to Use it? 一、前言 自 Spring 6.1 起&#xff0c;JdbcClient 为 JDBC 查询和更新操作提供了统一的客户端 API&#xff0c;从而提供了更流畅、更简化的交互模型。本教程演示了如何在各种场景中使用 JdbcClient。 二…

【VScode】安装配置、插件及远程SSH连接

一、VSCode安装 二、配置安装插件 三、配置远程连接SSH 四、MinGW 一、VSCode安装 VS官网 Visual Studio Code - Code Editing. Redefined下载安装包&#xff1a; 二、配置安装插件 安装中文插件 配置字体为20 配置文件–>首选项->设置->Font Size为20 设置 VSC…

【libGDX】使用Mesh绘制圆形

1 前言 使用Mesh绘制三角形 中介绍了绘制三角形的方法&#xff0c;使用Mesh绘制矩形 中介绍了绘制矩形的方法&#xff0c;本文将介绍绘制圆形的方法。 libGDX 以点、线段、三角形为图元&#xff0c;没有提供绘制圆形的接口。要绘制圆形边框&#xff0c;必须通过割圆法逼近圆形&…

问题:vue2使用watch监视对象属性,但是这个监视只执行了第一次,后面就没反应了

错误版本 这个版本node.a的监视只会执行一次 data(){node:{}, }, watch:{"node.a":{handler(newVal,oldVal){console.log("node.a改变了")}}, }正确版本 这个可以正常监视node.a data(){node:{a:,}, }, watch:{"node.a":{handler(newVal,old…

macos创建xcframework及签名

前言 Framework 可以理解为封装了共享资源的具有层次结构的文件夹&#xff0c;共享资源可以是 nib文件、国际化字符串文件、头文件、库文件等等。它同时也是一个 Bundle&#xff0c;里面的内容可以通过 Bundle 相关 API 来访问。Framework 可以是 static framework 或 dynamic…

CSS中实现元素居中的七种方法

在前端开发中&#xff0c;经常需要将元素居中显示&#xff0c;CSS提供了多种技术方法来实现元素的居中&#xff0c;在不同场景下有不同的使用方法、不同的效果&#xff0c;需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。 一、元素分类…

[递归]有理数树

有理数树 题目描述 二叉树指的是一种树形结构&#xff0c;它的每个结点有至多两个子节点。 现在有一个由有理数组成的无穷二叉树形状如下&#xff1a; 1/1______|______| |1/2 2/1___|___ ___|___| | | | 1/3 3/2 2/3 3/1在p/q结点位…