vue.js 是前端的主流框架之一,和angular.js、react.js 一起,並成為前端三大主流框架!
vue.js 是一套構建使用者介面的框架,只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。(vue有配套的第三方類庫,可以整合起來做大型專案的開發)
庫(外掛程式):提供某乙個小功能,對專案的侵入性較小,如果某個庫無法完成某些需求,可以很容易切換到其它庫實現需求。
從jquery 切換到 zepto
從 ejs 切換到 art-template
>
>
>
}p>
div>
>
// 2. 建立乙個vue的例項
// 當我們匯入包之後,在瀏覽器的記憶體中,就多了乙個 vue 建構函式
// 注意:我們 new 出來的這個 vm 物件,就是我們 mvvm中的 vm排程者
var vm =
newvue
( methods:})
script
>
body
>
使用 }的形式獲取值
v-cloak
>
++++++++ } ----------p
>
v-text
="msg"
>
***************===h4
>
v-html
="msg2"
>
1212112div
>
// 將內容解析成html**
type
="button"
value
="按鈕"
v-bind:title
="mytitle + '123'
">
type
="button"
value
="按鈕"
@click
="show"
>
>
var vm =
newvue(,
methods:}}
)script
>
type
="text"
style
="width
:100%;
" v-model
="msg"
>
// 1.迭代陣列
>
v-for
="(item, i) in list"
>
索引:} --- 姓名:} --- 年齡:}li
>
// 2.迭代物件中的屬性
v-for
="(val, key, i) in userinfo"
>
} --- } --- }div
>
ul>
//3.迭代數字
v-for
="i in 10"
>
這是第 } 個p標籤p
>
當 vue.js 用 v-for 正在更新已渲染過的元素列表時,它預設用 「就地復用」 策略。如果資料項的順序被改變,vue將不是移動 dom 元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。為了給 vue 乙個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供乙個唯一 key 屬性。
v-for
="item in list"
:key
="item.id"
>
type
="checkbox"
>
} --- }
p>
一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在執行時條件不大可能改變 v-if 較好。
陣列
v-if
="flag"
>
這是用v-if控制的元素h3
>
v-show
="flag"
>
這是用v-show控制的元素h3
>
:class
="['red', 'thin']"
>
這是乙個**的h1h1
>
陣列中使用三元表示式
:class
="['red', 'thin', isactive?'active':'
']">
這是乙個**的h1h1
>
陣列中巢狀物件
:class
="['red', 'thin', ]"
>
這是乙個**的h1h1
>
直接使用物件
:class=""
>
這是乙個**的h1h1
>
直接在元素上通過:style
的形式,書寫樣式物件
:style=""
>
這是乙個善良的h1h1
>
將樣式物件,定義到data
中,並直接引用到:style
中
在:style
中通過陣列,引用多個data
上的樣式物件
在vm例項中,如果要訪問data上的資料,或則方法methosd中的方法,必須帶 this
Vue(一) 基本指令
vue 和mvvm之間的關係 插值表示式 使用 v cloak 好處 使用v cloak能夠解決插值表示式閃爍問題 用法 先建立乙個css樣式 v cloak 在元素中使用即可 v text 好處 預設是沒有閃爍問題的 v text會覆蓋元素中的原本的內容,但是插值表示式智慧型替換自己的這個佔位符,...
vue基本指令
指令是一些特殊的標記,給html新增一些原來沒有的功能 指令一 v model type text v model num type checkbox v model ischecked div const vm newvue 雙向資料繫結的原理底層通過 object.defineproperty ...
Vue基本指令
該指令表示元素和元件只渲染一次,當資料發生改變時,展示內容不會進行更新 v once h1 某些情況下,從伺服器請求到的資料本身就是乙個html 可以使用該指令進行對 的解析並渲染 v html url h1 div src js vue.js script data 該指令和mustache比較相...