Vue is not defined

Vue.component('todo-item',{
  template:'<li>item</li>'
});

export default {
  data:function(){
    return {
     // title :'<span>?</span>This is my first way',
      items:[],
      newItem:'',
      childWold:'',
      isFinished:'thisIsLiClass',
      ishouse:'thisisLihouse',
      firstName:'',
      lastName:'',
      count:0,
      title:'this is hello world',
      content:'balabalabalaba',
      show:true,
      inputValue:''
    }
  },
  computed:{
    fullName:function(){
      return this.firstName + ' ' + this.lastName
    }
  },
  watch:{
    fullName:function(){
      this.count++;
    }
  },
  methods:{
    handleClick:function(){
      this.title = 'how are you'
    },
    handleToggle:function(){
      this.show = !this.show
    },
    handleSubmit:function(){
      this.items.push(this.inputValue);
      this.inputValue = '';
    }
  }

}

NoError2018

2018-09-18

源自：vue2.5入门 2-1

关注问题我要回答

2018

操作

收起

5 回答

NoError2018 提问者
2018-09-18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="inputValue">
        <button @click="handleSubmit">提交</button>
    </div>

    <ul>
 <!--<li v-for="(item,index) of items" :key="index">{{item}}</li>-->
 <todo-item v-for="(item,index) of items" :key="index" :content="item"></todo-item>
    </ul>
</div>

<script>
Vue.component('todo-item',{
    props:['content'],
 template:'<li>{{content}}</li>'
})
new Vue({
    el:'#root',
 data:{
        items:[],
 inputValue:''
 },
 methods:{
        handleSubmit:function () {
            this.items.push(this.inputValue);
 this.inputValue = ''
 }
    }
})
</script>
</body>
</html>