Vue2.5開發去哪兒網App 第二章筆記

-Advertisement-

Vue完成 TodoList 1.預設方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="../../vue.js"></script> </he ...

Vue完成 TodoList

1.預設方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="../../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="addItem">添加</button>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                addItem:function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
        console.log(app.$data)
    </script>
</body>
</html>

View Code

2.以全局組件的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
        <button v-on:click="addItem">添加</button>
    <tode-item v-bind:content="item" v-for="item in list"></tode-item>
</div>
<script>
    var Myconponent = Vue.extend({
        props:['content'],
        template:"<li>{{content}}</li>"
    })

    Vue.component('tode-item',Myconponent)

    var app = new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            addItem:function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }
    })
</script>
</body>
</html>

View Code

3.以局部組件的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部組件 TodoList</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="addItem">添加</button>
    <todo-item v-bind:content="item" v-for="item in list"></todo-item>
</div>
<script>
    var Myconponent = {
        props:['content'],
        template:"<li>{{content}}</li>"
    }
    var app = new Vue({
        el:'#app',
        components:{
            'todo-item':Myconponent
        },
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            addItem:function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }
    })
</script>
</body>
</html>

View Code

Vue 組件間傳值

子組件向父組件傳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部組件 TodoList</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="addItem">添加</button>
    <!--v-bind簡寫：:  v-on:  @-->
    <todo-item :content="item" :index="index" @delete="HandleItemDelete" v-for="(item,index) in list"></todo-item>
</div>
<script>
    var Myconponent = {
        props:['content','index'],
        template:"<li @click='HandleItemClick'>{{content}}</li>",
        methods:{
            HandleItemClick:function () {
                this.$emit('delete',this.index)
            }
        }
    }
    var app = new Vue({
        el:'#app',
        components:{
            'todo-item':Myconponent
        },
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            addItem:function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            },
            HandleItemDelete:function (index) {
                console.log(index)
                this.list.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

View Code

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Nginx學習筆記

狂神聲明 : 文章均為自己的學習筆記 , 轉載一定註明出處 ; 編輯不易 , 防君子不防小人~共勉 ! Nginx學習筆記課程目標理解反向代理,負載均衡的概念 . 掌握Nginx在Linux下的安裝 , 配置掌握在項目中使用Nginx反向代理實現負載均衡瞭解Nginx負載均衡的常用配置方案 ...
啟用Windows10的Linux子系統並安裝圖形界面

前言目前市面上的PC電腦主要運行著四大類系統，它們分別是微軟的Windows、蘋果的MacOS、Linux的發行版以及Unix類系統。其中Linux和Unix都是開源的，因此市面出現的眾多基於Linux內核和Unix內核的發行版系統，其中Linux類系統數量最多、用戶基數大，廣泛使用於各行各業。相 ...
關於操作系統與換行

1. 概述 1. 不同的操作系統, 對於換行, 有不同的表示 2. 不算是很重要, 但有時候也會製造些小麻煩 2. 換行 1. lf 1. 名稱 1. linefeed 2. 轉義字元 1. \n 2. cr 1. 名稱 1. carriage return 2. 轉義字元 1. \r 3. 操作 ...
基於MySQL INNODB的優化技巧

背景回顧人們在開始工作之前，都會問自己這樣一個問題：給你一臺16G記憶體的Innodb專用資料庫伺服器，如何配置才能讓其穩定、高效地給典型的Web應用提供服務？硬體記憶體：記憶體對於Innodb資料庫至關重要！16 32G記憶體 CPU：雖然CPU配置依賴於應用，但一般來說，就CPU來說，2 Du ...
Centos7.3安裝和配置Tomcat8

第一步：下載Tomcat8壓縮包進入 http://tomcat.apache.org/download-80.cgi 下載tar.gz壓縮包第二步：用ftp工具把壓縮包上傳到/home/data/下第三步：解壓以及新建目錄 [root@localhost ~]# ls /home/data/ ...
SqlServer中用SQL語句附加資料庫及修改資料庫邏輯文件名

--查詢資料庫邏輯文件名 USE 資料庫名 SELECT FILE_NAME(1) --查詢資料庫邏輯文件名（日誌） USE 資料庫名 SELECT FILE_NAME(2) --附加資料庫 sp_attach_db '資料庫名','資料庫全路徑','資料庫日誌全路徑' GO USE 資料庫名 -- ...
Android組件化探索與實踐

什麼是組件化不用去糾結組件和模塊語義上的區別，如果模塊間不存在強依賴且模塊間可以任意組合，我們就說這些模塊是組件化的。組件化的好處 1. 實現組件化本身就是一個解耦的過程，同時也在不斷對你的項目代碼進行提煉。對於已有的老項目，實現組件化剛開始是很難受的，但是一旦組件的框架初步完成，對於後期開發效 ...
VUE路由轉場特效，WebAPP的前進與後退

一、效果圖二、思路 1. 定義兩個 CSS 過度動畫，前進與後退： slide-right-enter 和 slide-left-enter 2. 給路由配置meta信息，設置各個路由的級別： index 3. 監控路由跳轉，比對 meta 信息級別，如果從大跳轉到小說明是返回，從小跳轉到大則是前 ...