zoukankan      html  css  js  c++  java
  • 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。如代码片段:

  • 相关阅读:
    [51Nod] 配对
    [Poj] Roads in the North
    【Java学习笔记之二十六】深入理解Java匿名内部类
    【Java学习笔记之二十五】初步认知Java内部类
    【Java学习笔记之二十四】对Java多态性的一点理解
    【Java学习笔记之二十三】instanceof运算符的用法小结
    【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
    图论--拓扑排序模板
    hdu 5384 AC自动机
    java大数
  • 原文地址:https://www.cnblogs.com/hailongchen/p/7451857.html
Copyright © 2011-2022 走看看