Vue基础汇总--28个小栗子（上）

1.双向绑定

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

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

2.渲染列表

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

    new Vue({  
        el:'#app',  
        data:{  
            todos:[  
                {text:'学习vue'},  
                {text:'学习Sass'},  
                {text:'学习webpack'}  
            ]  
        }  
    })  

3.处理用户输入

    <div id="app">  
        <p>{{message}}</p>  
        <input v-model='message'/>  
        <button type="button" v-on:click="reverseMessage">反转</button>  
    </div>  

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

4.记事本

    <div id="app">  
        <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />  
        <ul>  
            <li v-for="todo in todos">  
                <span>{{todo.text}}</span>  
                <button type="button" v-on:click="removeTodo($index)">X</button>  
            </li>  
        </ul>  
    </div>  

    new Vue({  
        el:'#app',  
        data:{  
            newTodo:'',  
            todos:[  
                {text:'学习Vue'},  
                {text:'学习Sass'},  
                {text:'学习webpack'}  
            ]  
        },  
        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);  
            }  
        }  
    })  

5. 插值

    <div id="app">  
        <!-- 单次文本插值 -->  
        <p>{{*message}}</p>  
        <!-- 解析真的html字符串 -->  
        <p>{{{raw_html}}}</p>  
        <!-- html特性 -->  
        <p id="item-{{id}}">html特性</p>  
    </div>  

    new Vue({  
        el:'#app',  
        data:{  
            message:'Hello vue.js',  
            raw_html:'<span>原始的html</span>',  
            id:'1'  
        }  
    })  

6.绑定表达式

    <div id="app">  
        <!-- javascript表达式 -->  
        <p>{{number+1}}</p>  
        <p>{{ok ? 'Yes' : 'No'}}</p>  
        <p>{{message.split('').reverse().join('')}}</p>  
        <!-- 过滤器 -->  
        <p>{{name | capitalize}}</p>  
    </div>  

    new Vue({  
        el:'#app',  
        data:{  
            number:2,  
            ok:false,  
            message:'123456789',  
            name:'brucee lee'  
        }  
    })  

7.指令

<div id="app">  
    <!-- 参数 -->  
    <a v-bind:href="url" v-on:click="dosomething">指令带参数</a>  
    <!-- v-bind、v-on缩写 -->  
    <a :href="url" @click="dosomething">指令缩写</a>  
</div> 

    new Vue({  
        el:'#app',  
        data:{  
            url:'http://g.pptv.com'  
        },  
        methods:{  
            dosomething:function(){  
                alert(this.url);  
            }  
        }  
    })  

8.计算属性

    <div id="app">  
        <p>a={{a}},b={{b}}</p>  
        <p>{{fullName}}</p>  
    </div>  

    new Vue({  
        el:'#app',  
        data:{  
            a:1,  
            firstName:'Micro',  
            lastName:'Jodon'  
        },  
        computed:{  
            b:function(){  
                return this.a + 1;  
            },  
            /*fullName:function(){ 
                return this.firstName + ' ' + this.lastName; 
            }*/  
            fullName:{  
                get:function(){  
                    return this.firstName + ' ' + this.lastName;  
                },  
                set:function(newValue){  
                    var names = newValue.split(' ');  
                    this.firstName = names[0];  
                    this.lastName = names[names.length-1];  
                }  
            }  
        }  
    })  

9.class与css绑定

    .static{  
        width: 200px;  
        margin: 20px auto;  
        height: 25px;  
        line-height: 25px;  
        text-align: center;  
        font-size: 18px;  
    }  
    .class-a{  
        background-color: #f00;  
    }  
    .class-b{  
        color: #fff;  
    }  
    .class-c{  
        padding: 5px 0;  
    }  

    <div id="app">  
        <!-- 绑定class:对象语法 -->  
        <p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>  
        <p class="static" v-bind:class="classObject">绑定class</p>  
        <!-- 绑定class:数组语法 -->  
        <p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>  
        <p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>  
        <!-- 绑定style:对象语法 -->  
        <p class="static" v-bind:style="styleObject">绑定style</p>  
        <!-- 绑定style:数组语法 -->  
        <p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>  
    </div>  

new Vue({  
    el:'#app',  
    data:{  
        classA:'class-a',  
        classB:'class-b',  
        classC:'class-c',  
        isA:true,  
        isB:false,  
        isC:true,  
        classObject:{  
            'class-a':true,  
            'class-b':true  
        },  
        styleObject:{  
            color:'red',  
            fontSize:'13px',  
            backgroundColor:'#00f'  
        },  
        styleObjectA:{  
            color:'green',  
            fontSize:'16px'  

        },  
        styleObjectB:{  
            backgroundColor:'#f0f',  
            transform:'rotate(7deg)'  
        }  
    }  
})

10.条件渲染

    <div id="app">  
        <h1 v-if="Math.random() > 0.5">对不起！</h1>  
        <h1 v-else>没关系</h1>  

        <template v-if="ok">  
            <h1>标题</h1>  
            <p>段落1</p>  
            <p>段落2</p>  
        </template>  

        <h1 v-show="isShow">Hello!</h1>  

        <custom-component v-show="condition"></custom-component>  
        <p v-show="!condition">这可能也是一个组件</p>  
    </div>  

    // 定义  
    var MyComponent = Vue.extend({  
      template: '<div>A custom component!</div>'  
    });  

    // 注册  
    Vue.component('custom-component', MyComponent);  
    new Vue({  
        el:'#app',  
        data:{  
            ok:true,  
            isShow:false,  
            condition:true  
        },  

    })  

