解决代码加载慢,以至于乱码—————VUE
vue.js解决开始代码加载,以至于乱码
vue.js通过几行代码可以解决这个问题
css:
[v-cloak] {
display: none;
}
html:
<div id="app" v-cloak></div>
使用后会等vue加载完再呈现效果,就不会出现,代码在视图里了。
顺带介绍几个基础的vue api。
绑定css样式:
css:
.done {
text-decoration: line-through;
color: #ccc;
}
html:
<span v-bind:class="{done:item.done}">
{{item.title}}</span>
v-bind:class="{done样式:这是样式中的:这是item中的某一些进行筛选,item.done是true的那些选择} "
点击事件:
v-on:click="这里写个事件"
@click=“”和上面的一样
const app = new Vue({
el: '#app',
data: {
todos,
todoText: ''
},
methods: {
handleAddTodoClick() {
xxxxx
}
}
绑定按键:
<input type="text" value="" v-model='todoText' @keydown.enter="handleAddTodoClick" />
这是绑定回车。
后面有机会再写点别的。
一杯茶,一包烟,一行代码打一天。