VUE的初学笔记

Vue的链接：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

第一次练习内容：

 <div id="app">
        <input type="text" v-model="i1" />
        +
        <input type="text" v-model="i2" />
        <input type="button" value="=" v-on:click="calAdd" />
        <span v-bind:title="i3">{{i3}}</span>
        <input type="button" value="+" v-on:click="calcl" />
        <span v-html="msg"></span>
        <span v-show="isVip">123</span>
        <span v-show="i3>5"> 当i3大于某数时才显示，可以用来判断权限</span>
        <span v-if="isVip">456</span>
        <input type="button" v-on:click="hideshow" value="切换 " />
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: { i1: "", i2: "", i3: "", msg: '<a href="https://i.cnblogs.com">博客</a>',isVip:true },
            methods: {
                calAdd: function () {
                    this.i3 = parseInt(this.i1) + parseInt(this.i2);
                },
                calcl: function () {//双向绑定，只限于输入事件
                    this.i1 = parseInt(this.i1) + 1;
                    this.i3 = parseInt(this.i1) + parseInt(this.i2);
                },
                hideshow: function () {
                    this.isVip = !this.isVip;
                }
            }

        })
    </script>

注意：红字是vue自带的。

具体详细：https://www.cnblogs.com/fozero/p/8563939.html

运行图：