Vue簡單使用

2021-10-08 03:39:58 字數 2908 閱讀 6535

vue是一種採用mvvm(model view view-model)架構的js框架

}:用於引用vue內對應key的屬性值(當 網路條件不佳時 可能導致瀏覽器看到源** ,即插值閃爍現象,此時可利用v-text標籤代替)

}<

/span>

//用於在非標籤屬性位置引用vue內屬性名為name的值

"name"

>

<

/span>

//此處採用v-text即可解決插值閃爍問題

配合v-on:click(…動作事件)使用(v-on:click.stop)

v-for可用於陣列或者物件的遍歷:key可以在遍歷的物件發生改變時 html僅渲染改變的值(通過key所指定的唯一標識查詢)進而能提高程式執行效率

陣列結構的遍歷

for=

"(value,index) in users"

:key=

"value.name"

>

編號:} 品牌:

} 型號:

} 動力:

}<

/li>

<

/ul>

//陣列結構的遍歷

物件結構的遍歷

for=

"(value,key,index) in user"

>

屬性索引:

} 屬性名稱:

} 屬性值:

}<

/li>

<

/ul>

//物件結構的遍歷

v-if&v-show能控制所在標籤的隱藏與顯示

v-if: v-if 底層通過刪除對應的標籤來實現標籤的隱藏

"visible"

>you can see me now by v-

if to remove the tag !!!

<

/span>

v-show:底層通過將對應標籤的css display屬性改為none來實現標籤的隱藏

"!visible"

>you can see me now by v-show to set the display to none!!!

<

/span>

當進行一次性操作的時候可以採用v-if實現標籤的隱藏(可以解決一定的安全隱患),當需要多次實現隱藏操作的時候可採用v-show來提公升程式執行效率

利用v-bind:可實現標籤的固有屬性來引用vue的內部屬性(v-bind:可簡寫為:)

class

="" style=

"width: 100px;height: 150px"

>

"#" v-on:click=

"color=!color"

>click me to change bgc!

<

/a>

<

/div>

其中:

const vuetest=

newvue(,

methods:},

created()

, computed:},

/*vue屬性監測*/

watch:

,/*深度檢測-可檢測物件及其屬性的變化*/

user:}}

, components:

})

vue之間的元件關係大致可分為父元件,子元件,同級元件三種

子元件引用父元件屬性

通過子元件的props屬性可實現,通過在子元件的標籤設定相應的屬性來引用父元件的屬性

再通過子元件的props屬性來引用子元件標籤上自定義的屬性即可在子元件內部間接引用父元件的屬性

子元件改變父元件屬性

在子元件上自定義事件繫結父元件中的方法(方法內控制父元件屬性)

在子元件中以$emit(eventname,[params…])來觸發子元件標籤上的相應事件

props的預設值

通過以下格式也可為props內的屬性設定相關屬性(預設值…)

props:

}

"parentcomponent"

>

//自定義num屬性的值為父元件的num屬性

:num

="num"

v-on:addevent

="add()"

v-on:reduceevent

="reduce()"

>

child-component

>

div>

//子元件 $emit()可觸發子元件上對應的事件(此處即觸發addevent&reduceevent事件)

const childcomponent=

} `,

props:

["num"]}

;//父元件

newvue(,

props:

["property1"

,"property2"],

components:

, methods:

,reduce()

}});

簡單使用Vue

安裝node.js 1 cmd檢視是否安裝成功 npm version npm v檢視安裝路徑 注意 安裝node.js的目的是為了使用npm指令 安裝使用vue devtools 2 解壓 3 cmd進入解壓目錄 執行命令 npm install npm run build 這一步一定不要忘了,沒...

vue使用bootatrap簡單分頁

html 清單總數 未採購數 新增 序號清單名稱 已採購狀態 刪除 刪除首頁 1 item pagecount 1 item showpagesstart item showpageend item pagecount class btn btn default v on click getlist...

gojs 在vue中簡單使用

先推薦一篇文章 栗子1效果圖可折疊的 family tree 此例是單純的html格式,複製貼上就會出效果 同上需要先定義dom js window.onload function function init 樹狀結構的角度 mydiagram.nodetemplate gm go.node,ver...