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有较为全面的了解,基本解除对该文件的疑惑. /* ...
随机推荐
- RHEL7中配置本地YUM软件源
1.创建目录,挂载光盘 [root@localhost ~]# mkdir /mnt/iso [root@localhost ~]# mount /dev/sr0 /mnt/iso mount: ...
- Selenium（6）
一.定位页面元素 1.高级定位:层级定位 思路:先定位到祖先节点,在定位该祖先节点范围内的子节点 2.高级定位:Xpath定位(重点) (1)Xpath定位:Xpath就是一个表达式,表示元素的路径, ...
- zoomeye使用
简介 ZoomEye是一款针对网络空间的搜索引擎,收录了互联网空间中的设备.网站及其使用的服务或组件等信息. ZoomEye 拥有两大探测引擎:Xmap 和 Wmap,分别针对网络空间中的设备及网站, ...
- zencart清空产品商品实用命令
TRUNCATE TABLE categories; TRUNCATE TABLE categories_description;TRUNCATE TABLE meta_tags_categories ...
- 【经验分享】-PHP程序员的技能图谱
一.技术知识积累作为参与工作一定年限的程序员,最重要的就是静下心来把遇到的和遗漏的知识点记录下来,做好学习和总结的准备.学习方面,除了看书上网查资料之外,实践也是非常重要的一点,很多不懂的或者不明白的 ...
- 差分约束详解&&洛谷SCOI2011糖果题解
差分约束系统: 如果一个系统由n个变量和m个约束条件组成,形成m个形如ai-aj≤k的不等式(i,j∈[1,n],k为常数),则称其为差分约束系统(system of difference const ...
- mysql中source提高导入数据速率的方法
示例: 第一步: 第二步: 使用 source 导入你所需要导入的文件 第三步: 在导入的数据停止后,输入 commit; 这样数据就算是导入完成了.
- pro git 读书笔记 2
Git 2 - Git Basics 1 add github 上建立新的 repository,命名 demo git clone 到本地 github 目录 将自己之前的项目 copy 到该 de ...
- 微信公众号开发不能使用session原因
今天做微信公众号开发整合功能的时候,使用session保存记录.用postman测试好使,但是一旦用手机就不好使.上网查了好久才明白,微信开发是不能用session的.具体原因如下:因为微信的所有请求 ...
- ckeditor+粘贴word
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...