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>

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