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-modelv前缀赋值时使用=
    <div id="vue_work_area">
      <input v-model="inputval">
      <button v-on:click="work">print</button>
      <p>{{answer}}</p>
    </div>
    
  • component注册时Vue首字母必须大写

    Vue.component('attack',{
      template: '<h1>attack caiji</h1>'
    });
    
  • 在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>

一只菜鸡