Vue實例理解

時間 2019-12-04

標籤 vue 實例理解简体版

原文原文鏈接

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <!-- app：掛載Vue實例的的DOM節點-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

複製代碼

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  /**
   * [el  該vue實例掛載到 index.html中 #app節點下]
   * @type {String}
   */
  el: '#app',
  /**
   * [router 路由：配置頁面組件的匹配路徑]
   * @type {String}
   */
  router,
  /**
   * [template 一個字符串模板做爲 Vue 實例的標識使用。模板將會 替換 掛載的元素（index.html中的 #app節點）。掛載元素的內容都將被忽略，除非模板的內容有分發插槽]
   * @type {String}
   */
  template: '<App/>',
  /**
   * [components 聲明在該Vue實例下的組件， 以供template使用]
   * @type {Object}
   */
  components: { App }
})
複製代碼

router.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
    }
  ]
})
複製代碼

當訪問http://127.0.0.1:8080/時渲染以前的代碼爲：html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <!-- app：掛載Vue實例的的DOM節點-->
   <div id="app">
    <img src="./assets/logo.png">
   <!-- router-view 至關於容器， 渲染路由匹配到的路徑，對應的組件 -->
    <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
  </div>
  </body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。