Vue.js系列一

標籤：輸入   index   ges   庫檔案   https   效果   onload   bar   images   

一、什麼是Vue.js

Vue.js是一個構建資料驅動的 web 介面的漸進式架構。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的視圖組件。

二、入門

引入類庫檔案：<script src="https://unpkg.com/vue/dist/vue.js"></script>

第一個demo:

html:

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

js:

onload = function () {    new Vue({        el:"#app",        data:{            message:"hello world"        }    });}

結果： hello world

三、使用

1、雙向繫結

html:

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

js同上。

效果：當文字框裡面的東西改變時，p標籤的內容也改變。

2、列表渲染

html:

    <ul id="example-1">        <li v-for="item in items">             {{item.message}}        </li>    </ul>

js:

onload = function () {    var example1 = new Vue({        el: ‘#example-1‘,        data: {            items: [                { message: ‘Foo‘ },                { message: ‘Bar‘ }            ]        }    })}

結果：

• Foo
• Bar

3、處理使用者輸入

html:

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

js：

onload = function () {    new Vue({        el: "#app",        data: {            message: "hello world"        },        methods: {            reverseMessage: function () {                this.message=this.message.split(‘‘).reverse().join(‘‘)            }        }    });}

結果：當點擊按鈕的時候字母就可以翻轉

4、以上綜合

html：

    <div id="app">        <input v-model="newTodo" v-on:keyup.enter="addTodo" />        <ul>            <li v-for="todo in todos">                <span>{{todo.text}}</span>                <button v-on:click="removeTodo($index)">X</button>            </li>        </ul>    </div>

js:

onload = function () {    new Vue({        el: "#app",        data: {            newTodo: "",            todos: [                { text: "add some todos" }            ]        },        methods: {            addTodo: function () {                var text = this.newTodo.trim()                if (text) {                    this.todos.push({ text: text })                    this.newTodo = ""                }            },            removeTodo: function (index) {                this.todos.splice(index, 1)//splice(刪除的位置，刪除的數量)            }        }    });}

效果：

 

Vue.js系列一