vue踩坑记

vue踩坑记

易错点

语法好难啊qwq

• 不要把'data'写成'date'
• 在v-html/v-bind中使用vue变量时不需要加变量名
• 在非vue事件中使用vue中变量时需要加变量名

正确
<div id="vue">
    <button onclick="vm.ColorRed=vm.ColorRed^1">gg</button>
    <div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
</div>
错误
<div id="vue">
    <button onclick="ColorRed=ColorRed^1">gg</button>
    <div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
</div>

• vue结构内赋值使用:，不要写成=

data : {
    answer: "123",
    inputval: "1234",
},

• 使用v-html,v-bind, v-model等v前缀赋值时使用=

<div id="vue_work_area">
    <input v-model="inputval">
    <button v-on:click="work">print</button>
    <p>{{answer}}</p>
</div>

• 在methods内部调用变量名时需要在前面加上this.

methods与computed

computed与methods的区别在于：使用computed的计算时，只有当对象发生改变时才会重新计算，而methods没有缓存

示例链接

<div id="vue">
    <input v-model="str"> 
    <p>{{ans()}}</p> <!--这里的ans是函数，需要加括号-->
    <p>{{reans}}</p>
</div>
<script>
    var vm = new Vue({
        el: '#vue',
        data: {
            str: "",
        },
        methods: {
            ans: function() {
                return this.str.split('').reverse().join('');
            }
        },
        computed: {
            reans: function() {
                return this.str.split('').reverse().join('');
            }
        },
    })
</script>