VS Code开启第一个VUE前端项目(6)

Vue学习笔记(一):从零开始创建一个Vue前端项目 一、开篇 最近公司的老的项目重构,改成了前后端分离的架构,前端采用的是vue.js前端框架,所以接触到vue.js。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的。相较于其他的前端框架,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM,因为Vue.js是数据驱动的,所以无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起 阅读详情

根据项目写vue模块前,需要根据具体页面,编写具体标签,并且加上数据逻辑与事件,下面整理了几个常见的重要知识点,比如this指向问题,函数调用问题,数据共享问题等。

今天主要介绍一下this指向问题:

可以在函数内部,通过this.param的方式获取到data(){}里面定义的属性,其中,这里的this指的是当前VUE对象,也叫做VueComonent,如下面的截图:

可以看到data()函数中定义的三个数据都在VueComponent组件下面,可以直接通过this.获取到任意一个数据。并且在methods里面定义的函数,也在VueComponent一级目录里,也可以通过this.来调用。函数还可以采用this.$options.methods.的方式互相调用methods下面的函数。methods里面的this代表的VUE实例。

另外一种情况在于函数的缩写,即ES6语法中函数的写法:(参数)=>{函数声明},在这里面的this指代上下文,不一定指向VUE实例,所以要注意,可以通过将外部this传到内部作为变量,即进行如下操作:

_this = this, //赋值
(_this) = { 
    //ES6函数写法,将this传进来
    _this.data = ...
}

 

VS Code开启第一个VUE前端项目(3) 对于初学者来说,代码首先需要看的懂,而刚刚赶上架的我,前端知识几乎为0,接下来对VUE项目内部生成的文件中,出现的语法进行介绍,也是记录自己学习的过程。 一,import import Vue from 'vue' import from 这个是ES6里面的特性,完整的写法如下,主要是加载Vue类 import Vue from "../node_modules/vue/d... 阅读详情

相关推荐

我的第一个前端项目,vue项目从零开始创建和运行

​入门前端,从基础做起,从零开始新建项目。VUE脚手架项目是一个“单页面”应用,即整个项目中只有1个网页!

麦小洛 5139

VS code运行vue项目

请注意,以上步骤假设您的Vue项目已经配置好了相应的构建脚本(如package.json中的"scripts"字段)。命令时出现"无法将'npm'项识别为cmdlet、函数、脚本文件或可运行程序的名称"的错误消息,这可能是因为您的计算机上没有正确安装Node.js和npm,或者系统环境变量配置不正确。2.在VS Code的侧边栏中,选择您的Vue项目文件夹,或者使用菜单中的“文件”->“打开文件夹”选项来打开项目文件夹。3.打开终端(菜单中的“视图”->“终端”),确保终端位于您的Vue项目文件夹下。

各类程序设计成品、文档、学习资料 3万+

首次用VS Code+Python+Vue3+SQL Service打造一个CRM系统的过程记录

为防止忘记,将配置过程及中间遇到的问题记录下来,方便自己下次用的时候回顾。开发工具:VS Code。

weixin_41005027的博客 1870

使用VS Code运行前端代码

使用VS Code运行HTML文件

二哈喇子! 1万+

2020年,前端开发者必备的10个VS Code扩展插件

全文共1689字,预计学习时长5分钟 图源:Unsplash 在2017年,VSCode有260万月活跃用户(这是我找到的最新官方数据,现在肯定更多),可以说是目前最好的代码编辑器。 它最大的一个特点是,插件多可自定义。 MarketPlace(插件商店)提供了大量扩展插件,开发人员完全可以根据需求进行自定义设置,这也有助于编写高质量的代码。 本文将为编写HTML,C...

读芯术的博客 4332

使用VS Code搭建Vue项目

只需安装Node.js和npm,安装Vue CLI,创建Vue项目,打开项目文件夹,启动开发服务器,编辑Vue组件,保存并查看更改,最后构建生产版本。使用Vue CLI,您可以轻松创建一个具有现代开发工具链的Vue项目。您可以使用VS Code的菜单选项“文件”>“打开文件夹”,或使用命令行切换到项目目录。您将看到一个URL,可以在浏览器中打开以查看您的应用程序。现在,您可以使用VS Code来编辑Vue组件文件(以.vue扩展名结尾)。这会将Vue CLI安装到您的计算机上,并使您可以在命令行中使用。

DpgrMl的博客 2298

Vs Code配置前端环境及运行

如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。4.需要安装谷歌浏览器来进行运行代码并调试bug,谷歌浏览器中需要安装vue开发者工具,以便随时查看数据,DOM结构以及调试。3.需要安装git以便于下载代码到本地以及管理代码,企业管理代码时需要用到gitlab。2.安装node.js来使用npm,还需要安装淘宝镜像方便快速使用npm导入插件;安装下图的插件即可,我这里已经安装好了。里搜索Live Server,然后安装。,在搜索栏里搜索npm。

