vue開發體驗

body

body>*:first-child

body>*:last-child

p, blockquote, ul, ol, dl, table, pre

h1, h2, h3, h4, h5, h6

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code

h1 h2

h3 h4

h5 h6

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p

a a:hover

ul, ol

ul li>:first-child, ol li>:first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type

ul ul, ul ol, ol ol, ol ul

dl dl dt

dl dt:first-child

dl dt>:first-child

dl dt>:last-child

dl dd

dl dd>:first-child

dl dd>:last-child

pre, code, tt

code, tt

pre>code

pre

pre code, pre tt

kbd

blockquote

blockquote>:first-child

blockquote>:last-child

hr table th

table th, table td

table tr

table tr:nth-child(2n)

img 記錄下vue開發過程中的一些理解，如有不足，希望大家多多提意見。

vue裡面的資料繫結，是一種常見的元素操作，如v-bind:src,v-bind:class,v-bind:style等等。

//html** //js** data:

渲染為

1.jpg為需要載入的，grey.gif為載入前等待（高度只有1px）,再引入js**，進行控制修改，繁瑣又不夠靈活。而vue解決了這個問題。

ajax請求資料鏈結位址，寫入data，監測到imgurl變化，自動更新檢視。後期可以根據具體的需求，做出相應的擴充套件。

vue是專門view資料渲染的mvvm框架，其中最核心的是元件開發。元件註冊後便可以用在父例項的模組中，以自定義元素的形式使用要確保在初始化根例項之前註冊了元件。這是官網的描述，重點是先註冊元件，再初始化根例項vue，否則元件註冊失敗。

全域性元件註冊

//html**
//js**
vue.component('my-component', )

區域性元件註冊

區域性註冊元件，只能使用在父元件模板內

//html**
//js**
var parent = vue.extend(
}})//元件例項化
new parent()

在元件命名上出現大寫，如,元件是註冊失敗。

元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。

props

「prop」是元件資料的乙個字段，期望從父元件傳下來

//html**
//js**
vue.component('child', }'
})//渲染為
hello!

動態 props

與v-bind屬性繫結結合使用

//html**
//js**
vue.component('child', }'
})new vue(}})

與v-mode結合v-bind結合一起使用

//html**
//js**
vue.component('child', }'
})new vue(
})

參考文件

vue開發體驗

vue例項體驗

vue 初識（概念 Vue初體驗）

vue的初體驗

vue開發體驗

vue例項體驗

vue 初識（概念 Vue初體驗）

vue的初體驗

相關推薦