企业官网建设流程全解析

jfinal网站开发,招商网站建设多少钱,网站设计一般要求,中山网站的优化文章目录 Ⅰ. 脚手架一、Vue开发方式1. 传统开发模式2. 工程化开发模式 二、准备工程化环境1. 安装 Nodejs2. 安装 yarn 或 pnpm 三、创建Vue工程化项目四、认识脚手架目录及文件五、分析3个入口文件的关系六、Vue单文件七、setup简写 插值表达式 响应式1. 传统写法2. 现代写…文章目录Ⅰ. 脚手架一、Vue开发方式1. 传统开发模式2. 工程化开发模式二、准备工程化环境1. 安装 Nodejs2. 安装 yarn 或 pnpm三、创建Vue工程化项目四、认识脚手架目录及文件五、分析3个入口文件的关系六、Vue单文件七、setup简写 插值表达式 响应式1. 传统写法2. 现代写法推荐3. 代码示例Ⅱ. 指令一、Vue中的常用指令二、内容渲染指令v-html v-text三、属性绑定指令v-bind四、事件绑定指令v-on五、条件渲染指令v-show v-if六、列表渲染指令v-for案例书架为什么要给 v-for 添加 key七、双向绑定指令v-modelⅠ. 脚手架一、Vue开发方式1. 传统开发模式举个例子scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscriptVue.createApp({setup(){constmsgHello Worldreturn{msg}}}).mount(#app)/script判断是否为传统写法的依据是否使用new Vue()new Vue({...})是 Vue 2 的标准写法也是 “全局 Vue 对象 根实例” 的模式。现代 Vue 3 项目里一般不会直接用new Vue()而是用createApp(App)来创建应用实例。是否在 CDN 环境下如果你直接在浏览器里script srchttps://cdn.jsdelivr.net/.../vue.js/script然后写new Vue({...})通常就是快速 demo / 教学 / 小型页面不使用模块化打包工具。语法风格使用datamethodsVue.set这种选项式 API也属于传统开发模式。现代 Vue 3 推荐使用组合式 API script setup不需要Vue.set逻辑可拆分为可复用的 composable 函数。优点简单、上手快缺点功能单一、开发体验差2. 工程化开发模式import{createApp,ref}fromvueimportAppfrom./App.vuecreateApp(App).mount(#app)在构建工具Vite/Webpack环境下开发Vue这是最推荐的、也是企业采用的方式。其中App.vue是一个单文件组件SFC会被构建工具编译成JS模块。优点功能全面开发体验好…缺点目录结构复杂理解难度提升特点教学版CDN模块化ES Module适用场景快速演示、小项目现代大型项目引入方式script srcvue.jsimport { createApp } from vue组件写法直接写在createApp({ setup(){...} })单文件组件.vue逻辑写在setup()推荐度初学者实战项目二、准备工程化环境1. 安装 Nodejs官网https://nodejs.org/en/node-vnpm-vnpm换源// 查看npm源npmconfig get registry // 默认是指向 https://registry.npmjs.org/也就是官方源 // 为了提高npm下载速度, 可以给npm换源 // 国内源有很多我这里用淘宝源吧。毕竟是大公司会比较稳定npmconfigsetregistry https://registry.npmmirror.com // 再一次查看npm源npmconfig get registry2. 安装 yarn 或 pnpmyarn和pnpm、还有npm三者的功能类似都是包管理工具用来下载或删除模块包性能上yarn和pnpm优于npm。# windows系统npminstallyarn-gnpminstallpnpm-g ___________________________________# mac系统sudonpminstallyarn-gsudonpminstallpnpm-g检测是否安装成功yarn-vpnpm-v三、创建Vue工程化项目选定一个存放位置比如选择桌面根据自己情况选择D盘或E盘等执行命令npm create vuelatest会安装并执行 create-vue它是 Vue 官方的项目脚手架工具进入项目根目录:cd 项目名称安装 vue 等模块依赖:npm i启动项目npm run dev会开启一个本地服务器浏览器网址栏输入http://localhost:5173四、认识脚手架目录及文件五、分析3个入口文件的关系main.js整个项目打包的入口用于创建应用是 Vue 代码通向网页代码的桥梁App.vueVue 代码的入口根组件index.html项目入口网页六、Vue单文件vue 推荐采用.vue的文件来开发项目一个 vue 文件通常有3部分组成script(JS)template(HTML)style(CSS)一个 vue 文件是独立的模块作用域互不影响style 部分通常配合scoped属性保证样式只针对当前template内的标签生效vue 文件会被vite打包成 js、css 等最终交给 index.html 通过浏览器呈现效果七、setup简写 插值表达式 响应式1. 传统写法scriptexportdefault{setup(){// ...constmsgHello Vue3Vitereturn{msg}}}/scripttemplateh1{{msg}}/h1/templatestyle/style2. 现代写法推荐script setupconstmsgHello Vue3Vite/scripttemplateh1{{msg}}/h1/templatestyle/style3. 代码示例script setup// 导入响应式函数import{reactive,ref}fromvue// 字符串constmsgref(Hello Vue3Vite)// 对象constobjreactive({name:小vue,age:9})// 函数functionfn(){return100}/scripttemplate!--1.直接放变量--h1{{msg}}/h1!--2.对象.属性--p我叫{{obj.name}},今年{{obj.age}}岁/p!--3.三元表达式--p{{obj.age18?已成年:未成年}}/p!--3.算数运算--p来年我就{{obj.age1}}岁了/p!--4.函数的调用--pfn的返回值是:{{fn()}}/p!--4.方法的调用--p{{msg}}中含有{{msg.split( ).length}}个单词/p/templateⅡ. 指令一、Vue中的常用指令指令是 Vue 提供的带有v-前缀的特殊标签属性用来增强标签、提高标签数据渲染的能力。vue3 中的指令按照不同的用途可以分为如下六大类内容渲染指令v-html、v-text属性绑定指令v-bind事件绑定指令v-on条件渲染指令v-show、v-if、v-else、v-else-if列表渲染指令v-for双向绑定指令v-model二、内容渲染指令v-htmlv-text作用辅助开发者渲染 DOM 元素的文本内容。v-text类似innerText类似 innerText使用该语法只会覆盖 p 标签原有内容不会解析标签。v-html类似innerHTML类似 innerHTML使用该语法不仅会覆盖 p 标签原有内容还能够将 HTML 标签的样式呈现出来。代码示例script setupimport{ref}fromvueconststrref(span stylecolor:red;Hello Vue3Vite/span)/scripttemplatedivp v-textstr/pp v-htmlstr/p/div/templatestyle scoped/style三、属性绑定指令v-bind作用把表达式的结果与标签的属性动态绑定。语法如下所示v-bind:属性名表达式可简写成:属性名表达式代码实例script setupimport{ref}fromvueconsturlref(http://www.baidu.com)/scripttemplatediv!--v-bind:标签属性动态绑定--a v-bind:hrefurl百度一下/a!--简写--a:hrefurl百度一下/a/div/template四、事件绑定指令v-on作用给元素绑定事件。有三种不同语法以给按钮添加点击事件为例button v-on:事件名内联语句按钮/buttonbutton v-on:事件名处理函数按钮/buttonbutton v-on:事件名处理函数(实参列表)按钮/buttonv-on可以简写为处理函数需要在script下声明代码示例script setupimport{ref}fromvue// 响应式数据 计数器constcountref(0)// 无参函数constincrease(){count.value}// 有参函数constadd(n){count.valuen}/scripttemplatedivp{{count}}/p!--1.内联语句--button v-on:clickcount1/button!--2.调用无参函数--button v-on:clickincrease1/button!--3.调用有参函数--button v-on:clickadd(3)3/buttonbutton v-on:clickadd(5)5/button!--4.简写 click--button clickadd(5)5/button/div/template五、条件渲染指令v-showv-if作用辅助开发者控制 DOM 的显示与隐藏。v-show作用控制元素显示隐藏语法v-show布尔表达式表达式值为 true 显示false 隐藏原理切换display:none控制显示隐藏场景适合需要频繁切换显示隐藏的场景v-if作用控制元素显示隐藏条件渲染语法v-if布尔表达式表达式值 true 显示false 隐藏原理基于条件判断创建或移除 DOM 元素场景适合不需要频繁切换的场景v-else和v-else-if作用辅助 v-if 进行判断渲染语法v-else v-else-if表达式需要紧接着 v-if 使用代码示例scriptsetupimport{ref}fromvue// 是否可见constvisibleref(true)// 是否登录constisLoginref(true)// 成绩constmarkref(100)/scripttemplate!-- v-show --divclassredv-showvisible/div!-- v-if --divclassgreenv-ifvisible/divhr!-- 双分支的条件渲染 --divv-ifisLoginxxx, 欢迎回来/divdivv-else你好, 请登录/divhr!-- 多分支的条件渲染: 1. 90及其以上优秀 2. 70到90之间良好 3. 其他的差 --divv-ifmark 90优秀/divdivv-else-ifmark 70良好/divdivv-else差/div/templatestylescoped.red, .green{width:200px;height:200px;}.red{background:red;}.green{background:green;}/style六、列表渲染指令v-for作用基于数组进行遍历列表渲染v-for指令需要使用(item, index) in 目标结构形式的特殊语法其中item数组中的每一项index每一项的索引不需要可以省略目标结构被遍历的数组/对象/数字script setupimport{ref}fromvue// 数字数组constnumsref([11,22,33,44])// 商品列表constgoodsListref([{id:1,name:篮球,price:299},{id:2,name:足球,price:99},{id:3,name:排球,price:199}])// 准备对象constobj{id:10001,name:liren,age:9}/scripttemplatedivul!--遍历数字数组--li v-for(item, index) in nums{{item}}{{index}}/li/uldivclassgoods-list!--遍历对象数组--divclassgoods-itemv-foritem in goodsListpid{{item.id}}/ppname{{item.name}}/ppprice{{item.price}}/p/divul!--遍历对象--li v-for(value, key, index) in obj{{value}}{{key}}{{index}}/li/ulul!--遍历数字--li v-for(item, index) in 5{{item}}{{index}}/li/ul/div/div/templatestyle scoped/style案例书架根据左侧数据渲染出右侧列表v-for点击删除按钮时应该把当前行从列表中删除获取当前行的index利用splice删除!--format--script setupimport{ref}fromvue// 图书列表constbookListref([{id:1,name:《红楼梦》,author:曹雪芹},{id:2,name:《西游记》,author:吴承恩},{id:3,name:《三国演义》,author:罗贯中},{id:4,name:《水浒传》,author:施耐庵}])// 删除函数constonDel(i){// i: 当前点击的下标if(window.confirm(确定删除么?)){// 调用 splice 进行删除bookList.value.splice(i,1)}}/scripttemplateh3书架/h3ulli v-for(item, index) in bookList:keyitem.idspan{{item.name}}/spanspan{{item.author}}/spanbutton clickonDel(index)删除/button/li/ul/templatestyle#app{width:400px;margin:100px auto;}ul{list-style:none;}ul li{display:flex;justify-content:space-around;padding:10px0;border-bottom:1px solid #ccc;}/style为什么要给v-for添加key语法:key唯一值作用给列表项添加的唯一标识便于 Vue 进行列表项的正确排序复用因为 Vue 的默认行为会尝试原地修改元素就地复用注意事项key的类型只能是数字或字符串key的值必须唯一, 不能重复推荐用id作为key因为id唯一)不推荐用index作为key会变化七、双向绑定指令v-model所谓双向绑定就是数据变了-视图的变化视图变了-数据的变化作用在表单元素input、select、radio、checkbox上实现数据双向绑定从而可以快速获取或设置表单元素的值。语法v-model响应式数据使用双向绑定实现以下需求点击登录按钮获取表单中的内容点击重置按钮清空表单中的内容script setupimport{reactive}fromvue// 登录表单对象constloginFormreactive({username:,password:})/scripttemplatedivclasslogin-box账户input typetextv-modelloginForm.username/br/br/密码input typepasswordv-modelloginForm.password/br/br/button登 录/buttonbutton重 置/button/div/template