基本语法

v-for循环

<ul>
    <template v-for="item in message">
        <v-message :msg="item.content" :id="$index"></v-message>
    </template>
</ul>

v-if 条件语句

<div class="btn-box">
    <a href="###" class="btn-reply" v-if="get">回复</a>
    <template v-else>
        <a href="###" class="btn-edit right">编辑</a>
        <a href="###" class="btn-delete right" v-on:click="remove($event)">删除</a>
    </template>
</div>

v-on绑定事件

• 1、模板

  <a href="###" class="btn-delete right" v-on:click="remove($event)">删除</a>
  

• 2、javascript代码

  module.exports = {
    data: function(){
        return {};
    },
    props: ["get", "msg", "id"],
    methods: {
        remove: function(event){
            event.preventDefault();
            this.$dispatch("removeMessage", this.id);
        }
    }
  };
  

  v-model表单数据监听

• 1、模板

  <div class="send-box">
    <input type="text" v-model="newMessage" />
    内容:
  </div>
  

• 2、javascript代码

  module.exports = {
    data: function(){
        return {
            newMessage: ""
        };
    },
    methods: {
        addMessage: function(){
            if(this.newMessage!=""){
                var newMessage = this.newMessage;
                this.newMessage = "";
            }
        }
    }
  }