在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue-cli創(chuàng)建的Vue對象數(shù)據(jù)怎么渲染

Vue-cli創(chuàng)建的Vue對象數(shù)據(jù)怎么渲染

我用Vue-cli創(chuàng)建了一個(gè)最簡單的項(xiàng)目，在main.js里面給Vue實(shí)例添加了data屬性，為什么不能顯示在頁面上．同樣的問題也會(huì)出現(xiàn)在用webpack + vue-loader的場景．現(xiàn)在所有數(shù)據(jù)都只能添加到Component里面．

main.js

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

Vue.config.productionTip = false

new Vue({
    el: "#app",
    data() {
        return {
            msg: "Hello from Vue!"
        }
    },
    //render: h => h(App)
}).$mount('#app');

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>vue-cli-example</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-cli-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      {{msg}}
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
回答
編輯回答
別瞎鬧

因?yàn)?這個(gè) html 只是給你是給你掛載用的
vue腳手架 不會(huì) 去編譯 這個(gè) html
他們只會(huì)去編譯 .vue 單文件 組件 文件
你只能把數(shù)據(jù) 屬性什么的 寫在 .vue 中

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

可以學(xué)習(xí)一下 這個(gè)開源項(xiàng)目 基于 vue2 + vuex 構(gòu)建一個(gè)具有 45 個(gè)頁面的大型單頁面應(yīng)用

2017年7月27日 11:31