最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么写网页

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js写网页的方法:

    所谓的单页应用,大概因为整个vue项目中只存在一个html文件吧,所谓页面跳转,做的只是页内的界面的更新。对于整个项目,index.html是我们所见的内容,src\App.vue做的是所有页面共有的部分,真正编辑页面的是src\components中的vue文件,定义路由跳转(将components嵌入App.vue)在src\router,图片等资源文件放在src\assets,与后端交接数据通过的是vue界面中接口访问获取数据,如axios。

      具体的如下所示

      <1>index.html中我们只可以看到一个'#app'的div,作为项目网页的主体,我们可以在index.html中引入全局的js文件

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue-test</title>
        <script src="../static/lib/jquery-3.3.1.min.js"></script><!--可以在这里引入全局的js文件-->
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

      <2>src\mian.js可以看到为index.html中'#app'绑定App.vue的操作

    // 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'
    import router from './router'
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

      <3>App.vue中可以编写所有网页公共的部分,如导航栏、页头页尾等等。其中的<router-view/>则是引入的子组件的位置,具体的联系之后再说。

    <template>
      <div id="app">
        <img src="./assets/logo.png"><!--所有网页共有-->
        <router-view/><!--组件位置-->
      </div>
    </template>
    <script>
    export default {
      name: 'App'
    }
    </script>
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

      <4>components中放的是子组件.vue文件,如示例文件helloworld.vue,<temple></temple>元素中以单独一个div开始定义页面,在export default中绑定数据和页面。

      <5>那么子组件是如何和App.vue联系起来的呢?通过router文件夹下的index.js联系的,如下图。

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

    以上就是vue.js怎么写网页的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么写网页
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 536稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情