11. 列表渲染

    ul{  
        list-style: none;  
        width: 150px;  
    }  
    .divider{  
        height: 2px;  
        background-color: #00f;  
    }  
    span{  
        padding: 0 2px;  
    }  

    <div id="app">  
        <!-- 数组v-for -->  
        <ul>  
            <template v-for="item in items" track-by="_uid">  
                <li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>  
                <li class="divider"></li>  
            </template>  
        </ul>  
        <!-- 对象v-for -->  
        <ul>  
            <li v-for="(key,val) in object">{{key}} : {{val}}</li>  
        </ul>  
        <!-- 值域v-for -->  
        <span v-for="n in 10">{{ n }}</span>  
    </div>  

    var vm=new Vue({  
        el:'#app',  
        data:{  
            parentMessage:'水果',  
            items:[  
                { _uid:'001',message:'香蕉'},  
                { _uid:'002',message:'橘子'}  
            ],  
            object:{  
                FirstName: 'John',  
                LastName: 'Doe',  
                Age: 30  
            }  
        }  
    });  
    //变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()  
    vm.items.push({message:'苹果'},{message:'梨子'});//推入两项  
    vm.items.shift();//取出第一项  
    //非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组  
    vm.items=vm.items.filter(function (item) {  
      return item.message.match(/子/);  
    })  

12.方法与事件处理器

    <div id="app">  
        <!-- 内联语句处理器 -->  
        <button type="button" v-on:click="say('Hello',$event)">提交</button>  
        <!-- 事件修饰符 -->  
        <!-- 阻止单击事件冒泡 -->  
        <a v-on:click.stop="doThis"></a>  

        <!-- 提交事件不再重载页面 -->  
        <form v-on:submit.prevent="onSubmit"></form>  

        <!-- 修饰符可以串联 -->  
        <a v-on:click.stop.prevent="doThat"></a>  

        <!-- 只有修饰符 -->  
        <form v-on:submit.prevent></form>  

        <!-- 添加事件侦听器时使用 capture 模式 -->  
        <div v-on:click.capture="doThis">...</div>  

        <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->  
        <div v-on:click.self="doThat">...</div>  

        <!-- 按键修饰符 -->  
        <input v-on:keyup.enter="submit">  

    </div>  

var vm=new Vue({  
    el:'#app',  
    methods:{  
        say:function(msg,event){  
            alert(msg+","+event.target.tagName);  
             event.preventDefault();  
        }  
    }  
}); 

13.表单控件绑定

    <div id="app">  
        <!-- 多行文本 -->  
        <span>这是您的评论：</span>  
        <p>{{message}}</p>  
        <textarea v-model="message" placeholder="请输入您的评论"></textarea>  
        <br>  
        <!-- 单选框 -->  
        <input type="checkbox" id="checkbox" v-model="checked">  
        <label for="checkbox">{{ checked }}</label>  
        <br>  
        <!-- 多个单选框 -->  
        <input type="checkbox" id="jack" value="马云" v-model="checkedNames">  
        <label for="jack">马云</label>  
        <input type="checkbox" id="john" value="马化腾" v-model="checkedNames">  
        <label for="john">马化腾</label>  
        <input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">  
        <label for="mike">李彦宏</label>  
        <br>  
        <span>选中的值: {{ checkedNames | json }}</span>  
        <br>  
        <!-- 单选钮 -->  
        <input type="radio" id="one" value="One" v-model="picked">  
        <label for="one">One</label>  
        <br>  
        <input type="radio" id="two" value="Two" v-model="picked">  
        <label for="two">Two</label>  
        <br>  
        <span>选中的值: {{ picked }}</span>  
        <br>  
        <!-- 下拉列表单选 -->  
        <select v-model="selected">  
          <option selected>湖北</option>  
          <option>北京</option>  
          <option>上海</option>  
        </select>  
        <span>选中的值: {{ selected }}</span>  
        <br>  
        <!-- 下拉列表多选 -->  
        <select v-model="selecteds" multiple>  
            <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>  
        </select>  
        <br>  
        <span>选中的值: {{ selecteds | json }}</span>  
        <br>  

        <!--绑定动态值到Vue实例-->  

        <!-- 选中时为a，未选中时为b -->  
        <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>  
        <span>选中时的值：{{toggle}}</span>  
        <br>  

        <input type="radio" v-model="pick" v-bind:value="c">男  
        <input type="radio" v-model="pick" v-bind:value="d">女  
        <span>选中时的值：{{pick}}</span>  

        <!-- 在 "change" 而不是 "input" 事件中更新 -->  
        <input v-model="msg" lazy>  
        <!-- 设置转换为数值类型 -->  
        <input v-model="age" number>  
        <!-- 设置延时 -->  
        <input v-model="msg" debounce="500">  
    </div>  

var vm=new Vue({  
    el:'#app',  
    data: {  
        checkedNames: [],  
        options:[  
            {text:'南京',value:'南京'},  
            {text:'苏州',value:'苏州'},  
            {text:'无锡',value:'无锡'}  
        ],  
        a:'选中',  
        b:'未选中',  
        c:'男',  
        d:'女'  
  }  
});