vue中html、js、vue文件之间的简单引用与关系
有关vue文件记录：
index.html
在html中运用组件
<body>
<app></app> <!-- 此处app的组件为入口js main.js中定义的组件名 -->
<script src="build.js"></script> <!-- 此处引用的js为webpack打包生成的js文件 -->
</body>
main.js
在这个文件中定义js，引入vue和App.vue
import Vue from 'vue' //引入之后就可以直接new Vue({ })使用了
import App from './App.vue' //引入主组件
new Vue({
el:'body',
components:{
app:App //App是上面import引入的App；app是自定义的名字，返给html中运用的组件标签
}
});
App.vue（官方规范，一般组件文件的首字母大写）
在这个文件中定义html、js、css，格式为：
<template>
<h1>welcome Vue</h1>
<h2 @click="change">{{msg}}</h2>
<my-menu></my-menu> <!-- 引用的其他组件，然后在html中运用 -->
</template>
<script>
import Menu from './components/Menu.vue' //在此引入其他子组件 export default{ // 这个导出的模块和vue中的component的方式一模一样，这里面可以直接给数据data，定义方法methods等等
data(){
return {
msg:'welcome Vue ^_^'
}
},
methods:{
change(){
this.msg='wahaha'
}
},
components:{
'my-menu':Menu //引入其他子组件，在此定义赋值
}
}
</script>
<style>
body{
background: #ccc
}
</style>
Menu.vue
在当前目录的components文件夹下面有一个Menu.vue组件
<template>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</template>
<script> </script>
最终的展示效果：
个人总结：
1、html文件中基本不写什么东西，只是写一个组件标签。
2、入口的main.js文件引入vue框架 和 App.vue主组件，然后实例化vue对象，在components属性中定义组件名（把引入App.vue主组件定义一个名字，返给html文件运用）
3、App.vue主组件，里面集合了html、js、css语法，在此主组件文件中，也可以引用其他子组件，引用时在script标签所在的js中，用import引入，然后在实例化vue对象中的components中定义名字，然后在template所在的html中运用。
4、子组件在components文件中，一般此文件夹中放置的都是子组件，被App.vue主组件引用。
vue中html、js、vue文件之间的简单引用与关系的更多相关文章
- Vue中ESlint配置文件.eslintrc文件
很久没有分享和更新过了 今天就给大家分享一篇 Vue中ESlint配置文件.eslintrc文件详解吧 ------------------------------------------------ ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中的js引入图片，必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- vue中的js引入图片，使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- legend---十二、js中的js语句和函数和ready函数的关系是什么
legend---十二.js中的js语句和函数和ready函数的关系是什么 一.总结 一句话总结: 函数和全局变量不必放到ready函数中 语句(调用函数和全局变量)的必须放到ready函数中 1.在 ...
- 关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- vue中打包后vendor文件包过大
vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
随机推荐
- 简单粗暴 每个servlet之前都插入一段代码解决 乱码问题
response.setHeader("content-type", "text/html;charset=UTF-8"); response.setChara ...
- 如何使用ProcessOn制作思维导图
新建一张思维导图之后你是不是有点茫然? 不是因为脑海里没思路,而是不知道怎么把脑海里的思路呈现出来?看到一个孤零零的中心主题和看起来有些简单的页面一时间有点无所适从? 很多人觉得思维导图好看但学起来难 ...
- Tarjan无向图的割点和桥(割边)全网详解&算法笔记&通俗易懂
更好的阅读体验&惊喜&原文链接 感谢@yxc的腿部挂件 大佬,指出本文不够严谨的地方,万分感谢! Tarjan无向图的割点和桥(割边) 导言 在掌握这个算法前,咱们有几个先决条件. [ ...
- Java io 理解
任何程序都有io部分,io是对程序来说数据流的输入和输出.这里说的流,是指有字节组成的列,不断输入程序,或者从程序中输出,我们形象称为流.Java的io流有两种,一种叫字节流,最原始的:一种叫字符流. ...
- NoSQL数据库技术实战-第1章 NoSQL与大数据简介 NoSQL数据库的类型
键值存储数据库临时性:如Memcached.临时性的键值数据库把数据存储在内存中,在两种情况下会造成上数据的丢失,一是断电,而是数据内容超出内存大小.这种处理的好处是非常快.永久型:如Tokyo Ty ...
- BZOJ3589 动态树[树剖/暴力/容斥]
操作0,显然直接线段树解决. 操作1,瓶颈在于重叠的链只算一次.在线段树上来看,如果一个区间被覆盖了,那么只算这个区间,子树里面也就不管了. 考虑对节点打标记来表示是否覆盖.但是,如果统一打完之后,并 ...
- 使用IDEA 搭建一个 SpringBoot + Hibernate + Gradle 项目
现在创建个项目: 勾上 自已 需要东西.(这里作为演示) maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'} 关闭项目 ...
- web 9个令人震惊的WebGL示例
20个使用WebGL和Three.js实现的网页场景 https://www.open-open.com/news/view/9d8136 20个使用WebGL和Three.js实现的网页场景 htt ...
- linux安装locust及遇到的坑
安装locust很简单,简单的我以为pip install一下就好了,结果运行locust死活不行,后来的后来,,才搞清楚还要进行以下操作. 前提: 1.已安装Python3和pip3(或者都是2,版 ...
- sql 为空不做查询条件
select * from usertable where 1=1 and (name=@name or @name='') and (page=@page or @page='')