vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

what's difference with `new component`and `new Vue`? #266

Open zjjott opened 9 years ago

zjjott commented 9 years ago

I use Vue for "Assembly line" program model:

this is runnable code: http://jsfiddle.net/zhulegequ/unuj00fu/3/

<div class="col-lg-4 col-xs-6" >
    <div class="panel panel-inverse" id="search">
        <div v-component="search-form">

        </div>
    </div>
</div>
<div class="col-lg-4 col-xs-6" id="user-info">
    <div v-component="user-info">

    </div>
</div>

<script type="text/template" id="searchForm">
<div class="panel-body">
    <div class="input-group">
        <input type="text" class="form-control" name="search"  placeholder="Input for search" v-model="search" v-on="keyup:startSearch | key 13">
        <div class="input-group-btn">
            <button type="button" class="btn btn-success"
             v-on="click:startSearch">
             Search
            </button>
        </div>
    </div>
    <ul v-if="error" class="parsley-errors-list filled">
        <li v-text="error">
        </li>
    </ul>
</div>
</script>
<script type="text/template" id="userInfoTemplate">
<div class="panel panel-inverse" id="search">
    <table class="table table-condensed">
        <tbody>
            <tr>
            <th>username</th>
            <td v-text="name"></td>
            <th>Email</th>
            <td v-text="email"></td>
            </tr>
        </tbody>
    </table>
</div>
</script>
FormComponent = Vue.extend
    template: $('#searchForm').html()
    data:
        error:null
    methods:
        startSearch:(e)->
            self=@
            $.ajax
                method:"post"
                url:"/echo/json/"
                data:
                    json:JSON.stringify
                        name:self.search
                        email:"#{self.search}@email.com"
            .success (respon)->
                new UserInfoComponent#why not Vue
                    el:"#user-info"
                    data:respon
UserInfoComponent = Vue.extend
    template: $('#userInfoTemplate').html()
    methods:
        reload:->
            console.log "reload click"
        setData:(data)->
            @$data=data
    compiled:->
        console.log "compiled"
        @$log()
Vue.component('search-form',FormComponent)
Vue.component('user-info',UserInfoComponent)
formview = new Vue#why not FormComponent?
    el:"#search"

at the ajax callback, why new UserInfoComponent work, instead ofnew Vue?

yyx990803 commented 9 years ago

new UserInfoComponent also works.

new Vue is like "bootstrapping" because you need a root-level vm to kickstart the compilation.