vue學習日記一

添加列表及刪除列表：

 效果圖：

 

 html及js代碼：

<div id="app">
    <p>姓名：<input type="text" v-model="name" placeholder="請輸入姓名"></p>
    <p>年齡：<input type="text" v-model='age' placeholder="請輸入年齡"></p>
    <p><input type="button" value="添加" @click="addList"></p>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" v-model="checked" @click="checkedAll"></th>
                <th>編號</th>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <template v-if="items.length!=0">
                <tr v-for="(item,index) in items">
                    <td><input type="checkbox" v-model="checkedIds" :value="index"></td>
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </template>
            <template v-else>
                <tr>
                    <td colspan="4">暫無數據！</td>
                </tr>
            </template>
        </tbody>
    </table>
    <p><input type="button" value="刪除" @click="deleteList"></p>
    <p>{{tip}}</p>
</div>

var vue = new Vue({
        el:'#app',
        data:{
            checked:false,
            name:'',
            age:'',
            items:[],
            checkedIds:[],
            tip:''
        },
        methods:{
            addList:function(){
                this.items.push({name:this.name,age:this.age});
                this.reset();
            },
            checkedAll:function(){
                this.checked = !this.checked;
                if(this.checked){
                    for(var i = 0; i < this.items.length; i++){
                        this.checkedIds.push(i);
                    }
                }else{
                    this.checkedIds = [];
                }
            },
            deleteList:function(){
                var ids = this.checkedIds;
                if(ids.length == 0){
                    this.tip = '請至少選擇一項！'
                }else{
                    for(var i = ids.length-1; i >= 0; i--){
                        this.items.splice(ids[i],1)
                    }
                    this.tip = '刪除成功！'
                    this.reset();
                }
            },
            reset:function(){
                this.name = '';
                this.age = '';
                this.checkedIds = [];
                this.checked = false;
            }
        }
    });

vue-resource跨域請求——百度搜索提示：

 效果圖：

 

 html及js代碼： 

<div id="app">
    <input type="text" placeholder="請輸入搜索內容" v-model="value" @keyup="getSearchResult">
    <ul v-if="items.length!=0">
        <li v-for="item in items">{{item}}</li>
    </ul>
    <ul v-else>
        <li>暫無數據</li>
    </ul>
</div> 

var vue = new Vue({
        el:'#app',
        data:{
            value:'',
            items:[]
        },
        methods:{
            getSearchResult:function(){
                var that = this;
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{
                    params:{
                        wd:this.value
                    },
                    jsonp:'cb'
                }).then(function(res){
                    that.items = JSON.parse(res.bodyText).s;
                },function(error){

                })
            }
        }
    });