vue 初始框架

VueJs讲解初始框架

一、启动项目

第一步:cmd进入项目文件里,运行npm run dev 启动项目 这里说明启动端口号是8080
在这里插入图片描述
第二步:往页面输入:localhost:8080
在这里插入图片描述

二、解析渲染步骤

先看整体框架样式和index.html:
在这里插入图片描述
从上面我们可以看出,index的body中只有一个id为app的div,那是如何被渲染的呢。一步一步寻找
第一步:main.js

main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件。
在这里插入图片描述
这里new Vue代表新建vue对象

el官方解释:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。

这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

components:代表组件。这里是’App’,这说明。首先页面肯定有<app></app>这样的标签,同时有个组建为‘App.Vue‘文件

这个地方我思考好久,才明白,首先App.vue是有的,因为上面已经import导入了,但index.html中并没有<app></App>标签

template:代表模板。官方解释:模板将会替换挂载的元素。挂载元素的内容都将被忽略。

也就是说:template: ‘<App/>’ 表示用<app></app>替换index.html里面的<div id="app"></div>

那到底是不是这样,我们先把main中components这行注释掉:
在这里插入图片描述
再看页面:发现里面就有一个标签。这样那么逻辑就通了。
在这里插入图片描述
这样mian.js就通了,那通过components: { App },我们来看App.vue
第二步:App.vue
首先一个正常的vue结尾的文件里,一般包含三部分:<template>,<script>,<style>
在这里插入图片描述
这里面的<img>标签,就代表页面的vue的logo,它下面又有一个组件<HellWord>

我们只要在进入到HellWord.vue中明白了。
第三步:HellWord.vue
在这里插入图片描述
这样一来,页面所渲染的东西都找到了,其实并不复杂,只是在main.js稍微绕了个弯。

自己也是一边学一边写,有错的地方或者有更好的解释也希望大家予以指点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codeforces 914D - Bash and a Tough Math Puzzle 线段树,区间GCD

题意: 两个操作, 单点修改 询问一段区间是否能在至多一次修改后,使得区间$GCD$等于$X$ 题解: 正确思路; 线段树维护区间$GCD$,查询$GCD$的时候记录一共访问了多少个$GCD$不被X整除的区间即可,大于一个就NO 要注意的是,如果真的数完一整个区间,肯定会超时,因此用一个外部变量存储…

Country Road Aizu - 2104

题目链接&#xff1a; https://vjudge.net/problem/Aizu-2104 题解&#xff1a; 咋说啊&#xff0c;一言难尽&#xff0c;花了半小时写出来的&#xff0c;卡了十分钟才恍然大明白是排序。 具体就是让每个村子都通上电&#xff0c;变压器在的村子&#xff0c;与变压器连线点线长…

touchWX使用 echarts

<button bindtap"init" wx:if"{{!isLoaded}}">加载图表</button><button bindtap"dispose" wx:if"{{isLoaded && !isDisposed}}">释放图表</button><ec-canvas het"200" classmy_echart…

vue init webpack vue-demo01复杂安装的详解

终端cmd,在项目中输入下面命令&#xff1a; E:\Vue>vue init webpack vuedemo02 接着就会让你输入或者选择一些是不是要的东西 ? Project name vuedemo02(项目名称) ? Project description A Vue.js project(描述&#xff0c;我默认了) ? Author simalinjia(作者名称) ?…

JAVA EE 基本了解

1、 为什么需要JavaEE 我们编写的JSP代码中&#xff0c;由于大量的显示代码和业务逻辑混淆在一起&#xff0c;彼此嵌套&#xff0c;不利于程序的维护和扩展。当业务需求发生变化的时候&#xff0c;对于程序员和美工都是一个很重的负担。 为了程序的易维护性和可扩展性&#xf…

vue-cli中config目录下的index.js文件详解

// see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块&#xff0c;用来处理路径统一的问题 var path require(path)module.exports { // 下面是build也就是生产编译环境下的一些配置build: { // 导入prod.env.js配置文件&#xf…

Business Intelligence——SSIS项目从创建到部署的简单总结(二)

在上一篇博客中&#xff0c;我们成功的把包导进了SQL Server中&#xff0c;那么接下来我们就为其创建作业&#xff0c;使数据库能够自动执行我们的任务。首先&#xff0c;我们需要启动“SQL Server 代理”。如图1&#xff1a;图1在“SQL Server 代理”的子节点中&#xff0c;选…

我的vscode配置 利用Settings Sync一键安装

