最近學習了一段時間的vue js 除了路由沒用過之外 基本上其他的都用過了
對於vue的一些用法 在此做乙個總結。 開始使用vue之前 需要匯入vuejs這個檔案到專案中
在做專案的過程中 我們基本上需要用到的就是vue的雙向繫結、條件與迴圈了
下面先介紹一下vue的雙向繫結 指令：v-model vue的一些指令都是v-***的 非常容易記 基本上用幾次就會了
lz就不寫什麼小例子了 直接從專案中複製部分**介紹吧
我們匯入vuejs檔案之後 下面就需要建立vue例項了 首先我們需要在頁面中任意乙個標籤定義乙個id，vue例項的作用域也就在這個標籤當中
定義好之後就在js當中建立vue了
//建立vue
var vue = new
vue(}},
methods:
})
el裡面寫的就是標籤當中的id了，data裡面是定義的資料字段，可以包含物件
用的時候就可以用v-model繫結在表單元素上，比如繫結到input標籤上，那麼我們在文字框中輸入的值就付給vue當中定義的資料字段了
<input
type
="text"
name
="email"
v-model
="product.enterprisename"
placeholder
="請輸入郵箱"
/>
我們在這個文字框中輸入值之後 相應的 我們定義的那個欄位的值也就發生改變了
當我們刪除文字框中輸入的值之後 這個時候 我們定義的資料字段的值也就沒了 這就是vue的雙向繫結了。如果我們只需要在頁面當中顯示值的話
就可以用雙花括號的形式在標籤當中插入要顯示的值 比如：
<tr v-for
="ongoings in addongoing"
v-if
="addongoing.length>0"
>
<
td>}
td>
<
td> }
td>
<
td class
="w90"
> }
td>
<
td> }
td>
tr>
<
tr v-if
="addongoing.length==0"
><
td colspan
="4"
class
="text-center"
>沒有相關的週報記錄！
td>
tr>
這段**當中用到了v-if 就跟我們平時寫的if是一樣的 當滿足某個條件就顯示這一行
vue比較強大的一點就是可以無重新整理頁面重新渲染頁面，也就是說當資料發生改變了 頁面上的值也會發生改變,做分頁的時候可以用到這一點
就是用ajax發起請求之後給自定義的資料物件重新賦下值就行了。vue當中還有乙個比較常用的指令是v-for 用法有些像foreach
<tr v-cloak v-for
="authorizationinfo in authorizationinfolist"
>
遍歷從後台傳入過來的物件集合
這兩個 前面authorzationinfo是集合當中的物件 用的時候可以直接以authorzationinfo.***的形式來在頁面上使用。
最後就是在methods當中寫方法了，這個和jquery當中寫事件有些類似 語法是： 方法名:function(){}
在花括號當中寫需要執行的**，可以把這個方法繫結到標籤上監聽 比如單擊事件
methods: ,success:
function
() });
}}
繫結在標籤上的指令是 v-on:click=「***" 這個繫結是單擊事件。基本上做專案用到的也就是這些了
如果需要其他的用法可以去vue官網看，lz是乙個小白，有些講的不好的地方 大家見諒
Vue關於元件方面的一些總結
新舊虛擬dom經過diff比對,形成乙個補丁 patch s 區域性更新真實dom 按dom樹的層級分解比較 嚴格的資料結構劃分 同key值對比 v for寫key,其他的元素會預設分配key 注意 在v for對乙個陣列迴圈渲染的時候千萬別用索引值當做key值。因為在是涉及陣列的增刪時候,索引值每...
關於自己學vue的一些基礎總結
安裝4.0以上的webpack還需要再安裝webpack cli webpack.config.js 中的api如果是複數，一般是陣列 webpack.config.js配置檔案中的plugins htmlwebpackplugin要放在外掛程式的首位，不然會出錯 匹配vue檔案時，要在plugin...
vue面試的一些總結
vue中元件的data為什麼是乙個函式?元件是可復用的vue例項，乙個元件被建立好之後，就可能被用在各個地方，而元件不管被復用了多少次，元件中的data資料都應該是相互隔離，互不影響的，基於這一理念，元件每復用一次，data資料就應該被複製一次，之後，當某一處復用的地方元件內data資料被改變時，其...