zoukankan      html  css  js  c++  java
  • vue启动组件写法

    webpack配置文件(webpack.base.conf.js):

    module.exports = {
      entry: {
        app: './src/main.js'
      },
      ......
    }
    View Code

    App.vue

    <template>
        <div id="app">
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'app',
            components: {
            }
        }
    
    </script>
    View Code

    main.js

     1 import babelpolyfill from 'babel-polyfill'
     2 import Vue from 'vue'
     3 import App from './App'
     4 import ElementUI from 'element-ui'
     5 import 'element-ui/lib/theme-default/index.css'
     6 import VueRouter from 'vue-router'
     7 import store from './vuex/store'
     8 import Vuex from 'vuex'
     9 import NProgress from 'nprogress'
    10 import 'nprogress/nprogress.css'
    11 import routes from './routes'
    12 import Mock from './mock'
    13 //Mock.bootstrap(); //会影响http请求
    14 import 'font-awesome/css/font-awesome.min.css'
    15 
    16 Vue.use(ElementUI)
    17 Vue.use(VueRouter)
    18 Vue.use(Vuex)
    19 
    20 NProgress.configure({ showSpinner: false });
    21 
    22 const router = new VueRouter({
    23   routes
    24 })
    25 
    26 /*
    27 router.beforeEach((to, from, next) => {
    28   //NProgress.start();
    29   if (to.path == '/login') {
    30     sessionStorage.removeItem('user');
    31   }
    32   let user = JSON.parse(sessionStorage.getItem('user'));
    33   if (!user && to.path != '/login') {
    34     next({ path: '/login' })
    35   } else {
    36     next()
    37   }
    38 })
    39 */
    40 //router.afterEach(transition => {
    41 //NProgress.done();
    42 //});
    43 
    44 new Vue({
    45   //el: '#app',
    46   //template: '<App/>',
    47   router,
    48   store,
    49   //components: { App }
    50   render: h => h(App)
    51 }).$mount('#app')
    View Code

     $mount()手动挂载

    当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
    假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:
    <div id="app">
    {{a}}
    </div>
    <button onclick="test()">挂载</button>
    <script>
    var obj = {a: 1}
    var vm = new Vue({
    data: obj
    })
    function test() {
    vm.$mount("#app");
    }
    初始,显示的是{{a}}
    当点击按钮后,变成了1
    参考http://blog.csdn.net/qq20004604/article/details/52303754

  • 相关阅读:
    在C#程序中模拟发送键盘按键消息
    C# UDPCLIENT多线程实例
    【转】WINFORM下FTP客户端的实现
    抓取屏幕或窗体并保存成图片
    c# 判断窗体已打开则显示为焦点
    【转】C#中dataGridView用法实例分析
    【转】VC6控件小记
    .Net部署二三事之一——如何为VS安装文件MSI制作更新补丁MSP
    [转]C#串口serialPort操作
    VS向IIS发布C#或VB应用程序
  • 原文地址:https://www.cnblogs.com/cyan1/p/6555381.html
Copyright © 2011-2022 走看看