{"prettier.eslintIntegration": true, // 点击保存时&#xff0c;根据 eslint 规则自定修复&#xff0c;同时集成 prettier 到 eslint 中"prettier.semi": false, //去掉代码结尾的分号"prettier.singleQuote": true, //使用带引号替代双引号&q…

IdentityServer4【QuickStart】之使用asp.net core Identity

使用asp.net core Identity IdentityServer灵活的设计中有一部分是可以将你的用户和他们的数据保存到数据库中的。如果你以一个新的用户数据库开始&#xff0c;那么&#xff0c;asp.net core Identity是一个选择。这个示例演示了如何在IdentityServer中使用asp.net core Ientit…

vue demo1

1.开发工具 试过sublime&#xff0c;现在转战vscode&#xff0c;觉得很顺手&#xff0c;总之啥工具习惯就好。 vscode用着不错的插件&#xff0c;推荐安装。 2.项目目录介绍 vue-cli生成的项目目录有点多&#xff0c;初看有点懵&#xff0c;梳理一下会好很多。 ├── ind…

mysql日志介绍

1. 错误日志 错误日志记录的事件&#xff1a; a. 服务器启动关闭过程中的信息 b. 服务器运行过程中的错误信息 c. 事件调试器运行一个事件时间生的信息 d. 在从服务器上启动从服务器进程时产生的信息 2. 查询日志 查询日志记录查询语句与启动时间&#xff0c;建议不是在调试环境…

Mac OS X终端的常用操作命令(UNIX指令)

用了十多年windows&#xff0c;终于换了个高配Mac,俗话说 无论前端还是后端最终还是走向了linux&#xff0c;无论是换了多少台PC最终都会走向Mac。不学习命令行用什么Mac? 干就完了~ pwd 显示现在的文件路径 &#xff08;print working directory&#xff09; ls 显示…

索引( index )

索引在庞大的数据库上最能体现出作用&#xff0c;所谓索引就是根据需求将指定的列提取出来做索引表&#xff0c;可以显著提高在查找数据方面的速度。 在索引的前提下还可以指定索引值是否唯一&#xff0c;索引值是单列或是多列索引。 根据索引类型&#xff0c;索引分为&#xf…

dependencies 和 devDependencies 区别

当我们项目需要下载一个模块的时候&#xff0c;我们安装npm包&#xff08;在项目目录下面npm install module_name&#xff09;的时候&#xff0c;很多时候我们会在后面加上–save-dev 或 –save。这两个参数代表什么呢&#xff1f; 初识 相信很多人都会回答&#xff1a; np…

CentOS下防御或减轻DDoS攻击方法(转)

查看攻击IP 首先使用以下代码&#xff0c;找出攻击者IP netstat -ntu | awk {print $5} | cut -d: -f1 | sort | uniq -c | sort -n 将会得出类似如下的结果&#xff1a; 1 114.226.9.132 1 174.129.237.157 1 58.60.118.142 1 Address 1 servers) 2 118.26.131.78 3 123.125.1…

iTerm2 快捷键

Ctrl a&#xff1a;将光标移动到命令行首 Ctrl e&#xff1a;将光标移动到命令行尾 Ctrl w&#xff1a;删除光标前的一个单词 Ctrl u&#xff1a;删除所有内容 Ctrl y&#xff1a;粘贴上次删除的内容 Ctrl r&#xff1a;搜索历史命令删除光标之前的单词&#xff1a;ctrl …

vscode - 添加背景图片

首先&#xff0c;CtrlShiftP安装backround &#xff0c; 而后重启vscode会有默认的背景图片 修改背景图&#xff0c;可自定义三张 具体请看gif图 最开始时&#xff0c;发现png根本不是全透明&#xff0c;用ps处理了一下&#xff08;下列所有操作均字母组合&#xff09; 1.1 Ctr…

架构设计杂谈004——架构师

什么是架构设师 架构师是&#xff1a;负责系统架构设计的人、团队或组织 架构师主要干什么 ●架构师是技术领导&#xff0c;领导并负责架构设计&#xff0c;负责做决策 ●架构师可以是团队或组织&#xff0c;这个时候通常会有首席架构师 ●架构师必须掌握足够的技术知识 ●架构…

学习JS基本数据类型与对象的valueOf方法

https://blog.csdn.net/licheng11403080324/article/details/60128090 https://yq.aliyun.com/articles/399499 转载于:https://www.cnblogs.com/smzd/p/9548530.html

security和oauth2.0的整合

security和oauth2.0的整合 之前已经介绍过security的相关的介绍,现在所需要做的就是security和oauth2.0的整合,在原有的基础上我们加上一些相关的代码;代码实现如下: pom.xml: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http:…