问答详情
源自:2-1 创建第一个Vue实例

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 12:06

个回答

  • NoError2018
    2018-09-18 14:53:04

    <!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>


  • NoError2018
    2018-09-18 14:52:11

    引入了也会报同样的错误 我再重新发一下问题吧 我的代码整理了一下 谢谢