Vue測試小demo

0、首先看下頁面效果

頁面包括三個功能：

1、按鈕觸發改變文本框内容；

2、計算輸入框之和；

3、計算輸入框内容的位數；

貼代碼：

1、建立一個HTML頁面導入vue相關的依賴

<script src="static/vue.js"></script>
<script src="static/moment.js"></script>      

相關依賴下載下傳：​​vue相關依賴​​ 2、将style标簽放入到head标簽中

<style>
    input {
        text-align: center;
    }

    input[type="text"] {
        width: 160px;
    }

    span {
        cursor: pointer;
    }

    span {
        cursor: pointer;
    }
</style>      

<div id="container">
    <!-- 方向：将定義好的資料綁定到視圖中
    實作方式：花括号，常見的Vue的指令：v-for，v-if，v-show-->
    <button @click="modifyMsg">修改msg</button>
    <p>{{msg}}</p>

    <!-- 多數指的是表單控件 input/textarea/select...
    實作方式：v-model -->
    <input type="text" v-model="uesrAddrss">
    <p>{{"使用者輸入的結果為："+uesrAddrss}}</p>

    <!-- 練習：有兩個輸入框，一個按鈕
    點選按鈕時将輸入框輸入的資料進行求和，将結果輸出到控制台 -->
    <input type="text" v-model.number="num1">
    <input type="text" v-model.number="num2">
    <button @click="addSum">計算</button>
    <p>{{"使用者輸入的結果為："+num3}}</p>

    <!--計算輸入數字的位數-->
    <input type="text" v-model.trim="myNotes">
    <p>{{myNotes.length}}</p>
</div>      

<script>
    new Vue({
        el: "#container",
        //設定預設值
        data: {
            msg: '麻子',
            uesrAddrss: '西安飛天路',
            num1: 0,
            num2: 0,
            num3: 0,
            myNotes: '123',
            dateStart: moment(new Date()),
            dateEnd: moment(new Date())
        },
        //頁面加載調用方法
        mounted: function () {
            this.addSum();//需要觸發的函數
        },
        //定義方法
        methods: {
            modifyMsg: function () {
                this.msg = "mazi";
                this.uesrAddrss = "使用者位址";
            },
            addSum: function () {
                console.log(this.num1);
                console.log(this.num2);
                this.num3 = this.num1 + this.num2
            }
        }
    })
</script>