vue框架的使用

vue框架的使用：

<div id="app">

    <h1>{{message}}</h1>
    <p v-if="seen"> 现在你能看见我 </p>
    <a href="javscript:;" v-on:click="greet">{{greet_text}}</a>

    <select v-bind:id="greet_select" v-model="selected" v-on:change="greetSelect">
        <option value="out">出来</option>
        <option value="in">回去</option>
    </select>
</div>

var vm = new Vue({
        el:'#app', //获取节点
        data:{
            message:'hello vue!', //所使用到的变量
            seen:false,
            greet_text:'出来',
            selected:"in"
        },
        created : function () {//生命周期中的created

        },

        methods:{ //方法
            greet: function(event){ 
                if(this.seen){
                    this.seen = false;
                    this.greet_text="出来";
                    this.selected="in";
                }else{
                    this.seen=true;
                    this.greet_text="回去";
                    this.selected="out";
                }

            },
            showEditProduct:function (event) {

               jQuery("#edit_product").modal();
            },
            greetSelect:function(event){
                var val = event.target.value;
                if(val=='in'){
                    this.seen=false;
                    this.greet_text="出来";
                }else{
                    this.seen=true;
                    this.greet_text="回去";
                }

            },
       },
    });