VUE.js的简单使用及路径

Vue.js线上路径,可以导入

<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>
.html双向绑定值

<div id="app">
    <!--v-model就是将input里面的数值和添加内容的改变而改变-->
    <!--当键盘点击enter时,需要的用到的函数   v-on:keyup.enter-->
    <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中获取值

  new Vue({
        el: '#app',
        data: {
//            添加新的数据
            newTodo: '',
//            我们要将用户输入的事项添加到todos数组中
            todos: [
                { text: 'Add some todos' }
            ]
        },
        methods: {

//            用户按下enter键的时候,触发事件
            addTodo: function () {
                var text = this.newTodo.trim()
                if (text) {
                    this.todos.push({ text: text })
                    this.newTodo = ''
                }
            },
            removeTodo: function (index) {
                this.todos.splice(index, 1)
            }
        }
    })