"en">"
music
"currentsong
" autoplay="" controls="" @ended="
nextsong
">
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>*ul
listyle
>
head
>
<
body
>
<
div
id="music"
>
//這裡的：src是繫結的計算屬性，預設執行get方法。
<
audio
:src
="currsong"
autoplay
=""controls
=""@ended
="nextsong"
>
audio
>
<
ul>
<
li v-for
='(item,index)
in songs' @click
="clickhandler(index)"
>
<
h3>歌名:}
h3>
<
h3>歌手:}
h3>
li>
ul>
<
button
@click
="addonesong"
>新增一首歌
button
>
div>
<
script
src="../day2/vue.js"
>
script
>
<
script
>
varsongs=[,,
,]
varmusic
=new
vue(,
methods:,
nextsong(),
addonesong())}},
computed:
},created()
})script
>
body
>
html
>
vue的核心基礎就是元件的使用，玩好了元件才能將前面學的基礎更好的運用起來。元件的使用更使我們的專案解耦合。更加符合vue的設計思想mvvm。
那接下來就跟我看一下如何在乙個vue例項中使用元件吧！
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
head
>
<
body
>
<
div
id>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
div>
<
script
src="vue.js"
>
script
>
<
script
>
//元件的建立
登入<
/button>註冊<
/button
>
<
/div>
<
/div>
<
/div>`
})
var=
newvue(,
methods:{},
computed:{},
})script
>
body
>
html
>
元件是可復用的vue例項，並且帶有乙個名字：在這個例子中是。我們可以在乙個通過new vue建立的 vue 根例項中，把這個元件作為自定義元素來使用：
元件是可以復用的，所以可以寫多個。
<div
id>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
<
vheader
>
vheader
>
div>
給vheader元件中新增乙個按鈕，繫結資料屬性count，然後你會發現點選按鈕時，每個元件都會各自獨立維護它的count。因為你每用一次元件，就會有乙個它的新例項被建立。
在建立元件過程中第乙個引數是元件的名字，第二個引數是跟new vue例項一樣的options。跟例項物件不同的是有兩點：
關於元件名的起名：
1、元件中沒有el，因為el僅僅的是繫結vue的根元素。
2、data屬性不再是返回物件，而是返回乙個函式。而且必須返回乙個函式。
優化的一些例項
優化使用的工具，使用loadrunner做為壓力測試工具，使用jprobe進行 剖析。1 第乙個例項。原狀況 呼叫乙個api，發現執行的時間很高，用jprobe分析，發現消耗時間最長的是把快取中的乙個樹從第三個節點進行扁平化，就是把第二個節點的子樹構造為乙個列表，不知道為什麼構造這個資料的耗時比直接...
一些jQuery 例項
設定內容 text html 以及 val changehtml click function 新增新的 html 內容 向 html 元素追加內容 在 html 元素之後追加內容。before after html click function jquery 操作 css 改變 html 元素的 ...
Vue 例項暴露了一些有用的例項屬性與方法
vm viewmodel，乙個 vue 例項其實正是乙個 mvvm 模式 中所描述的 viewmodel 因此在文件中經常會使用vm這個變數名 vue 例項暴露了一些有用的例項屬性與方法。這些屬性與方法都有字首 以便與 的資料屬性區分。例如 var data var vm new vue vm.da...