-
v-on:=@
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
? ? ? ? ?alert(123)
}
}
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
? ? ? ? ? ? this.content="world"
}
}
查看全部 -
vue-cli中data是一個(gè)具有返回值的函數(shù)，在html中使用是一個(gè)屬性值
查看全部 -
父組件像子組件傳值使用定義屬性的方式，子組件向父組件傳值使用發(fā)布訂閱的方式。
查看全部 -
不定義模板template，則會(huì)從掛載點(diǎn)加載模板
查看全部 -
沒一個(gè)component 都是一個(gè)Vue實(shí)例，包含所有屬性
查看全部 -
實(shí)現(xiàn)todolist的刪除功能：
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <todo-item
? ? ? ? v-for="(item,index) of list"
? ? ? ? :key="index"
? ? ? ? :msg="item"http://父組件通過屬性傳值給子組件
? ? ? ? :index="index"http://傳參，數(shù)據(jù)下標(biāo)值
? ? ? ? @delete="handleDelete"http://訂閱delete方法(監(jiān)聽delete方法)，觸發(fā)時(shí)執(zhí)行父組件handleDelete方法
? ? ? ></todo-item>
? ? </ul>
? </div>
</div>
實(shí)例：
var TODOITEM = {//每個(gè)組件都是一個(gè)實(shí)例
? ? props:['msg','index'],//接收參數(shù)
? ? template:"<li @click='handleClick'>{{msg}}</li>",//使用參數(shù)
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.$emit('delete',this.index)//發(fā)布delete方法，通知父組件刪除本實(shí)例，傳參：本實(shí)例在父組件的下標(biāo)值
? ? ? }
? ? }
? }
? new Vue({
? ? el:"#root",
? ? components:{//局部組件需要先在實(shí)例注冊才能在實(shí)例中使用
? ? ? "todo-item":TODOITEM
? ? },
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? },
? ? ? handleDelete:function(index){//父組件刪除子組件想刪除的數(shù)據(jù)
? ? ? ? this.list.splice(index,1)
? ? ? }
? ? }
? })
查看全部 -
組件與實(shí)例的關(guān)系：
var TODOITEM = {//每個(gè)組件都是一個(gè)實(shí)例
? ? props:['msg'],//接收參數(shù)
? ? template:"<li @click='handleClick'>{{msg}}</li>",//使用參數(shù)
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? alert("hello")
? ? ? }
? ? }
? }
查看全部 -
TODOLIST組件拆分:
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <todo-item//組件名稱
? ? ? ? v-for="(item,index) of list"
? ? ? ? :key="index"
? ? ? ? :msg="item"http://傳參，參數(shù)名msg，值item
? ? ? ></todo-item>
? ? </ul>
? </div>
</div>
實(shí)例：
/*Vue.component("todo-item",{//全局組件，定義好了就可以在任意模板直接用
? ? props:['msg'],//接收參數(shù)
? ? template:"<li>{{msg}}</li>"http://使用參數(shù)
? })*/
? var TODOITEM = {//定義局部組件
? ? props:['msg'],//接收參數(shù)
? ? template:"<li>{{msg}}</li>"http://使用參數(shù)
? }
? new Vue({
? ? el:"#root",
? ? components:{//局部組件需要先在實(shí)例注冊才能在實(shí)例中使用
? ? ? "todo-item":TODOITEM
? ? },
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? }
? ? }
? })
查看全部 -
TODOLIST
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <li v-for="(item,index) of list" :key="index">{{item}}</li>
? ? </ul>
? </div>
</div>
實(shí)例：
new Vue({
? ? el:"#root",
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? }
? ? }
? })
查看全部 -
點(diǎn)擊顯示當(dāng)前內(nèi)容
查看全部 -
<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"
? ? ? >
? ? ? </todo-item>
? ? </ul>
? </div>
? <script src="vue.js"></script>
? <script>
? ? Vue.component('todo-item',{
? ? ? props:['content'],
? ? ? template:'<li>{{content}}</li>'
? ? })
? ? new Vue({
? ? ? el:'#root',
? ? ? data:{
? ? ? ? inputValue:'',
? ? ? ? list:[]
? ? ? },
? ? ? methods:{
? ? ? ? handleSubmit:function() {
? ? ? ? ? this.list.push(this.inputValue);
? ? ? ? ? this.inputValue=''
? ? ? ? }
? ? ? }
? ? })
? </script>
查看全部 -
v-if,v-show,v-for：
<div id="root">
? <div v-if="vif">hello world</div>//v-if控制dom存在與否,false則直接從dom樹移除
? <div v-show="show">this is vue</div>//v-show控制dom顯示與否，false則display=none，但還在dom樹上
? <button @click="handlerClick">{{msg}}</button>
? <ul>
? ? <li v-for="(item,index) of list" :key="index">{{item}}</li>
? </ul>//v-for循環(huán)展示數(shù)據(jù)，表示遍歷list，將value放到item，下標(biāo)放到index，key是為了提升性能
</div>
實(shí)例：
new Vue({
? ? el:"#root",
? ? data:{
? ? ? msg:"cilck",
? ? ? vif:true,
? ? ? show:false,
? ? ? list:[1,2,3]
? ? },
? ? methods:{
? ? ? handlerClick:function(){
? ? ? ? this.vif=!this.vif;//值取反
? ? ? ? this.show=!this.show;//值取反
? ? ? }
? ? }
? })
查看全部 -
計(jì)算屬性與偵聽器：
<div id="root">
? 姓：<input v-model="firstName">//v-model雙向數(shù)據(jù)綁定
? 名：<input v-model="lastName">//v-model雙向數(shù)據(jù)綁定
? <div>{{fullName}}</div>
? <div>{{count}}</div>
</div>
實(shí)例：
? new Vue({
? ? el:"#root",
? ? data:{
? ? ? firstName:'',
? ? ? lastName:'',
? ? ? count:0
? ? },
? ? computed:{//計(jì)算屬性，只有數(shù)據(jù)發(fā)生變化才會(huì)重新計(jì)算，未發(fā)生變化用之前計(jì)算結(jié)果的緩存值來展示
? ? ? fullName:function(){
? ? ? ? return this.firstName+' '+this.lastName
? ? ? }
? ? },
? ? watch:{//偵聽器，偵聽數(shù)據(jù)是否發(fā)生變化
? ? ? fullName:function(){
? ? ? ? this.count++
? ? ? }
? ? }
? })
查看全部
舉報(bào)