Vue.js系列一

       
{{ message }}

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

       
{{ message }}
       
 

    

        

             {{item.message}}
        
    

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

        
{{message}}
        翻转
    

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

    

        
        

            

                {{todo.text}}
                X
            
        
    

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(删除的位置，删除的数量)
            }
        }
    });
}