跟着大佬技术胖学vue系列

每天学一点，自己总结一下。记录一个萌新的爬坑之路，如果有错欢迎各位大佬指正O(∩_∩)O

v-text

在vue中直接{{xxx}}在页面没有加载完成特别慢的情况下会出现显示xxx情况，所以用到v-text

    <h1>{{message}}</h1>
    <h1 v-text="message"></h1><!-- 未加载不会渲染 -->

    var app = new Vue({
        el: '#app',
        data: {
            message: "Hello World",
        }
    })

v-html

v-html用于渲染标签

    <h1 v-html="showH1"></h1>

    var app = new Vue({
        el: '#app',
        data: {
            showH1: '<h1>Hello World</h1>'
        }
    })

但是实际中不推荐直接用v-html，易遭受xxs攻击（记住就完事了，以后慢慢学xxs）

v-on

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码,比如常见的click之类，可以简写成@

用v-on写一个简单的加一减一

    <h1>分数：{{points}}</h1>
    <button v-on:click="add">加分</button> <button v-on:click="reduce">减分</button>
    <input type="text" @keyup.enter="enterPoint" v-model="changePoint">

     <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                points: 0,
                changePoint: 2,
            },
            methods: {
                add: function() {
                    this.points++
                },
                reduce: function() {
                    this.points--
                },
                enterPoint: function() {
                    console.log("ss")
                    console.log(this.changePoint)
                    console.log(this.points)
                    this.points = this.points + parseInt(this.changePoint)
                }
            },
        })
    </script>

结语

每天记录一下学了什么，希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。😂