vue.js的初次尝试

第一个hello world

app.html:

<div id="app">
    <div>{{message}}</div>
    <input type="text" v-model="message">
</div>

app.js:

    new Vue({
        el:'#app',
        data: {
            message:'hello vue.js.'
        }
    });

vue.js主要是双向数据绑定
app.html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。

列表渲染用v-for

test.js
    new Vue({
        el:'#app',
        data:{
            book:{
                id:0,
                author:'gao',
                name:'haha',
                price:'123'
            },
            books:[
                {
                    id:0,
                    author:'gao',
                    name:'haha',
                    price:'123'
                },{
                    id:1,
                    author:'gao',
                    name:'haha',
                    price:'12333'
                }
            ]
        }
    })

app.html

    <div id="app">
        <tr v-for="book in books">
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            <td>{{book.price}}</td>
        </tr>
    </div>

vue.js通过v-on完成事件处理与绑定

下面是两种写法

    <button v-on:click="doSomething">点一下</button>
    <button @click="doOtherthing">点两下</button>
    new Vue({
        el:'#app'
    })