-
父子組件傳值的問(wèn)題（難點(diǎn)，重點(diǎn)）：
父組件怎么向子組件傳遞數(shù)據(jù)呢？通過(guò)屬性的形式向子組件傳遞數(shù)據(jù)
子組件怎么向父組件傳遞數(shù)據(jù)呢？通過(guò)發(fā)布訂閱模式$emit(事件，參數(shù))，子組件發(fā)布一個(gè)事件，父組件之前恰好之間就已經(jīng)訂閱了這個(gè)事件，那么子組件就可以通過(guò)發(fā)布訂閱的形式，向父組件發(fā)布數(shù)據(jù)了。
查看全部 -
屬性綁定：v-bind
查看全部 -
<div?id="todo"> ????<input?type="text"?v-model="inputValue"> ????<button?@click="sub()">提交</button> ????<ul> ????????<todo-item? ????????????v-for="(item,?index)?of?list" ????????????:key="index" ????????????:content="item" ????????></todo-item> ????</ul> </div> <script> ????Vue.component('todo-item',{ ????????props:['content'], ????????template:'<li>{{content}}</li>' ????}) ???? ????new?Vue({ ????????el:'#todo', ????????data:{ ????????????inputValue:'', ????????????list:[] ????????}, ????????methods:{ ????????????sub:?function(){ ???????????? this.list.push(this.inputValue) ???????????? this.inputValue='' ????????????} ????????} ????}) </script>查看全部 -
向列表中添加數(shù)據(jù)用 push( )
this.list.pust(this.inputValue)
查看全部 -
v-if ?控制dom存在與否
v-show 控制dom顯示與否
v-for 控制一組數(shù)據(jù)，循環(huán)顯示
<li?v-for="(item?,?index)?of?list"?:key="index">{{item}}<li> 加?key?值提升渲染效率，渲染性能 key?值要求唯一性查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- ?<li v-for="(item, index) of list" :key="index">
{{item}}
</li> -->
<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)
}
}
})
// var TodoItem = {
// ?template: '<li>item</li>'
// }
new Vue({
el: "#root ",
// components: {
// ?'todo-item': TodoItem
// },
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
查看全部 -
computed/計(jì)算屬性
watch/監(jiān)聽屬性
查看全部 -
@:v-onclick
:是v-bind
查看全部 -
v-bind:? ? 參數(shù)綁定；
查看全部 -
組件中接收 props:['content']
查看全部 -
定義局部變量后 需要在實(shí)例里面做出 對(duì)應(yīng)組件的聲明
比如
小組件是? todo-item??
定義的局部組件是 TodoItem
則要在實(shí)例里面聲明:component:{? 'todo-item':Todoitem? }
查看全部 -
<ul>
<li v-for="item of lists">{{item}}</li>
</ul>
lists:['one','two','three']
為了提升效率 可以在v-for后面加上key值 如下:
key的值 不能相同(不包含字符串)解決如下:
<v-for="(item,index) of list":key="index">
<li v-for="item of lists" :key="item">{{item}}</li>
查看全部 -
實(shí)現(xiàn)A+B = C
computed:{
????C:function(){
????????retrurn this.A+''+this.B
}
}????
查看全部 -
輸入框內(nèi)的值 當(dāng)輸入時(shí)? 也會(huì)改變渲染之前的 調(diào)用的數(shù)據(jù)的值
只需要 v-model
<input v-model="content" >
假設(shè) content="123"
input 顯示123?
這時(shí) 在后面輸入東西 content 也會(huì)變(只是在頁(yè)面上變化 實(shí)際值不變)
查看全部 -
鼠標(biāo)移動(dòng)到這個(gè)div 所顯示的內(nèi)容
v-bind:title? title是必須的 不變的 相當(dāng)于屬性
v-bind:title 等價(jià)于 :title
v-bind:title="title"
????data{
????????????title:'內(nèi)容'
}
查看全部
舉報(bào)