企业官网建设流程全解析

住房建设部官方网站,汶上县住房和城乡规划建设局官方网站,seo基础课程,洪梅仿做网站前言 Vue.js 是前端领域最适合新手入门的框架之一#xff01;它以简单易学、渐进式集成、数据驱动视图为核心特点#xff0c;不用一次性掌握所有知识点#xff0c;就能快速开发小型项目。本文专为零基础 / 入门级开发者整理#xff0c;用通俗的语言、完整的代码示例#…前言Vue.js 是前端领域最适合新手入门的框架之一它以简单易学、渐进式集成、数据驱动视图为核心特点不用一次性掌握所有知识点就能快速开发小型项目。本文专为零基础 / 入门级开发者整理用通俗的语言、完整的代码示例覆盖 Vue 开发必备核心技能帮你少走弯路快速上手。一、Vue.js 简介与环境搭建新手必看1. 核心定位一句话理解Vue 是专注于「页面视图」的 JavaScript 框架 —— 简单说它能帮你更轻松地把数据渲染到页面还能实现数据和页面的自动同步不用手动操作 DOM比如 jQuery 那种频繁修改页面元素的写法。2. 三种环境搭建新手推荐前两种搭建方式适用场景操作难度核心步骤复制即用直接引入CDN快速体验、写小 demo 最简单1. 新建 HTML 文件2. 复制下面代码到 中htmlbr2 开发版有错误提示适合学习 --brhttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptbr3. 直接在 HTML 中写 Vue 代码Vite推荐正式项目、想体验极速开发 较简单1. 先安装 Node.js官网下载https://nodejs.org/选 LTS 版本安装时一路下一步2. 打开命令行WincmdMac终端执行bashmy-vue-project 是项目名可自定义npm create vitelatest my-vue-project -- --template vue 进入项目文件夹 cd my-vue-project# 安装依赖 npm install 项目启动后会显示访问地址如 http://127.0.0.1:5173/npm run devVue CLI中大型老项目 稍复杂需额外配置新手先跳过后续进阶再学 新手提示先用电线引入CDN写 2-3 个小 demo熟悉基础语法后再用 Vite 建正式项目二、Vue 核心基础语法入门重点1. 第一个 Vue 实例复制就能运行新建 index.html 文件完整代码如下html langzh-CN8引入 Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptbody挂载点Vue 会管理这个 div 内部的所有内容 --渲染 data 中的数据 --{{ message }}// 创建 Vue 实例核心对象new Vue({el: #app, // 挂载到 id 为 app 的 div必须和上面的 id 对应data: { // 存储响应式数据数据变了页面会自动变message: Hello Vue我是新手}})/body/html打开文件就能看到页面显示 Hello Vue我是新手修改 data 中的 message页面会实时更新。Vue 3 简化写法了解即可// 需引入 Vue 3 的 CDN://unpkg.com/vue3/dist/vue.global.js import { createApp } from vuecreateApp({data() {return { message: Hello Vue 3 } // Vue 3 中 data 必须是函数}}).mount(#app) // 直接挂载2. 模板语法页面渲染核心1插值表达式 {{ }}作用把 data 中的数据渲染到页面支持简单运算和判断。示例div idapp数据{{ name }}/p简单运算{{ 1 2 }} → 输出 3判断{{ age 18 ? 成年 : 未成年 }}/pnew Vue({el: #app,data: {name: 小明,age: 20}})2常用指令v - 开头新手必记 5 个指令是 Vue 提供的特殊属性用来操作页面元素新手先掌握这 5 个核心指令指令作用通俗解释完整示例代码v-text渲染文本和 {{}} 一样无闪烁html message 等价于 {{message}} --new Vue ({el: #app, data: { message: 用 v-text 渲染 } })v-bind缩写 :绑定标签属性比如图片地址、样式htmlapp 绑定图片地址 -- srcimgUrl width200 class -- isActive ? red : blue 动态样式 el: #app, data: { imgUrl: https://vuejs.org/images/logo.png, // Vue 官网 logoActive: true }}) color: red; } .blue { color: blue; }v-on缩写 绑定事件比如点击、输入htmlbrdiv idapp 次数{{ count }}/pbr 点击事件点击按钮count 加 1 --br clickcount 1点我加 1/button br clicksayHello点我说话/buttonbr/divbrscript({: #app, data: { count: 0 }, methods: { // 存储方法事件触发时执行 sayHello() {br alert(Hello Vue) } }br})br/scriptv-if / v-show条件渲染控制元素显示 / 隐藏html -ifisShowv-if 控制隐藏时元素被删除 v-show 控制隐藏时元素还在只是看不见 isShow !isShow 切换显示 Vue({ el: #app, data: { isShow: true } })v-for列表渲染循环显示数据html 3 我的爱好 3 循环数组item 是每个元素index 是索引 -- (item, index) in hobbies :keyindex 1 }}. {{ item }} new Vue ({ el: #app,: { hobbies: [ 看电影 , 打游戏 , 学 Vue] // 数组数据 }}) 新手提示v-if 和 v-show 区别频繁切换显示用 v-show性能好偶尔切换用 v-if节省内存。v-for 必须加 :key新手先用 index 即可后续学完组件再用数据的唯一 ID。3. 双向绑定 v-model表单专用作用实现「表单输入」和「数据」的双向同步 —— 输入框输入内容数据自动变数据变了输入框内容也自动变。示例登录表单div idapp表单 username --typetext v-modelusername placeholder请输入用户名br框绑定 password --v-modelpassword placeholder请输入密码br复选框绑定 isAgree --typecheckbox v-modelisAgree 同意协议br打印输入的内容 --login :disabled!isAgree登录/button显示输入的内容 --输入的用户名{{ username }}/p/divnew Vue({el: #app,data: {username: , // 初始为空password: ,isAgree: false // 复选框默认未选中},methods: {login() {alert(用户名${this.username}密码${this.password})}}})常用修饰符新手必备首尾空格 --input typetext v-model.trimusername数字 --typenumber v-model.numberage同步数据输入时不实时同步 --v-model.lazyinfo三、计算属性与侦听器简化逻辑1. 计算属性 computed计算数据作用基于已有数据计算出新的数据且会缓存结果不用重复计算性能好。示例拼接姓名姓input v-modelfirstName名lastName计算属性不用加括号 --全名{{ fullName }}/divscriptnew Vue({el: #app,data: { firstName: , lastName: },computed: { // 计算属性依赖 data 中的数据fullName() {// 当 firstName 或 lastName 变化时自动重新计算return this.firstName this.lastName}}})新手对比计算属性 vs 方法 —— 计算属性会缓存方法每次调用都重新计算优先用计算属性。2. 侦听器 watch监听数据变化作用监听某个数据的变化然后执行自定义逻辑比如发送请求、弹提示。示例监听用户名变化idapp用户名-modelusername/divscriptnew Vue({el: #app,data: { username: },watch: { // 侦听器监听 username 变化username(newVal, oldVal) {// newVal变化后的值oldVal变化前的值console.log(用户名从 ${oldVal} 变成了 ${newVal})// 实际开发中可在这里判断用户名是否已存在调用接口}}})/script四、组件基础拆分页面1. 什么是组件组件是 Vue 中复用页面片段的方式 —— 把页面拆成一个个独立的「小模块」比如头部、列表项、按钮每个模块有自己的 HTML、CSS、JS方便复用和维护。2. 新手入门全局组件简单易用示例自定义一个按钮组件组件像用普通标签一样 --my-buttonmy-button/my-button/div// 1. 定义全局组件可在任意地方使用Vue.component(my-button, {template: HTML 结构 -- 1 classmy-btn点击了 {{ count }} 次,data() {// 组件中的 data 必须是函数避免多个组件共用数据return { count: 0 }},styles: /* 组件的样式 */.my-btn { color: white; background: blue; padding: 5px 10px; }})// 2. 创建 Vue 实例new Vue({ el: #app })新手提示组件名建议用「短横线命名法」比如 my-button避免和 HTML 原生标签冲突。3. 组件通信父传子、子传父组件之间需要传递数据新手先掌握最常用的两种1父传子props父组件通过属性传递数据给子组件。子组件通过 props 接收父组件的数据。示例idapptitle 和 count 给子组件 ---child :titleparentTitle :countparentCount /divscript// 子组件Vue.component(my-child, {props: [title, count], // 接收父组件传递的属性template: divh3{{ title }}3p父组件传递的数量{{ count }}})// 父组件new Vue({el: #app,data: {parentTitle: 我是父组件传递的标题,parentCount: 100}})/script2子传父$emit子组件通过 this.$emit(事件名, 数据) 触发事件传递数据。父组件监听子组件的事件接收数据。示例appp父组件的数值{{ parentNum }}/p组件监听子组件的 send-num 事件 ---numgetSonNum/my-child/div// 子组件Vue.component(my-child, {template: button clicksendData向父组件传值/button,methods: {sendData() {const sonNum 200 // 子组件的数据// 触发 send-num 事件传递 sonNumthis.$emit(send-num, sonNum)}}})// 父组件new Vue({el: #app,data: { parentNum: 0 },methods: {// 接收子组件传递的数据getSonNum(data) {this.parentNum data // data 就是子组件传递的 sonNum}}})五、生命周期钩子了解即可1. 什么是生命周期Vue 实例从「创建」到「销毁」的整个过程会自动触发一些函数这些函数就是生命周期钩子我们可以在这些阶段执行自定义逻辑。2. 新手必备的 2 个钩子钩子函数触发时机常用场景mounted组件挂载完成DOM 已生成初始化 DOM 操作比如获取元素、发送网络请求beforeDestroy组件即将销毁清除定时器、解绑事件避免内存泄漏示例mounted 发送请求new Vue({el: #app,data: { list: [] },mounted() {// 组件挂载完成后发送请求获取数据实际开发用 axiosconsole.log(组件已挂载开始请求数据)// 模拟请求setTimeout(() {this.list [数据1, 数据2, 数据3]}, 1000)}})六、新手避坑指南必看数据响应式问题直接给对象添加新属性页面不会更新错误this.user.age 20user 原本没有 age 属性正确this.$set(this.user, age, 20)用 Vue 提供的 $set 方法v-for 和 v-if 不能一起用v-for 优先级比 v-if 高会导致性能问题。解决先用计算属性过滤数据再用 v-for 循环。样式污染多个组件的样式会相互影响。解决在组件的 style 标签加 scoped 属性 scoped样式只作用于当前组件。忘记清除定时器组件销毁后定时器还在运行导致内存泄漏。解决在 beforeDestroy 中清除mounted() {this.timer setInterval(() { console.log(运行中) }, 1000)},beforeDestroy() {clearInterval(this.timer) // 清除定时器}七、新手学习路线建议基础阶段用 CDN 写 5-10 个小 demo覆盖本文所有知识点工具阶段学习 Vite 项目结构掌握 npm 基本命令安装依赖、启动项目进阶阶段学习 Vue Router路由跳转、Pinia状态管理、Element PlusUI 组件库实战阶段做一个小项目比如 TodoList、个人博客巩固所有知识点。推荐学习资源官方文档最权威Vue 2 中文文档 https://v2.vuejs.org/Vue 3 中文文档 https://vuejs.org/视频教程B 站「尚硅谷 Vue 入门到精通」免费适合新手实战练习GitHub 搜索「vue-todolist」参考别人的代码自己写一遍。总结Vue 入门的核心是掌握「数据驱动视图」的思想 —— 不用关心 DOM 操作专注于数据和逻辑即可。本文覆盖的基础语法、组件、双向绑定等知识点足以应对中小型项目开发。新手学习时一定要多写代码、多踩坑遇到问题先看官方文档再查资料坚持 1-2 周就能熟练上手如果本文对你有帮助欢迎点赞、收藏后续会更新 Vue 进阶知识点路由、状态管理、实战项目关注不迷路