01 vue語法基礎
02 vue資料繫結與指令
03 vue元件技術
04 vue單檔案元件定義與使用
元件是vue.js最強大的功能之一。元件是可復用的vue例項，且帶有乙個名字，通過元件封裝可重用的**，在較高層面上，元件是自定義元素。
元件名對應標籤名，標籤名不允許出現大寫字母，因此元件名包含多個單詞時需要採用kebab-case (短橫線分隔命名) 命名。
元件名稱中如果用了大寫字母，使用元件的時候需要轉成kebab-case方法，例如元件名為：unistatusbar，使用元件的時候
元件模板**必須是單個跟元素。
"">元件1元件2
"">元件1元件2
"">兩個按鈕可以單獨點選：子元件事件加了.stop防止冒泡。
執行效果：
屬性名對應標籤屬性，標籤的屬性名不允許出現大寫字母，因此屬性名包含多個單詞時需要採用kebab-case (短橫線分隔命名) 命名。
props公開的屬性是父元件傳遞給子元件的，當父元件資料發生變更的時候子元件一起變更，因此在子元件內不要對傳入的資料變數進行修改。
當父元件需要向子元件傳遞資料時，需要在子元件內通過props向外公開接收的屬性列表。
"">1) 普通方式元件1元件2
元件2
props: ['2) 型別限定方式title
', '
likes
', '
ispublished
', '
commentids
', '
author
']
props:3) 複雜限定方式
vue.component('
my-component
', ,
//帶有預設值的數字
propd: ,
//帶有預設值的物件
prope: }},
//自定義驗證函式
propf:
}}})
4) 單向資料流
所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。
額外的，每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變 prop。如果你這樣做了，vue 會在瀏覽器的控制台中發出警告。
$emit引數值中不允許出現大寫字母，因此事件名需要採用kebab-case (短橫線分隔命名) 命名。
以下兩種情況要用到$emit:
1) 當子元件某事件觸發時，要執行父元件的某個事件處理方法時
2) 當要把子元件的資料傳遞給父元件時
採用$emit方式，**例項如下：
"">兩個子元件共享父元件的值，當單擊第乙個組元件4次後，執行效果如下：event="
receivesub1
">元件1
父元件的值:}
event="
receivesub2
">元件2
父元件的值:}
核心**
子元件方法內：this.$emit('
自定義事件
', data.ids)
元件使用時：
《元件名 @自定義事件='父元件的
方法'/>
v-model是props和事件的結合，用來實現父元件和子元件的雙向通訊。
乙個元件上的v-model缺省會利用名為value的 props和名為input的事件，為了防止衝突，也可以通過元件的model選項來自己定義。
"">在元件使用的時候，直接在元件標籤上繫結原生事件是不生效的，如果要把該原生事件繫結到元件內的某個表單上，需要在表單上增加 v-on="$listeners" 屬性值。v-model="pvalue">元件1
父元件的值:}
元件2 父元件的值:}
直接在元件內的input上繫結focus也可以的，不清楚該語法使用場景是啥。
"">在元件模板**中可以建立插糟(佔位符)，在元件使用的時候，可以向元件內部的插槽填充內容，實現元件展示內容的個性化定製。"pvalue
"@focus="onfocus">元件1
父元件的值:}
元件2 父元件的值:}
"">使用元件是，元件內的內容自動填充到所有不具名的插槽中，可以有多個不具名插糟，執行效果：父容器填充內容
父容器給begin的內容}預設填充內容
父容器給end的內容父容器填充內容
執行效果：
填充內容裡邊可以使用外層元件的資料，不能使用元件內的資料。
父級模板裡的所有內容都是在父級作用域中編譯的；子模板裡的所有內容都是在子作用域中編譯的。
v2.6.0之後，用v-slot替代了slot和slot-scope這兩個指令。
通過v-slot設定插槽名稱，v-slot必須應用在template標記上，修改後**如下：
父容器給begin的內容}預設填充內容有時讓插槽內容能夠訪問子元件中才有的資料是很有用的。父容器給end的內容父容器填充內容
例項**如下：
"">那個插槽分享出去的，那個插槽才可以使用"begin
">父給begin的內容}}預設填充內容
v-slot:begin="slotprops">}-}
執行效果：
1）獨佔預設插槽的縮寫語法：廢棄template標籤直接載入元件上
default="slotprops
">}
"2）名稱直接帶表示式slotprops
">}
"3）名稱重新命名">}
"4）變更屬性內容">}
"變數名不能有大寫字母。}">}
"">"begin
">父給begin的內容}}預設填充內容
v-slot:[slotname]="
slotprops
">}-}
v-slot也有縮寫，即把引數之前的所有內容 (v-slot:) 替換為字元#。例如v-slot:header可以被重寫為#header： 03 vue的計算屬性
計算屬性computed是vue例項的乙個屬性，它和methods的用法完全一樣，一般如果我們要對資料進行一定的變通後顯示的話，可以使用這個屬性。h2 h2 h2 h2 div src js vue.js script newvue methods computed script body 總 h2...
03 Vue的基礎語法（繫結屬性）
new vue 執行結果 兩種方式 物件語法 陣列語法 物件語法 用法一 直接通過 繫結乙個類 用法二 也可以通過判斷,傳入多個值 class active isactive,line isline hello world！用法三 和普通的類同時存在,並不衝突 注 如果isactive和isline...
03 Vue入門系列之Vue列表渲染及條件渲染實戰
有時候我們要根據資料的情況，決定標籤是否進行顯示或者有其他動作。最常見的就是，渲染的時候，如果 沒有資料，就顯示無資料。如果有資料就顯示 資料。vue幫我們提供了乙個v if的指令，幫助我們完成判斷的模板處理。data v if指令可以根據資料繫結的情況進行插入標籤或者移除標籤。當然，如果熟悉js的...