m0_61216015的博客 2万+

Python实现支付宝转账接口

由于工作需要使用python开发一个自动转账接口,记录一下开发过程。 首先需要在蚂蚁金服上申请开通开发者账户,有了开发者账户就可以使用沙箱进行开发了。 在开发之前我们需要在沙箱应用中填写密钥,密钥的获取可以使用阿里提供的工具包自动生成。 前期准备工作完成了,接下来是编写代码部分。主要用到了python-alipay-sdk库,使用pip安装即可,如果安装的过程中遇到问题推荐使用Anaconda...

FanMLei的博客 8516

前端学习之一——关于第一次使用VSCode打开前端代码并启动问题

注意:所有涉及代码的软件,都不建议使用中文目录!!要不然会出事!!勿谓言之不预! 如果不小心用了,后期出现问题,就要重装了。 一、软件环境准备(VSCode、git、nodejs、npm) 1、VSCode下载安装教程 下载: 官网网址:https://code.visualstudio.com/Download ​我是直接点这里。然后它的下载速度会很慢。这时候把下载任务的链接复制出来,将里面的 http://az764295.vo.msecnd.net 替换为 http://v..

Jupite_ch的博客 1万+

VSCode CMake 安装与配置详解

概述 在windows上使用cmake编译C/C++程序时,首先需要CMake,安装gcc/g++编译环境,然后使用VSCode 以及配置下CMakelist.txt。 所需工具: VSCode (需要安装以下插件) C/C++ C++ Intellisense CMake CMake tools CMake Tools Helper CMake MinGW 安装CMake 下载链接:...

Markus 8万+

蓝牙钥匙 第48次 全面解析防中继攻击保护:从原理到防护技术实践

中继攻击已成为物联网安全领域的重要威胁,2023年全球相关损失达数十亿美元。本文深入分析中继攻击原理,揭示其通过转发设备延长通信距离而不破解加密的特点。重点探讨两种关键防护技术:基于距离测量的方法(包括UWB超宽带技术)可精确检测异常距离;基于时间戳的挑战-响应机制则通过严格时间窗口识别中继延迟。文章还提出多层次防护体系构想,结合AI异常检测和量子安全协议等前沿技术。研究显示,集成多种防护技术并遵循行业标准是应对中继攻击的有效途径,为物联网设备安全提供重要参考。

IT深耕十余载,大道之简 1833

vscode使用教程-开始学习前端开发啦~

这里写自定义目录标题用户配置用户界面VSCode的基本布局:项目的新建与引入主题设置颜色主题图标主题用户和工作区设置用户和工作区的差别快捷键设置Git配置什么是GitGit的下载与安装GitGitHub新建仓库Git的基本操作1.clone 远程仓库2.添加文件3.提交commit如何改变文本的样式生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图

Magnolia_He的博客 1万+

系统回溯信息:遇到严重错误。已将回溯写入...PTC... raceback.log请将其发送给|技术支持|。

一、问题分析 这种问题一旦遇上了,如果忘了保存,直接心态爆炸。 该问题一般是显卡驱动的问题。ProE/Creo对显卡的基本要求是:支持Open_GL的3D显卡,分辨率为1024×768像素以上,推荐使用64位独立显卡,显存512MB以上。如若显卡性能太低,打开软件后易自动退出。 二、解决方法 <1>有一个非常简单的方法是:在config.pro文件中,改变图形配置graphics为” win32_gdi”而不是默认的“...

幕光倾城的博客 2万+

在VS Code中创建Vue项目

在VS Code中创建Vue项目的一般步骤如下:1、安装Node.js和npm、2、安装Vue CLI、3、创建Vue项目 本文创建的是带router的vue项目

nan2008zzu的专栏 8532

SAP 系统升级不再惧怕 SPAU 与 SPDD:把修改调整做成可控的工程

SAP系统升级中的SPAU/SPDD处理要点:首先明确SPDD处理数据字典对象,SPAU处理程序对象,核心是解决标准对象变更与历史修改的继承问题。关键原则是优先回归标准版本,减少后续升级负担。操作时应利用版本管理对比差异,批量处理可回退对象,并通过F9多选提高效率。对于提示"当前版本与建议一致"的对象直接回归标准。注意区分新旧SPAU界面功能差异,将Note下载移至SNOTE处理,并确保在SPDD/SPAU之后处理SPAU_ENH。最后,所有调整需记录日志并纳入传输请求,确保可追溯性。遵

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 390

【SpringBoot 3.x 第43节】你还敢说 Spring 启动慢是“宿命”?Spring AOT 把启动剧本都提前写死了,你服不服?

