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有较为全面的了解,基本解除对该文件的疑惑. /* ...
随机推荐
- 浅析jsp
什么是jsp?jsp的全称是 java Server Page ,也就是俗称的动态网页,什么是静态网页和动态网页呢,在我理解看来,HTML等网页就属于静态网页,jsp等网页属于动态网页,为什么这么说呢 ...
- 二叉树的相关定义及BST的实现
一.树的一些概念 树,子树,节点,叶子(终端节点),分支节点(分终端节点): 节点的度表示该节点拥有的子树个数,树的度是树内各节点度的最大值: 子节点(孩子),父节点(双亲),兄弟节点,祖先,子孙,堂 ...
- itop4412编译内核时出现“recipe for target 'arch/arm/mach-exynos/cpu-exynos4.o' failed”的解决方法
依次执行如下命令 #su root 输入root用户密码 #cd #vim .bashrc 到达最底行,确保环境变量如下图所示 保存退出后,执行如下指令 #source .bashrc 重启Termi ...
- if语句分析
1.if语句的反汇编判断 if语句反汇编后的标志: 执行各类影响标志位的指令 jxx xxxx 如果遇到上面的指令,则很可能是if语句: 例如: 1.案例一 ...
- removeAttr(name)
removeAttr(name) 概述 从每一个匹配的元素中删除一个属性 1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的.解决的方法就是使用$(" ...
- python 访问列表中的值
#!/usr/bin/python list1 = ['physics', 'chemistry', 1997, 2000] list2 = [1, 2, 3, 4, 5, 6, 7 ] print ...
- Vue 工程化最佳实践
目录结构 总览 api 目录用于存放 api 请求,文件名与模型名称基本一致,文件名使用小驼峰,方法名称与后端 restful 控制器一致. enums 目录存放 常量,与后端的常量目录对应 ...
- hadoop安装后运行一个单实例（测试MapReduce程序）
1.安装hadoop 解压hadoop-1.2.1-bin.tar.gz包 tar -zxvf hadoop-1.2.1-bin.tar.gz /opt/modules/ 解压后在/opt/mo ...
- linux C线程
一个应用程序可以启动若干个线程: 线程,是程序执行的最小单位: 一般一个最简单的程序最少有一个线程,就是程序本身,也是主函数: 一个线程阻塞不会影响另一个线程: 多线程的进程可以尽可能多的利用系统CP ...
- vue-cli3中axios如何跨域请求以及axios封装
1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...