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