🏆本文收录于《滚雪球学SpringBoot 3》,专门攻坚指数提升,本年度国内最系统+最专业+最详细(永久更新)。

**My Coding Family** 541

VS Code开启第一个VUE前端项目(1)

最头疼的还是环境的安装配置等操作,也是为了以后忘记,记录自己的前端学习过程。 首先VUE是前端的框架,全称为vue.js,一般需要同node.js一起使用。 一. 下载node.js 一路next就结束了,然后windows+R,输入cmd,打开后台 输入node -v查看是否安装成功 有版本就说明成功了,其中npm也会安装,同样输入npm -v,可以查看安装结果 np...

Batman_Encoding的博客 3886

在 SAP 里,想让“同一笔业务”在多个账套(平行分类账)中生成不同编号的会计凭证,标准做法就是

摘要:SAP系统中实现同一业务在不同分类账生成独立凭证号的方法是为每个分类账配置独立的凭证类型-编号范围映射。通过FBN1/OBA7等事务码为各分类账分配专属编号段,系统过账时会按分类账自动取号,确保凭证号互不冲突。该方案适用于S/4HANA和ECC系统,支持标准过账(F-02)或分类账专属过账(FB01L)两种模式,最终实现"一业务多账套,各自独立编号"的目标。

金牌架构师 550

使用 Vue 开发 VS Code 插件前端页面(上)

经过上面的操作,你已经得到了处于同一个文件夹下的能分别独立运行的插件和前端页面子项目,且它们构建好的内容也在同一个文件夹下:插件文件夹下的 dist 文件夹。看到这里你可以回看一下前面的项目结构图,现在你应该对它有了更深入的了解。这篇博客得到的项目为(注意是提交历史中的最早一次,不包含下节的内容):下节将介绍如何将构建的前端页面嵌入插件以及前端页面和插件的通信。

Hi_KER的博客 2720

31.华为路由器:PPPOE配置模拟实验及NAT配置

实验环境 pppoe-client上面的接口信息 [AR1]dis ip interface brief *down: administratively down ^down: standby (l): loopback (s): spoofing The number of interface that is UP in Physical is 2 The number of interface that is DOWN in Physical is 1 The number of interface

迷逝 8118

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

使用 VueJS 构建 VS Code 扩展

创建一个名为Codebuzzer的 Webview 面板,它将出现在当前活动的编辑器旁边。它还在 Webview 中启用 JavaScript 并将资源加载限制到特定目录。],在webview-ui文件夹中,您可以编写任何您想要的 VueJS 代码。在这里我在h1标签内写了。

YoungHong1992 1474

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

VS Code创建第一个Vue项目步骤详细图例

VS Code创建第一个Vue项目步骤详细图例 VS Code创建第一个Vue项目步骤详细图例 创建一个空文件夹Vue.Web,然后在VSCode中打开这个空文件夹 1、全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目 npm install -g vue-cli 2、安装webpack,它是打包js的工具、 npm install -g ...

eNet 1万+

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

【Vue】02 Vue技术——搭建 Vue 开发框架:在VS Code中创建一个Vue项目

本文介绍了Vue.js开发环境的安装和第一个Vue项目的创建过程。首先从Vue官网下载开发版和生产版的vue.js文件,然后在VS Code中创建项目文件夹,并编写一个简单的HTML文件引入Vue.js。通过创建Vue实例并绑定数据,实现了在页面显示"Hello, Vue!"的基本功能。最后在浏览器中运行成功,并提示需要安装开发者工具以便更好地调试Vue应用。整个过程涵盖了从环境搭建到第一个Vue应用运行的基本步骤。

杰西笔记 6157

vs code 第一次创建前端项目 vuejs 从零开始

第一阶段 虽然网上教程很多,但是还是记录一次完整的步骤 1.安装nodejs,网上一堆的教程,基本上下载后傻瓜式一路next 2.安装npm,网上一堆的教程,也是基本下载后傻瓜式一路next 3.安装完成运行cmd,查看是否安装成功 4.安装cnpm 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。 在命令行中输入...

jytlcl的博客 1万+

在VS Code上搭建Vue项目教程(Vue-cli 脚手架)

搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。

明静致远 1万+

windows系统安装VS Code,并使用VS Code创建Vue项目完整教程

1、安装VS Code (1)官网下载https://code.visualstudio.com/下载VS Code,按照步骤安装即可。 (2)设置简体中文:Ctrl+Shift+P 或者 选择View >> Command Palette,然后输入Configure Display Language 选择zh-cn,如果没有zh-cn选项,则选择Install additio...

weixin_42315600的博客 2万+
上一篇: VS Code开启第一个VUE前端项目(4)
下一篇: VS Code开启第一个VUE前端项目(5)
Batman_Encoding
博客等级 码龄10年 13粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值