参考文档

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. 彻底关闭Postprocess

    即使场景中没有postprocess volume,场景中也会有默认的postprocess volume效果,如果需要彻底关闭postprocess, 可以使用命令: sg.PostProcessQ ...

  2. Cookie由谁设置、怎么设置、有什么内容？

    Cookie是由服务器生成,保存在客户端本地的一个文件,通过response响应头的set-Cookie字段进行设置,下面是一个示例: Cookie包含什么信息? 它可以记录你的用户ID.密码.浏览过 ...

  3. Linux之虚拟机里的REHL7的IP

    RHEL7最小化安装之后(桥接模式),我们查看本机IP, ip addr ifconfig 我们要修改配置文件 找到目录 找到文件,用vi编辑器打开修改配置文件 保存退出后,需要重启网络服务 只有我们 ...

  4. R python在无图形用户界面时保存图片

    在用python的matplotlib,和R中自带的作图,如果想保存图片时,当你有图形用户界面时是没有问题的,但是当没有图形用户界面时,会报错: 在R中,解决办法: https://blog.csdn ...

  5. 【CDN+】 Hbase入门 以及Hbase shell基础命令

    前言 大数据的基础离不开Hbase, 本文就hbase的基础概念,特点,以及框架进行简介, 实际操作种需要注意hbase shell的使用. Hbase  基础 官网:https://hbase.ap ...

  6. statistics——数学统计函数

    statistics——数学统计函数 转自:https://blog.csdn.net/zhtysw/article/details/80005410 资源代码位置:Lib/statistixs.py ...

  7. 127、TensorFlow 计算图执行(二)

    import tensorflow as tf # Define a placeholder that expects a vector of three floating-point values ...

  8. android:imeOptions="actionDone"

    把EditText的Ime Options属性设置成不同的值,Enter键上可以显示不同的文字或图案actionNone : 回车键,按下后光标到下一行actionSend : SendactionN ...

  9. idea中配置Resin运行环境

    文章目录 背景 下载resin 配置idea 背景 为了能够读Resin的源码,只看源码看不到值,故想在idea中通过断点查看. 下载resin https://caucho.com/products ...

  10. 网易新闻实战 --- flask,ORM, Ajax异步删除

    项目概述: 包含功能: 前端-- 新闻首页 新闻分类页 新闻详情页 后端-- 后台新闻管理(列表,分页) 新增新闻 修改新闻 删除新闻(AJAX)