-
<div id="cod">
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<todo-item?
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
<!-- 父組件通過監(jiān)聽對應事件名稱（@delete）觸發(fā)函數(shù)handleDelete。 -->
</todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
//父組件通過prop向子組件傳值 子組件獲得父組件傳來的內(nèi)容和索引。
props:['content', 'index'],
template:'<li @click="handlClick">{{content}}</li>',
methods:{
handlClick:function(){
//子組件通過$emit向父組件拋出觸發(fā)事件名稱（delete）和觸發(fā)事件的list索引值。
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#cod",
data:{
title:"this is hello world!",
show:true,
list:[],
inputValue:''
},
methods: {
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
},
//函數(shù)通過子組件拋出的索引值對應刪除list
handleDelete:function(index){
this.list.splice(index, 1)
}
}
})
</script>
查看全部 -
每一個組件都是一個vue的實例，
反之，每一個vue的實例，也都是一個組件
查看全部 -
<div id="cod">
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script type="text/javascript">
//定義一個全局組件
Vue.component('todo-item',{
//這個組件接收從外部傳進來的名叫content的屬性
props:['content'],
template:'<li>{{content}}</li>'
})
//定義一個局部組件
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:"#cod",
//在cod實例里注冊這個組件
// components:{
// 'todo-item': TodoItem
// },
data:{
list:[],
inputValue:''
},
methods: {
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
}
}
})
</script>
查看全部 -
<div id="cod">
//v-model雙向綁定
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
//v-for
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#cod",
data:{
list:[],
inputValue:''
},
methods: {
//點擊提交按鈕時，在li里添加input輸入框的值后input值設置為空
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
}
}
})
</script>
查看全部 -
v-if? 會刪除dom節(jié)點? 再創(chuàng)建dom,適合少數(shù)的操作
v-show? 給元素添加display屬性? 適合頻繁的操作
v-for 能把list數(shù)組循環(huán)展示在li? 有多少數(shù)據(jù)就生成多少li
適用v-for做循環(huán)展示時，需要添加:key=""，為了提高渲染效率，要求：每渲染一條的key值都是不同的
為避免數(shù)組內(nèi)容重復，可轉(zhuǎn)換為如下寫法，
v-for="(item,index) of list" :key="index"
當然，這也并不是一個特別好的選擇，如果需要頻繁渲染時，index會出現(xiàn)問題
查看全部 -
v-if是通過改變dom 的結(jié)構顯示控制，而v-show是通過diaplay來控制顯示隱藏，如果會重復操作，v-show 的性能會好一些
v-for用于循環(huán)，添加key值讓渲染數(shù)據(jù)提高效率
查看全部 -
computed里面定義計算屬性
watch 用于偵聽計算屬性發(fā)生改變時定義的某項也會隨之變化
查看全部 -
單向綁定用v-bind：簡寫：
雙向綁定用v-model
查看全部 -
v-html 不會進行轉(zhuǎn)義，v-text會進行轉(zhuǎn)義
v-on指令可以綁定事件比如（click），可簡寫為@click，方法寫在vue實例中的methods方法里面
查看全部 -
vue只會對它所對應的掛載點內(nèi)的內(nèi)容產(chǎn)生作用
掛載點里的內(nèi)容稱為模版
模版可以通過template寫在vue中，和寫在掛載點下面的作用是一樣的
vue實例綁定到掛載點后會自動對模版和數(shù)據(jù)內(nèi)容進行處理，生成要最終展示的內(nèi)容
查看全部 -
如何在頁面中引入JS文件（在head中引入不會出現(xiàn)閃屏）
Dom節(jié)點如何綁定在vue實例中（通過el就是element）
查看全部 -
使用模板指令如v-bind，等號后面的內(nèi)容就是一個js的表達式，不再是字符串
查看全部 -
index
查看全部 -
4.2 使用vue-cli開發(fā)TodoList
<template>
? <div>
? ? <div>
? ? ? <input v-model="inputValue"/>
? ? ? <button @click="handleSubmit">提交</button>
? ? </div>
? ? <ul>
? ? ? <todo-item v-for="(item,index) of list "?
? ? ? ?:key="index",
? ? ? ?:content="content",
? ? ? ?:index="index",
? ? ? ?@delete="handleDelete"
?
? ? ? >
? ? ? </todoitem>
? ? </ul>
? </div>
</template>
<script>
import TodoItem from "./components/TodoItem"
export default {
? data(){ //這是data:function()的縮寫
? ? return {
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? components:[todo-item:"TodoItem"]
? methods:{
? ? handleSubmit(){
? ? ? this.list.push(this.inputValue);
? ? ? this.inputValue=''?
? ? },
? ? handleDelete(){
? ? ? ? this.list.splice(index,1);
? ? }
? }
}
----------------------------------------------------------------------------
在components目錄下，新建todotodo-iteim組件的寫法
<template>
? <li @click="handleDelete">{{content}}</li>
<script>
export default{
? props:['content,'index']
? template:"<li>{{content}}</li>",
? methods:{
? ? handleDelete:function(){
? ? ? Vue.$emit("delete",this.index)
? ? }
}
</script>
查看全部 -
<div id="root">
<div>
<input? v-model='inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-iteim v-for="(item,index) of list?
? ? ? ? ? ? ? ? :key="index" :content="item" :index="index"
@delete="handleDelete" //監(jiān)聽子組件的delete事件,調(diào)用父組件的handleDelete方法
? ? ? ? ? ? ? ? >
</todo-iteim>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],//屬性
template:'<li>{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
//跟父組件通信,傳播delete事件，傳參index
}
}
})
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
查看全部
舉報