MVVM架构
View层（V）视图层 主管UI
ViewModel层（VM）
将项目代码划分清晰的层次结构后，非常有利于后期代码功能维护。如果需要修改ui，则只需要修改view层代码；如果需要修改业务逻辑，则只需要修改model层代码。
基于脚手架的环境开发vue项目
vue脚手架工具：VueCLI、Vite。
VueCLI提供了简单的创建项目包、vue项目开发模式。需要安装VueCLI。
npm config get registry # 查看npm源
npm set registry https://registry.npmmirror.com # 设置国内npm镜像源
npm install -g @vue/cliVueCLI项目很大，文件很多，大多数都在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时，看到该页面。
实现思路：
案例：写个登录页面：账号密码两个输入框，一个提交按钮。要求访问地址：
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中的内容有且仅有一个根元素。
在style标签中可以添加scoped属性，一旦style标签上有scoped属性，则在此style段中定义的样式，仅仅针对当前组件的生效（原理是当前组件的每一个元素都会生成一个属性，然后vue将在style中定义的选择器改为使用属性选择器，仅仅选择当前组件内的元素）。如果没有scoped属性，则样式一旦加载，全局生效。
Vue的常用指令
-
v-if v-else-if v-else 判断元素是否输出
-
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}} |
名称：{{item.name}} |
上映时间：{{item.showingon}} |
时长：{{item.duration}}分钟
</div>
</div>拓展1
<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不能重复，否则控制台报错。
原文地址:https://blog.csdn.net/weixin_68522070/article/details/134546187
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_2767.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
