如何设计网站制作方案,台州市建设局招聘网站,网站开发的技术栈,文化传媒有限公司MVVM架构
Vue框架底层设计遵循MVVM架构。
Model层#xff08;M#xff09;模型层#xff08;业务逻辑层#xff09;
View层#xff08;V#xff09;视图层 主管UI
ViewModel层#xff08;VM#xff09; 将项目代码划分清晰的层次结构后#xff0c;非常有利于后期代…MVVM架构
Vue框架底层设计遵循MVVM架构。
Model层M模型层业务逻辑层
View层V视图层 主管UI
ViewModel层VM 将项目代码划分清晰的层次结构后非常有利于后期代码功能维护。如果需要修改ui则只需要修改view层代码如果需要修改业务逻辑则只需要修改model层代码。 基于脚手架的环境开发vue项目
开发vue项目的方式主要有两种 基于vue.js在html中引入vue.js让vue.js管理页面的div#app元素。 基于脚手架环境通过vue脚手架环境可以方便的创建一个通用的vue项目框架模板在此基础之上开发vue向更加便捷。适合工程化开发。
vue脚手架工具VueCLI、Vite。
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时看到该页面。
实现思路 先准备好一个vue组件views/Index.vue。写好内容。 手动配置路由使得当访问/index时看到该组件。 测试路由地址即可。http://localhost:8080/index 案例写个登录页面账号密码两个输入框一个提交按钮。要求访问地址
http://localhost:8080/login 时看到该登录页面。
案例写个注册页面账号、密码、确认密码、手机号一个提交按钮。要求访问地址
http://localhost:8080/register时看到该注册页面。 Vue文件的语法
在脚手架项目中每一个vue文件都成为是一个组件。一个组件封装了页面中的局部内容包括局部内容的html结构、局部内容的css样式、局部内容的js功能。这样就需要研究一下.vue文件的语法。
.vue文件的基础结构
templatediv/div
/template
scriptexport default {}
/script
style langscss scoped
/style
template部分用于定义当前组件的页面结构。 注意template中的内容有且仅有一个根元素。 script部分用于定义当前组件的js脚本。 注意可以在script中通过data来定义响应式变量通过methods定义方法。 style部分用于定义当前组件的css样式。 在style标签中可以添加scoped属性一旦style标签上有scoped属性则在此style段中定义的样式仅仅针对当前组件的生效原理是当前组件的每一个元素都会生成一个属性然后vue将在style中定义的选择器改为使用属性选择器仅仅选择当前组件内的元素。如果没有scoped属性则样式一旦加载全局生效。 Vue的常用指令 v-on 绑定事件 v-bind 动态绑定属性 v-show 设置元素显示或隐藏 display:none v-if v-else-if v-else 判断元素是否输出 v-html v-pre v-text v-for
案例编写一个组件页面views/Directive.vue 当访问/directive时看到它。 v-for指令的用法
v-for指令用于重复输出当前元素。
案例写一个新的组件页面For.vue 当访问 /for时看到它。
场景1
遍历字符串数组输出每一个列表项元素
data: {nav: [京东超市,京东家电,秒杀,拍卖,京东生鲜,PLUS会员]
}
ulli v-foritem in nav{{item}}/li
/ul
上述写法类似于
for(let i0; inav.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}]
}
divdiv v-foritem in movies :keyitem.idID{{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 :keyitem.id..{{i}} 下标
/div
拓展2
纯粹的按照数量重复输出元素
div v-foritem in 100 :keyitem内容/div
:key的作用
v-for指令一般都需要配一个v-bind:key简写 :key来为每一个列表项设置一个唯一标识符简单理解为每一个item一个名字。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了后续由于列表数据的变化需要重新渲染列表时将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过比较列表项的key在原始列表中是否已经存在如果已经渲染过就不会重新创建DOM了。
那么一般将什么设置为:key的值
div v-for(item,i) in list :keyitem.id/div id是唯一属性
div v-for(item,i) in list :keyi/div 下标 但不建议
:key的数据类型只能是number和string不能是对象。同一个列表中的列表项的key不能重复否则控制台报错。
