vue从入门到开发--2-基本结构

1.App.vue 是根文件，所有的其他组件的执行均需要在此文件内导入并调用才能实现。

　　import (导入其他组件) Test (其他组件的名字) from ‘./components/test’(组件的位置)；

　　export default{} 调用组件 name:’’ 当前作用域 conponents:{}内含各个组件的名字；

　　<template><div id=’app’>这是vue容器,所有的组件都在此处调用实现</div></template>。

　　文件内，我们主要的代码都在src文件夹内，assets一般存放图片，css等静态文件，conponents一般存放vue组件，app.vue是根组件，main.js是设置路由服务等的文件.

2.组件形成

　　1）结构部分template 每一个组件必须有这个标签；

　　2）script逻辑语法部分

　　export default (使组件可被外部组件调用) name(重要属性:和文件名字一样)；

　　data(){return{}} 显示的数据 return以对象的形式返回数据；

　　所有的数据都在data内实现，所有的事件都在methods内实现。

3）style样式部分

　　scoped 固定样式作用域，只对当前结构部分起作用.

(PS:新手学习，有不对的地方希望大佬们帮忙纠正，万分感谢!)

转载于:https://www.cnblogs.com/moutudou/p/7263323.html

vue从入门到开发--2-基本结构相关推荐

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.天知道概述 3.模板展示 4.回车键查询功能开发 5.点击查询功能开发 6.js完整代码及接口 7.结束语点击进入Vue❤学习专栏~ 1.引言最近呢,也是在自学Vue中,通 ...
Vue框架入门(一)---开发简易计算器
涉及知识: HTML.CSS.JavaScript Vue(v-for.v-model.v-on.v-clock) Gitee仓库 :https://gitee.com/vgtime123/Calcu ...
vue从入门到开发--4--处理http请求
一: 在main.js里面处理http请求模块,因为没有这个模块,所以需要先安装这个模块:npm install vue-resource --save 安装完毕之后,导入这个模块,并使用中间件将其使 ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
vue项目开发的目录结构
vue项目开发的目录结构一.通过命令行工具安装vue(npm install webpack vue-project) build -- 项目构建的相关代码 config -- 配置目录,包括端口. ...
Vue.js+Node.js开发实战：从入门到项目上线
<Vue.js+Node.js开发实战:从入门到项目上线>以JavaScript语言为基础,以一个完整的网站开发过程为主线,介绍了一整套面向Web项目的开发技术,如使用Node.js搭建服 ...
android app开发混合开发,混合开发入门 Vue结合Android/iOS开发仿京东项目App
download:混合开发入门 Vue结合Android/iOS开发仿京东项目App 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...

vue从入门到开发--2-基本结构

vue从入门到开发--2-基本结构相关推荐

最新文章

热门文章