首页 > 其他分享 >vue开发

vue开发

时间:2024-12-14 15:47:22浏览次数:5  
标签:vue DOM URL 调用 开发 实例 install

安装nodejs

安装vue
npm install -g @vue/cli
选vue版本2

安装vue-router
npm install vue-router@2

创建项目
vue create vue_test
cd vue_test

启动项目
npm run serve


// 创建router实例
const router = new VueRouter({
//hash: 使用URL的hash值来模拟一个完整的URL,于是页面会一直停留在同一页面,但URL的hash部分会变化
//history: 利用HTML5 History API,它可以创建看起来像普通网页的URL,无需#。需要服务器支持
//abstract: 用于非浏览器环境
mode: 'history',
routes: [
{ path: '/', name: "home", component: HomePage },
{ path: '/hello', name: "hello", component: HelloWorld },
{ path: '/msg', name: "msg", component: ShowMyMsg },
]
})


vue访问接口
npm install axios

//Vue中的style scoped属性主要用于确保组件的样式只作用于当前组件,避免样式冲突。


加入element-ui
npm i element-ui -S

//https://blog.csdn.net/m0_52861684/article/details/143889308
//https://element.eleme.cn/#/zh-CN


vue项目使用vuex
npm install vuex@2 --save

使用vant做移动端开发
npm install vant@2

vue---移动端UI框架
https://www.cnblogs.com/e0yu/p/17014094.html
https://vant-ui.github.io/vant/#/zh-CN/quickstart


‌Vue的生命周期函数‌包括以下八个主要阶段:

‌beforeCreate‌:在实例初始化之后,数据观测和事件/侦听器设置之前调用。此时无法访问data、computed、methods等属性。
‌created‌:在实例创建完成后立即调用,此时data、computed和methods等已设置完成,但DOM还没有渲染。
‌beforeMount‌:在挂载开始之前调用,相关的render函数首次被调用,但DOM元素还没有挂载。
‌mounted‌:在实例挂载到DOM上之后调用,此时所有的data和computed已经绑定到DOM,可以进行DOM操作‌。
‌beforeUpdate‌:在数据更新之前调用,可以在此阶段进一步修改状态,不会触发重新渲染‌。
‌updated‌:在数据更新之后调用,此时DOM已经根据数据的变化更新了。
‌beforeDestroy‌:在实例销毁之前调用,此时实例仍然完全可用‌。
‌destroyed‌:在实例销毁后调用,此时实例不再存在,所有的绑定、子实例等都被解绑‌。

生命周期函数的作用和典型应用场景:

‌beforeCreate‌:用于进行一些全局的配置或初始化非响应式的数据。
‌created‌:适合进行数据请求、事件监听器的绑定等。
‌beforeMount‌:通常不需要使用,除非需要做一些特定的挂载前操作。
‌mounted‌:适合进行DOM操作、依赖于DOM的初始化等。
‌beforeUpdate‌:可以修改状态,不会触发重新渲染。
‌updated‌:适合进行视图更新后的操作。
‌beforeDestroy‌:清理资源,避免内存泄漏。
‌destroyed‌:确保所有清理工作完成。

标签:vue,DOM,URL,调用,开发,实例,install
From: https://www.cnblogs.com/xuxiaobo/p/18606805

相关文章

  • 深入浅出Laravel 框架,快速网站开发热门技能
    PHPweb开发教程4天深入浅出Laravel框架,快速网站开发热门技能P101.laravel介绍laravel来我2017官网:https://laravel.com/中文官网:http://www.golaravel.com/中文社区:https://laravel-china.org/目前大部分的框架公共的特点(了解)(1)单入口,所有的请求必须从单入口开始,主要是......
  • 面向小白开发者:动手学大模型应用开发教程(附教程)
    项目简介本项目是一个面向小白开发者的大模型应用开发教程,旨在基于阿里云服务器,结合个人知识库助手项目,通过一个课程完成大模型开发的重点入门,主要内容包括:大模型简介,何为大模型、大模型特点是什么、LangChain是什么,如何开发一个LLM应用,针对小白开发者的简单介绍;如何调用......
  • macOS / Windows / Linux:FlyEnv (PhpWebStudy) —— 一站式 Web 服务器和开发环境管理
    FlyEnv是什么?FlyEnv是一款集成了Web服务器、数据库服务器和开发环境管理的GUI应用程序。它提供了一整套完整的运行环境,帮助用户开发和调试Laravel、WordPress、Yii2、ThinkPHP、FastAdmin、NestJS、SpringBoot、Gin、Beego、Django、Flask等PHP、NodeJS、Java、Go......
  • springboot基于知识图谱与学习行为分析的在线学习平台开发
    目录功能和项目介绍系统实现截图开发核心技术介绍操作手册核心代码部分展示视频演示/源码获取功能和项目介绍jdk版本:jdk1.8+编程语言:java框架支持:springboot/ssm数据库:mysql版本不限数据库工具:Navicat/SQLyog都可以前端:vue.js+ElementUI开发工具:IDEA或......
  • AI大模型10月新书!大模型项目实战:多领域智能应用开发(附PDF)
    今天没有多的废话,直接给大家推荐这本书----《大模型项目实战:多领域智能应用开发》!这本书面向大语言模型应用的使用者和开发者,从大语言模型的基础知识开始,逐步深入,详细介绍了常见的操作方法和各类型应用的开发过程。全书共18章,分为三篇。基础篇(第1~3章),讲解大语言模型的基础......
  • django-python开发
    确保你已经安装了Django。如果没有安装,可以通过pip安装:pipinstalldjango创建一个新的Django项目:django-adminstartprojectdjango_test运行开发服务器:cddjango_testpythonmanage.pyrunserverpythonmanage.pyrunserver0.0.0.0:8008如果你需要创建一个应用程序,可以使用......
  • Laya 开发教程,跑酷游戏开发教程,微信小游戏开发教程
    Laya开发教程,跑酷游戏开发教程,微信小游戏开发教程https://www.bilibili.com/video/BV1xV411z7JV 1 2https://www.bilibili.com/video/BV11b4y1R7eJcocos同样会jdg游戏效果LAYA2.x实战开发教程《懒猫跑酷》01简介02调试安装helloworld03创建游戏首页04安装unity3d......
  • Unity LayaAir开发小游戏 - 3D打地鼠
    UnityLayaAir开发小游戏-3D打地鼠https://www.sikiedu.com/my/course/547 2 4课时1:课程素材课时2:LayaAir项目源码课时3:00-课程演示课时4:01-必读课时5:02-为什么学习小游戏、流程介绍1.为什么要学习小游戏?5G来了,网速很快,这样我们就不需要传统的将游......
  • intellij-idea+vue前端调试配置
    一、安装vue插件二、idea->EditConfiguration1、如图,添加类型为npm的配置;执行脚本内容为dev;这一步等同于用控制台终端手动执行npmrundev;用于启动node服务器。A、配置服务B、配置debug默认浏览器1、点击配置弹出如下界面,点击浏览器设置(标识1)2、自定义地址(标识2),......
  • 【鸿蒙开发】关于性能优化的小tips
    系列文章目录【鸿蒙开发】鸿蒙开发基础干货篇–1【鸿蒙开发】基础干货篇–2小白入门手册(内含DevEco安装教程和汉化插件安装)【鸿蒙开发】基础干货篇–3小白入门手册(内含模拟器保姆级安装使用教程)【鸿蒙开发】基础干货篇–4小白入门手册(内含Stage模型工程目录结构和U......