Vue.js入门案例

使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子：

例一：Helloworld

html代码：

<div id="app">
    {{ message }}
</div>

js代码：

new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})

例二：双向绑定

说明：html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。

html代码：

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

js代码：

new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})

例三：渲染列表

说明：v-for表示遍历集合数据，下面的代码遍历集合todos并输出每项。

html代码：

<div id="app">
    <ul>
        <li v-for="todo in todos">
        {{ todo.text }}
        </li>
    </ul>
</div>

js代码：

new Vue({
    el: '#app',
        data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue.js' },
            { text: 'Build Something Awesome' }
        ]
    }
})

例四：事件绑定

说明：v-on是vue.js特性，表示绑定事件方法。

html代码：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

js代码：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

vue.js入门

Vue.js入门案例