VueJS基础框架代码介绍
参考文档
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基础框架代码介绍的更多相关文章
- 快速接入 Android BLE 开发的基础框架
代码地址如下:http://www.demodashi.com/demo/12092.html ** Android BLE基础操作框架,基于回调,操作简单.包含扫描.多连接.广播包解析.服务读写及通 ...
- 基于RxJava2+Retrofit2精心打造的Android基础框架
代码地址如下:http://www.demodashi.com/demo/12132.html XSnow 基于RxJava2+Retrofit2精心打造的Android基础框架,包含网络.上传.下载 ...
- Entity Framework 实体框架的形成之旅--几种数据库操作的代码介绍（9）
本篇主要对常规数据操作的处理和实体框架的处理代码进行对比,以便更容易学习理解实体框架里面,对各种数据库处理技巧,本篇介绍几种数据库操作的代码,包括写入中间表操作.联合中间表获取对象集合.递归操作.设置 ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...
- Java并发包下锁学习第二篇Java并发基础框架-队列同步器介绍
Java并发包下锁学习第二篇队列同步器 还记得在第一篇文章中,讲到的locks包下的类结果图吗?如下图: 从图中,我们可以看到AbstractQueuedSynchronizer这个类很重要(在本 ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍
Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...
- 准备.Net转前端开发-WPF界面框架那些事，搭建基础框架
题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...
- Objective-c 基础框架（初学者－总结）
一个框架其实就是一个软件包,它包含了多个类.Mac 操作系统提供了几十个框架,主要帮助开发者快速的在Mac 系统上开发应用程序.其中包括一些基础框架,就是为所有程序开发提供基础的框架,其中几个常用的类 ...
随机推荐
- POJ - 3481 splay板子
Double Queue 默写splay板子 很多细节问题... #include<cstdio> #include<iostream> using namespace std ...
- 23 October
[HAOI2010] 最长公共子序列 求S串与T串的 最长公共子序列 的 长度 及其 个数. 动态规划递推式: \[ f(i,j)=\max\left\{ f(i-1,j), f(i,j-1) \ri ...
- EZOJ #362历史
分析 就是保存前pi-1个数每个ai出现多少次 然后维护这些数当前剩余的最大值 每次和新加进来的比较即可 如果新的大直接取 否则新的最大值一定不大于原来的最大值 因此o(n) 代码 #include& ...
- 【CDN+】 Hbase入门 以及Hbase shell基础命令
前言 大数据的基础离不开Hbase, 本文就hbase的基础概念,特点,以及框架进行简介, 实际操作种需要注意hbase shell的使用. Hbase 基础 官网:https://hbase.ap ...
- leetcode 88. C++ 合并两个有序数组
Leetcode 88. 合并两个有序数组 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 ...
- elasticsearch安装分词插件
在常用的中文分词器.拼音分词器.繁简体转换插件.国内用的就多的分别是:elasticsearch-analysis-ikelasticsearch-analysis-pinyinelasticsear ...
- RESTful再理解
目录 目录 前言 RESTful的目的 REST的含义 表现层 状态转化 无状态协议HTTP 最后 前言 这是在经过一段时间的积累后,对RESTFul框架的再一次更深入的理解.希望能够将零散的知识点连 ...
- swiper在vue中的用法
首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...
- 【ABAP系列】SAP webservice HTTP框架出错 404错误
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP webservice H ...
- Bootstrap 学习笔记7 模态框插件
网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...