参考文档

https://vuejs.bootcss.com/v2/api/

https://router.vuejs.org/zh-cn/essentials/getting-started.html

http://vuejs-templates.github.io/webpack/structure.html

index.html文件

index.html模板。其会调用main.js文件，用于绑定vue实例，最终渲染页面。

This is the template index.html for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this template to render the final HTML.

通过上述引用内容，可知这个文件其实是webpack需要用的东东。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>my-project</title>

  </head>

  <body>

    <div id="app"></div>    // 渲染id=app的内容（需要全局唯一）。做几个小测试比如注释掉这句，就会出现“ Cannot find element: #app”

    <!-- built files will be auto injected -->

  </body>

</html>

src/main.js

应用的入口文件

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'     // ./App省略了文件格式后缀.vue。   import的这句是ES6的语法，用于加载模块。等价于  var App = require('./App.vue')

import router from './router'

import vueResource from 'vue-resource'   // vue-resource 插件

import 'bootstrap/dist/css/bootstrap.min.css'   // 引入bootstrap

import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(vueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',      // 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 即定义实例的作用域

  router,    //   应该是路由注入，而且此处是全局的注入（此处没找到明确的参考）。其会寻找所有components文件夹下注册的路由对象。如基础框架的src/router/index.js中的routes[]

  template: '<App/>',     // 引用名为“App”的模板。*一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。*

  components: { App }     // 注册组件，使之在该实例上可用

})

src/App.vue文件



限制: 只有作为组件选项时起作用。允许组件模板递归地调用自身。

<router-view>

路由出口，路由匹配到的组件将渲染在这里

src/components/Hello.vue文件

从该文件的<script>中可以看到一个奇异的data ()。如代码片段：

这个是Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)。详细论述，可参考官方api文档

另外，在前端工程中，肯定会绑定JS事件，调用一些function，比如@click='login()'，则在<script>中会用到methods这个API。如代码片段：

VueJS基础框架代码介绍的更多相关文章

  1. 快速接入 Android BLE 开发的基础框架

    代码地址如下:http://www.demodashi.com/demo/12092.html ** Android BLE基础操作框架,基于回调,操作简单.包含扫描.多连接.广播包解析.服务读写及通 ...

  2. 基于RxJava2+Retrofit2精心打造的Android基础框架

    代码地址如下:http://www.demodashi.com/demo/12132.html XSnow 基于RxJava2+Retrofit2精心打造的Android基础框架,包含网络.上传.下载 ...

  3. Entity Framework 实体框架的形成之旅--几种数据库操作的代码介绍（9）

    本篇主要对常规数据操作的处理和实体框架的处理代码进行对比,以便更容易学习理解实体框架里面,对各种数据库处理技巧,本篇介绍几种数据库操作的代码,包括写入中间表操作.联合中间表获取对象集合.递归操作.设置 ...

  4. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  5. Java并发包下锁学习第二篇Java并发基础框架-队列同步器介绍

    Java并发包下锁学习第二篇队列同步器 还记得在第一篇文章中,讲到的locks包下的类结果图吗?如下图: ​ 从图中,我们可以看到AbstractQueuedSynchronizer这个类很重要(在本 ...

  6. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  7. .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍

    Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...

  8. 准备.Net转前端开发-WPF界面框架那些事，搭建基础框架

    题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...

  9. Objective-c 基础框架（初学者－总结）

    一个框架其实就是一个软件包,它包含了多个类.Mac 操作系统提供了几十个框架,主要帮助开发者快速的在Mac 系统上开发应用程序.其中包括一些基础框架,就是为所有程序开发提供基础的框架,其中几个常用的类 ...

随机推荐

  1. eclipse 4.5 离线安装mybatis generator1.3.6卡在Install New Software的解决方法

    转载:https://blog.csdn.net/ssshen14/article/details/80004459 离线插件 下载:https://github.com/mybatis/genera ...

  2. （转）字符编码笔记：ASCII，Unicode 和 UTF-8

    转:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之 ...

  3. 【CDN+】 Kylin 的初步认识与理解

    前言 项目中用到了Kylin框架来处理数据,那么作为项目成员需要了解哪些关于Kylin的知识呢,本文就Kylin得基本概念和原理进行简述. Kylin基本概念 首先想到的学习路径是Kylin官网: h ...

  4. DB-MD：MD/主数据

    ylbtech-DB-MD:MD/主数据 主数据(MD Master Data)指系统间共享数据(例如,客户.供应商.账户和组织部门相关数据).与记录业务活动,波动较大的交易数据相比,主数据(也称基准 ...

  5. 本站页脚HTML回顶部代码

    <style type="text/css">.top { width: 50px; height: 50px; background-color: #F0F0F0; ...

  6. RSA - 原理、特点（加解密及签名验签）及公钥和私钥的生成

    Wiki - RSA加密演算法 Wiki - 欧拉函数 Wiki - 模反元素 ASN.1 格式标准 RSA算法原理(二) 注意: RSA 加密或签名后的结果是不可读的二进制,使用时经常会转为 BAS ...

  7. Vagrant 手册之 Provisioning - 概述

    原文地址 通过 Vagrant 中的 provisioner 配置程序,可以在使用 vagrant up 启动虚拟机时,在虚拟机上执行安装软件.更改配置等操作. box 通常是通用的,而每个项目总有自 ...

  8. jmeter两种录制方式

    jmeter两种录制方式 一.Badboy Badboy是一款不错web自动化测试工具,利用它来录制脚本,并且录制的脚本可以直接保存为JMeter文件来使用. Badboy  version 2.1. ...

  9. 【ABAP系列】SAP smartforms金额字段产生空格，除去空格的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP smartforms金额 ...

  10. spring的4种事务特性，4种隔离级别，7种传播行为

    spring事务: 什么是事务: 事务逻辑上的一组操作,组成这组操作的各个逻辑单元,要么一起成功,要么一起失败. 事务特性(4种): 原子性 (atomicity):强调事务的不可分割. 一致性 (c ...