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>

3、将div标签放入到body中

<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>

4、将script标签放到body后

<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>