vue--实例化对象
根目录下的文件,这些是创建vue项目时生成的配置文件

node_modules=> 里面的文件是项目开发过种中的各种依赖,我们暂且不用去深入了解;
public=> 主要放的是一些公用的文件,比如一些icon(即我们在收藏网址,网址前面的图标识别)
src=> 这是我们整个项目的核心部分。我们所写的代码会全部放在这个文件夹下。
assets=> 存放的是一些静态资源:比如图片,css文件,js文件;
components=> 存放组件
views=> 存放所有的页面
App.vue=> 根组件
main.js=> 入口文件
router.js=> 路由文件
store=> 根实例状态存储文件
首先打开入口文件main.js:
main.js作用:
在项目开发中,公共的组件,依靠等从此文件中导入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false
接下来实例化vue对象
new Vue({
router, //路由
store, //状态存储
render: h => h(App) //渲染组件
}).$mount('#app')
Vue=> 全局构造函数,new Vue里面的内容则是构造参数。router, store,render则是参数选项。
用到的参数选项需要在本文件顶部进行引入,否则会报错。
$mount('#app') => 将实例化的对象挂载到#app这个节点上。
#app 是publick文件夹下的index.html入口文件里的一个id。也就是说,我们对App这个组件进行渲染后插入到这个节点里并显示出来。
这是实例化另一个写法
new Vue({
el: "#app",
router,
store,
render: h => h(App)
})
在实例化vue时,el和$mount基本相同。
原文链接:https://mp.weixin.qq.com/s/U18ICZAz7TwAs9ck8zulag
vue--实例化对象的更多相关文章
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- Vue实例对象的数据选项(火柴)
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- [转]ThinkPHP中实例化对象M()和D()的区别,select和find的区别
1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...
- java实例化对象的方式
一.Java中创建(实例化)对象的五种方式 1.用new语句直接创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); ...
- PHP动态实例化对象并向构造函数传递参数
在框架开发,模块化开发等场合,我们可能有一种需求,那就是在PHP运行时动态实例化对象. 什么是动态实例化对象呢?我们先来看一下PHP有一种变量函数(可变函数)的概念,例如如下代码: function ...
- 【PHP面向对象(OOP)编程入门教程】5.如何实例化对象?
我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...
- PHP面向对象(OOP)编程入门教程————如何实例化对象?
我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...
- c++实例化对象
今天看到c++实例化对象,有点懵了.Activity_Log the_log (theLogPtr, Tree->GetBranch());这是那一段小代码,开始没看懂.java看习惯了总喜欢n ...
- 1、c#中可以有静态构造方法,而java中没有,例如在单例模式中c#可以直接在静态构造中实例化对象,而java不可以
1.c#中可以有静态构造方法,而java中没有,例如在单例模式中c#可以直接在静态构造中实例化对象,而java不可以
随机推荐
- linux命令sync,shutdown
1.数据同步写入磁盘: sync 输入sync,那举在内存中尚未被更新的数据,就会被写入硬盘中 hling@hling:~$ sync 2.惯用的关机指令:shutdown 实例:
- EasyUI Tree节点拖动到指定容器
效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text 代码: <!DOCTYPE html> <html> <head> <meta ch ...
- SQL Fundamentals: 子查询 || 分析函数(PARTITION BY,ORDER BY, WINDOWING)
SQL Fundamentals || Oracle SQL语言 子查询(基础) 1.认识子查询 2.WHERE子句中使用子查询 3.在HAVING子句中使用子查询 4.在FROM子句中使用子查询 5 ...
- AngularJS实现可伸缩的页面切换
AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...
- odoo中self的使用
一:self是什么 目前新版的Odoo中使用到的self,是对 游标cr.用户ID.模型.上下文.记录集.缓存 的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...
- 洛谷P3455 ZAP-Queries [POI2007] 莫比乌斯反演+数论分块
正解:莫比乌斯反演 解题报告: 传送门! 首先这题刚看到就很,莫比乌斯反演嘛,和我前面写了题解的那个一模一样的,所以这儿就不讲这前边的做法辣QAQ 但是这样儿还有个问题,就现在已知我每次都是要O(n) ...
- Redis的数据结构之字符串
五种数据类型: 字符串(String) 字符串列表(list) 有序字符串集合(sorted set) 哈希(hash) 字符串集合(set) Key定义的注意点: 不要过长, 不要过短, 统一的命名 ...
- 20.0-uC/OS-III移植
1.CPU移植要求: 1) 处理器有对应的能产生可重入代码的C编译器2) 处理器支持中断且能提供周期性的中断(通常介于10到1000Hz之间). 3) 可以关中断和开中断4) 处理器支持存储和载入堆栈 ...
- 基于UVM的verilog验证
Abstract 本文介绍UVM框架,并以crc7为例进行UVM的验证,最后指出常见的UVM验证开发有哪些坑,以及怎么避免. Introduction 本例使用环境:ModelSim 10.2c,UV ...
- Http协议Status状态代码
Http协议:Http协议(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,绝大多数的Web开发,都是构建在HTTP协议之上的Web应用http请求有三部分 ...