后端码农,前端学习中,问题很简单,别喷我。
我的代码:
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]
}
}
}
};
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 https://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
我的报错:
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".
更新:我好像知道楼主的问题在哪了。
一方面楼主想手动去
vm.data
的方式体验vue
。 另一方面,却又使用了webpack
工具。1.你如果想去vm.data 观察数据变化,
那你恐怕就得采用楼上的方法,不要用
webpack
构建工具直接
let vm = new Vue(...)
;2.我就是想用
webpack
,怎么解决?那就不要用
vm.data
这样的方法了,直接在
mounted
方法里执行this.data.name = "老王"
3.你仔细看菜鸟教程里的,他也是
4.总结
如果是刚开始接触想体验vue, 那就直接html页面上引入vue.js, 按照菜鸟教程/vue官网的教程
对照着敲(因为这些教程都是这种方式来的,比较容易上手)。觉得差不多再结合webpack脚手架,看一些实战DEMO