摘要：用于列表渲染，可以循環(huán)遍歷數(shù)組和對(duì)象注意目前指的是的迭代事件綁定，簡(jiǎn)寫相當(dāng)于與相比，避免了閃現(xiàn)的問題。

node vue項(xiàng)目開發(fā)

看了近一周的vue開發(fā)，有諸多感觸，我之前接觸過react、angular所以特別想學(xué)學(xué)久仰大名的vue。學(xué)習(xí)半天以后發(fā)現(xiàn)，接觸到的東西多了，學(xué)習(xí)起來就是容易很多，vue的指令我能個(gè)聯(lián)想到angular的指令，vue組件化設(shè)計(jì)類似于react的組件化設(shè)計(jì)，包括一些router的設(shè)置跟react里的路由或者nodejs里的路由都差不多，vuex更是根據(jù)redux、flux改寫的，雖然我還搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs沒有太大的區(qū)別。使用vue可以完全脫離jq，雖然我還沒感受到不用jq有什么神奇的趕腳，但是我覺得這種雙向數(shù)據(jù)綁定的還是挺方便的，此文檔用來記錄我學(xué)習(xí)vue的一些新的知識(shí)和想法。

指令

v-bind 主要用于動(dòng)態(tài)綁定DOM元素屬性，即元素屬性實(shí)際的值是 有vm實(shí)例中的data屬性提供的。

v-model 主要對(duì)表單元素進(jìn)行雙向數(shù)據(jù)綁定，在修改表單元素的值時(shí)，實(shí)例vm中對(duì)應(yīng)的vm對(duì)應(yīng)的屬性也同時(shí)更新。

v-if,v-show,v-else這幾個(gè)指令來說明模板和數(shù)據(jù)間的邏輯關(guān)系

v-if和v-else的作用是根據(jù)數(shù)值來判斷是否輸出該dom元素，以及包含的子元素。
eg:

當(dāng)vm實(shí)例中的data.yes=true時(shí)，模板引擎會(huì)編 譯這個(gè)dom節(jié)點(diǎn)，輸出

yes

值得注意的是：v-else要緊跟v-if否則不起作用。

v-show與v-if的效果差不多，都是通過判斷真假顯示內(nèi)容，唯一不同的是，v-show不顯示的時(shí)候是display:none,也就是保留了dom節(jié)點(diǎn)，但是v-if不會(huì)。

v-for 用于列表渲染，可以循環(huán)遍歷數(shù)組和對(duì)象,注意v-for="b in 10"目前指的是1-10的迭代

v-on 事件綁定，簡(jiǎn)寫@:

v-text

相當(dāng)于innerText,與{{msg}}相比，避免了閃現(xiàn)的問題。

v-HTML 類似于innerHTML,也可以避免閃現(xiàn)

v-el 這個(gè)指令相當(dāng)于給dom元素添加了個(gè)索引，例如

,如果想獲取當(dāng)前dom里的值,可以vm.$els.demo.innerText,注意：html不區(qū)分大小寫，駝峰式的寫法會(huì)自動(dòng)轉(zhuǎn)成小寫，可以通過-的方式轉(zhuǎn)換成大寫。

v-ref 與v-el類似 通過vim.$refs訪問

v-pre 跳過編譯這個(gè)元素

v-cloak 感覺沒啥用

v-once新增內(nèi)置指令，用于標(biāo)明元素或組件只渲染一次。

模板渲染

v-for 主要用于列表渲染，講根據(jù)接受到的數(shù)組重復(fù)渲染v-for綁定到的dom元素及內(nèi)部子元素，并可以通過設(shè)置別名的方式，獲取數(shù)組內(nèi)數(shù)據(jù)渲染到節(jié)點(diǎn)中。
eg:

    

      
{{item.title}}
      
{{item.description}}
    

v-for在vue1.x內(nèi)置$index變量，在vue.2x移除了此變量，直接使用{{index}},例如

{{index}}

修改數(shù)據(jù)

直接修改數(shù)組可以改變數(shù)據(jù)

不能直接改變數(shù)組的情況

1.vm.items[0]={},這種情況下無法修改，解決：vm.item.$set(0,{})或者vm.$set("item[0]",{})

2.vm.item.length=0

v-for遍歷對(duì)象，可以使用（key,value）的形式自定義key變量。

   {{key}}:{{vue}}

注意：在vue1.x內(nèi)置`$key`變量，在vue.2x移除了此變量，直接使用`{{key}}`

template標(biāo)簽

用來作為模板渲染的跟節(jié)點(diǎn)，但是渲染出來不存在此節(jié)點(diǎn)

事件綁定與監(jiān)聽

v-on可以綁定實(shí)例屬性methods中的方法作為事件的處理器，v-on:后面可以接受所有的原生事件名稱。

簡(jiǎn)寫 @:

可以綁定methods函數(shù)，也支持內(nèi)聯(lián)js，但是僅限一個(gè)語句。

綁定methods函數(shù)和內(nèi)聯(lián)js都可以獲取原生dom元素，event.

綁定多個(gè)事件時(shí)，為順序執(zhí)行。

ui組件 餓了嗎 使用指南

安裝

npm install cnpm install element-ui --save-dev

引入文件main.js

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI, { size: "small" })

使用

在components文件夾下新建一個(gè)頁(yè)面，從餓了嗎找到自己喜歡的組件，比如走馬燈 Carousel.vue 把代碼復(fù)制到這個(gè)頁(yè)面

在需要的此組件的文件下，比如APP.vue里

import Carousel from "./components/Carousel"
export default {
  name: "app",
  components: {  //components加s
    Carousel: Carousel
  }
}

在模板里載入組件

這樣就可運(yùn)行了

自定義組件

例如我想在加一個(gè)導(dǎo)航組件名字叫做headerBar,我在components里加一個(gè)文件叫做headerBar.vue：

使用：
在App.vue中需要先導(dǎo)入這個(gè)組件，再注冊(cè)這個(gè)組件，最后使用它