zoukankan      html  css  js  c++  java
  • vuejs组件

    <div id='root'>
      <ul>
        <todo-item></todo-item>
      </ul>
    </div>
    <script>
      Vue.component('todo-item',{
        template:'<li>item</li>'
      })
    </script>
    全局组件:上面这种组件叫做全局组件,这种组件定义好了之后,直接在任何一个地方都可以使用这个组件



    <div id='root'>
      <ul>
        <todo-item></todo-item>
      </ul>
    </div>
    <script>
      var todoItem = {
        template:'<li>item</li>'
      }
      new Vue({
        el:'#root',
        components:{
          'todo-item':todoItem
        }
      })
    </script>
    局部组件,上面这种叫做局部组件,需要通过components进行注册
    每一个组件都是一个实例,一个vue是由千千万万个实例,也就是组件组成



    父组件和子组件的通信需要怎么做?
    需要发布订阅模式来做这个事情,子组件注册一个事件,父组件进行监听
    <div id='root'>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>提交</button>
      <ul>
        <todo-item
          v-for='(item,index) of list'
          :key='index'
          :content='item'
          :index='index'
          @delete='handleDelete'
        >
        </todo-item>
      </ul>
    </div>
    <script>
      Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
          handleClick:function(index){
            this.$emit('delete',index)
          }
        }
      })
     
      new Vue({
        el:'#root',
        data:{
          inputValue:'',
          list:[]
        },
        methods:{
          handleSubmit:function(){
            console.log(this.inputValue);
            this.list.push(this.inputValue);
            this.inputValue = '';
          },
          handleDelete:function(index){
            this.list.splice(index,1)
          }
        }
      })
    </script>
  • 相关阅读:
    java操作Redis
    Redis安装和基本操作
    IDEA使用教程+JRebel破解
    java环境配置
    qtp10安装步骤(比较完整)
    c++第一章1.6
    软件测试第二章作业
    c++作业22题
    c++第二周阶段小测2
    oracle12c数据库第一周小测验
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9588707.html
Copyright © 2011-2022 走看看