鍍金池/ 問答/C  HTML/ vue webpack模板構(gòu)建的項(xiàng)目 里如何調(diào)用 屬性?

vue webpack模板構(gòu)建的項(xiàng)目 里如何調(diào)用 屬性?

后端碼農(nóng),前端學(xué)習(xí)中,問題很簡(jiǎn)單,別噴我。
我的代碼:

export default {
  name: 'hello',
  data () {
    return {
      msg: 'welcome',
      object:{
         name: 'Runoob' ,
         url: 'Google' ,
         slogan: 'Taobao' 
      }
    }
  },
  methods:{
    doSomething: function(){
      this.msg = 'welcome BeiJing'
    }
  },
  computed:{
    reversedMessage:function(){
        return this.msg.split('').reverse().join('');
    },
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }



};



// 調(diào)用 setter, vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新
vm.site = '菜鳥教程 https://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

我的報(bào)錯(cuò):

HelloWorld.vue?18db:72 Uncaught ReferenceError: vm is not defined
    at eval (HelloWorld.vue?18db:72)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue (app.js:758)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (HelloWorld.vue?9042:1)
    at Object../src/components/HelloWorld.vue (app.js:1039)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (selector.js?type=script&index=0!./src/App.vue:1)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:750)
(anonymous) @ HelloWorld.vue?18db:72
./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue @ app.js:758
__webpack_require__ @ app.js:679
fn @ app.js:89
(anonymous) @ HelloWorld.vue?9042:1
./src/components/HelloWorld.vue @ app.js:1039
__webpack_require__ @ app.js:679
fn @ app.js:89
(anonymous) @ selector.js?type=script&index=0!./src/App.vue:1
./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ app.js:750
__webpack_require__ @ app.js:679
fn @ app.js:89
(anonymous) @ App.vue?a8e9:1
./src/App.vue @ app.js:1024
__webpack_require__ @ app.js:679
fn @ app.js:89
(anonymous) @ main.js?1c90:1
./src/main.js @ app.js:1047
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1064
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:8566 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
sockjs.js?3600:1605 XHR finished loading: GET "http://localhost:8080/sockjs-node/info?t=1535449391140".
回答
編輯回答
痞性

更新:我好像知道樓主的問題在哪了。
一方面樓主想手動(dòng)去vm.data的方式體驗(yàn)vue。 另一方面,卻又使用了webpack工具。

1.你如果想去vm.data 觀察數(shù)據(jù)變化,

那你恐怕就得采用樓上的方法,不要用webpack構(gòu)建工具
直接let vm = new Vue(...);

2.我就是想用webpack,怎么解決?

那就不要用vm.data這樣的方法了,
直接在mounted方法里執(zhí)行this.data.name = "老王"

3.你仔細(xì)看菜鳥教程里的,他也是

 let vm = new Vue(...);

4.總結(jié)
如果是剛開始接觸想體驗(yàn)vue, 那就直接html頁(yè)面上引入vue.js, 按照菜鳥教程/vue官網(wǎng)的教程

對(duì)照著敲(因?yàn)檫@些教程都是這種方式來的,比較容易上手)。覺得差不多再結(jié)合webpack腳手架,看一些實(shí)戰(zhàn)DEMO

2017年11月8日 14:20
編輯回答
痞性

vm沒有定義啊,你要先把vue賦值給一個(gè)變量。

import vm form 'vue'
2017年8月28日 09:46
編輯回答
醉淸風(fēng)

每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的:
var vm = new Vue({
// 選項(xiàng)
})

2017年3月21日 04:02