vue js入门看这篇就够了

导语

第一步需要导入vuejs文件到页面

修改定界符
delimiters: ['[%', '%]']

双向数据绑定

    
    
[% message %]

v-show

    
请输入内容：
        
    

事件绑定

v-on:submit="submitForm" 可以简写成 @submit="submitForm"
e.preventDefault(); 这是取消默认事件的方法，也可以写到HTML中
修改后 @submit.prevent="submitForm" 这样写，在function中就不需要写 e.preventDefault(); 这个方法了

组件开发

computed

翻译过来就是计算后的属性

computed使用场景：用于处理需要处理后的属性

    
    [% username %]


new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        fistName:"li",
        lastName:"si",
    },
    //计算后的属性
    computed:{
        username:function(){
            return this.fistName+" "+this.lastName;
        }
    }
});

处理列表数据

    

        

            [% task.body %]
        
    


new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        tasks:[
            {body:"go to movie1",completed:true},
            {body:"go to movie2",completed:true},
            {body:"go to movie3",completed:false},
            {body:"go to movie4",completed:true},
            {body:"go to movie5",completed:true},
        ]
    }
});

vue 要处理列表使用 v-for

后期继续更新，有问题欢迎留言！

[获取授权]