-
reselect。react 类似computed的库查看全部
-
vue节点是如何监听变化的呢？查看全部
-
v-if会将元素删除，v-show只会给元素增加隐藏属性
查看全部 -
组件：
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
Vue.component('todo-item',{
props:['content'], 父子组件传输，props定义内容字段
template:'<li>{{content}}</li>' 组件内容
})
查看全部 -
每个vue实例都会有一个template模板
每个vue实例就是一个组件
查看全部 -
template模板
Vue.component全局组件
var todoItem局部组件//需声明
props:['content']接收从外部传进来的叫content属性
查看全部 -
<style scoped>//只在本组件有用
</style>
<style>//全局有用
</style>
查看全部 -
通知父组件，触发delete自定义事件，传递组件的index值
this.$emit('delete',this.index)
父组件监听子组件的delete事件，如果父组件监听到了子组件的事件后，就执行handleDelete这个函数
查看全部 -
组件与实例的关系
每一个组件都是一个vue的实例
<div id="root">
<div >
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
//创建todo-item组件（全局组件）
Vue.component('todo-item',{
props:['content'],
template:'<li @click="handleClick">{{content}}<li>',//模板
methods:{
handleClick:function(){
alert('clicked')
}
}
})
//创建Todoitem组件（局部组件）
// var Todoitem={
// template:'<li>item<li>'
// }
//
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);//list里面添加数据用push方法
this.inputValue=''
}
}
})
</script>查看全部 -
一、TodoList中组件的拆分
?定义组件
?组件和组件之间如何进行通信
创建全局组件
Vue.component('todo-item',{
template:'<li>item<li>'//模板
})代码
<div id="root">
<div >
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
//创建todo-item组件（全局组件）
Vue.component('todo-item',{
props:['content'],//接收
template:'<li>{{content}}<li>'//模板
})
//创建Todoitem组件（局部组件）
// var Todoitem={
// template:'<li>item<li>'
// }
//
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);//list里面添加数据用push方法
this.inputValue=''
}
}
})
</script>创建局部组件，需要在Vue实例中通过components做一个组件的声明
var Todoitem={
template:'<li>item<li>'
}在Vue中声明
components:{
'todo-item':Todoitem
},局部组件，如果你想在其他的Vue实例中使用这个局部组件，那你必须要通过components对这个组件进行注册
在这个Vue中，如果你想要使用这个Todoitem这个组件，通过todo-item这个标签来使用，当你注册好这个局部组件后，在实例的模板里面使用这个todo-item标签，就可以正确使用这个组件了
<div id="root">
<div >
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
//创建todo-item组件（全局组件）
// Vue.component('todo-item',{
// template:'<li>item<li>'//模板
// })
//创建Todoitem组件（局部组件）
var Todoitem={
template:'<li>item<li>'
}
new Vue({
el:"#root",
components:{
'todo-item':Todoitem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);//list里面添加数据用push方法
this.inputValue=''
}
}
})
</script>
查看全部 -
TodoList的完整功能
<body>
<div id="root">
<div >
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);//list里面添加数据用push方法
this.inputValue=''
}
}
})
</script>
查看全部 -
对div标签进行展示：v-if（一两次显示或隐藏时）和v-show（更好的选择，频率较高时）
v-if:当对应数据内容是false的时候，它会 把这个标签直接从dom中移除
v-show：当数据项的值是false的时候，div标签会被隐藏，但不会从dom中被清除，只是把div标签的display属性变为none
v-for：页面循环内容的展示（添加:key=“”属性， 可以提升每一项渲染的效率和性能，每一项key值不能相同）
循环list数据列表，每一项内容放入item里面，到底时第几项，每一项的下标都会放进index里面（如果对列表进行频繁的变更，将不能使用index）
<div id="root">
<div v-if="show">
hello world
</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,1,3]
},
methods:{
handleClick:function(){
this.show=!this.show;
}
}
})
</script>
查看全部 -
计算属性（computed:）：一个属性通过其他属性计算而来（只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示）
<div id="root">
姓：<input v-model:value="firstName"/>
名：<input v-model:value="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+''+this.lastName
}
}
})
</script>侦听器：监听某一个数据的变化，一旦这个数据发生了变化，就在该侦听器内进行业务逻辑
<div id="root">
姓：<input v-model:value="firstName"/>
名：<input v-model:value="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+''+this.lastName
}
},
watch:{
firstName:function(){
this.count++
},
lastName:function(){
this.count++
}
}
})
</script>替换：
watch:{
fullName:function(){
this.count++
}
}
查看全部 -
当鼠标放在hello world这个div上时,显示title表示的这句话
<div id="root">
<div title="this is hello world">hello world</div>
</div>使用v-bind:（可以缩写成:）属性绑定
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title: "this is hello world"
}
})
</script>单项绑定：数据决定页面的显示，但是页面无法决定数据的内容
双向绑定：一个里面数据改变，另一个页面数据也跟着改变【v-model：value】input输入框中添加了什么数据，content中也跟着添加数据
【：value】只是将content中数据同步到input输入框中，并不能在输入框中数据改变时改变
<div id="root">
<div :title="title">hello world</div>
<input v-model:value="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title: "this is hello world",
content:"this is content"
}
})
</script>
查看全部 -
挂载点、模板、实例之间的关系
挂载点指的是Vue实例下中el属性对应的""中的id所对应的dom节点(div)
模板指的是在挂载点内部的这些内容都称作模板内容
<div id="root">
<h1>hello {{msg}}</h1>
</div>{
把模板放入Vue实例进行编写，这部分内容为模板内容
template:'<h1>hello {{msg}}</h1>'}
查看全部
举报