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有较为全面的了解,基本解除对该文件的疑惑. /* ...
随机推荐
- Ubuntu 18.04 安装配置 MySQL 5.7
Ubuntu 18.04 安装 mysql 的过程中,竟然没有让你输入秘密?!(之前在 Ubuntu 14.04 下,安装过程中会询问密码),这导致安装完 mysql 初始秘密不知道的问题. $ su ...
- 博弈论BOSS
基础博弈的小结:http://blog.csdn.net/acm_cxlove/article/details/7854530 经典翻硬币游戏小结:http://blog.csdn.net/acm_c ...
- CSS基础学习-14 CSS visibility与overflow属性
- maven实践--你所需要了解的maven
基本概念 是什么? Maven是一个强大的Java项目构建工具. 什么是构建工具? 构建工具是将软件项目构建相关的过程自动化的工具.构建一个软件项目通常包含以下一个或多个过程: 生成源码(如果项目使用 ...
- ${filename}用法二：
假设:filename=/dir1/dir2/dir3/my.filename.txt 1.单一符号是最小匹配﹔两个符号是最大匹配. ${filename::}:提取最左边的5个字节:/dir1 ${ ...
- QSettings 介绍
https://blog.csdn.net/liang19890820/article/details/50513695 QSettings settings(“./test.ini”, QSetti ...
- 下载Americanlife 语音材料
下载剧本 下载后会在给定目录生成多pdf文件,文件名为每一节的名称 #!/usr/bin/env python3.5 # -*- coding: utf-8 -*- # @Time : 2019/11 ...
- http 中文乱码
string RawUrl = request.Request.RawUrl; string cc= HttpUtility.ParseQueryString(RawUrl.Substring(1, ...
- 灰度图像--图像增强 非锐化掩蔽 （Unsharpening Mask）
学习DIP第35天 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些论坛转载后,图像无法正常显示,无法正常表达本人观点,对此表示很不 ...
- Spring Boot教程（四十二）LDAP来管理用户信息（2）
使用spring-data-ldap的基础用法,定义LDAP中属性与我们Java中定义实体的关系映射以及对应的Repository @Data @Entry(base = "ou=peopl ...