-
‘v-for中需要加上:key属性 提高性能。:key中的值不可想等。
写法如图：
截图中为index(list数组下标 0，1，2)
查看全部 -
v-for用法：
item of list;
list为data中的数据
查看全部 -
v-if把标签从DOM树中移除；
v-show则是改变为display:none;
查看全部 -
监听器watch属性：
监听{{firstName}}{{lastName}}发生改变，则count加一
也可以直接监听{{fullName}}
监听一个数据/计算属性的值发生变化，触发
查看全部 -
{{fullName}}是由{{firstName}}和{{lastName}}组成的，引出了计算属性的概念
使用computed属性
计算属性特点：
如果{{firstName}}{{lastName}}没改变，则{{fullName}}会使用缓存值，只有组成值发生变化，计算属性才会重新计算
查看全部 -
v-model：
双向绑定的指令
查看全部 -
v-bind：
属性绑定
使用这样的模板指令之后 等号后面的内容就是一个变量了，所以可以拼接字符串
查看全部 -
父组件向子组件传值
查看全部 -
使用v-if会将元素从DOM上面删除掉，使用v-show会使得元素在DOM上面隐藏。
查看全部 -
局部样式 加 scoped
查看全部 -
v-show 只是将div的display属性改为None
V-if 会删除DIV
如果显示隐藏的频率过高 建议用V-show
查看全部 -
$emit('funA')，emit是动词，意思是发行，发表，在这里可以理解为发布携带的事件funA。子主件使用$emit('funA')发布的事件可以被父组件 v:on （即@funA='funB'）侦听，随即触发父组件绑定的事件funB。
查看全部 -
style scoped 的修饰符,只针对本组件内容的样式进行作用
查看全部 -
1、在脚手架中data不是一个对象而是一个函数了，写法为
data:function(){
return{}
}
2、在vue实例中<template></template>模板下只能有一个最外层的包裹元素，如果多个包裹元素则报错
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>todolist 删除功能</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root" >
<div>
<input v-model="inputValue">
<button @click="handlesubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:' ',
list:[]
},
methods:{
handlesubmit: function(){
this.list.push(this.inputValue)
this.inputValue=' '
},
handleDelete:function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
查看全部
举报