掃一掃
服務近2000家企業，依托一系列實踐中打磨過的技術和產品，根據企業的具體業務問題和需求，針對性的提供各行業大數據解決方案。
前端軟件開發技術VUE使用
來源：未知 時間：2018-55-19 瀏覽次數：144次
前端軟件開發技術VUE使用，vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動<div id="root"><h1>dddd{{msg}}</h1></div>
new vue({
el:"#root"
data:{msg:"xxxx"}
})
一、屬性解釋:
- el：表示指定vue對象綁定的html元素
- data：為綁定html填充的元素
- template：vue模板，即掛載點中的html元素及替換數據，掛載點內部的所有html及替換數據內容
- methods：綁定的方法集合
二、掛載點，模板，及實例
- 掛載點：將id為root的HTML元素叫做該綁定vue對象的掛載點
- 模板：掛載點中的所內容叫模板，如<h1>dddd{{msg}}</h1>,
- 模板的實現方式有兩種，第一種是在html行內寫，第二種是在VUE對象中指定template屬性：
1.<div id="root"><h1>dddd{{msg}}</h1></div>
2.<div id="root"></div>
new vue({
el:"#root"，
template：<h1>dddd{{msg}}</h1>
data:{msg:"xxxx"}
})
- 實例：new vue（{}）就是創建了一個vue實例，vue實例必須指定掛載點，還可以操作模板即填充數據等
三、模板中插入date中的值有兩種方法
- 1.{{}}符號叫做插值表達式,如，{{msg}}
- 2.可以使用v-text=變量名來插入(或v-html=變量名)，如<h1 v-text="msg"></h1>
- 3.v-text與v-html的區別，前者只能插入文本，不能插入html代碼，HTML代碼插入會被轉義直接顯示，后者可以插入html與文本
<div id="root" ><h1 v-on:click="functionname"> {{msg}}</h2></div>
new vue ({
new vue ({
el:"#root",
data:{
msg:hhhhhh
},
methods:{
functionname:function(){
alert(111)
}
}
})
四、方法綁定
四、方法綁定
1.vue使用v-on:click="functionname" 綁定事件，在vue實例的methods屬性中定義要綁定的方法(多個)
五、在模板中循環插入數據 v-for="data in datas"的使用
五、在模板中循環插入數據 v-for="data in datas"的使用
<div id="app1"><ul><li v-for="msg1 in msgs">{{ msg1 }}</li></ul></div>
app1 = new Vue({
el:"#app1",
data:{
msgs:["aaaa","bbbb","cccc","dddddd","eeeeeeeee"]
}
})
vue是目前非常流行的軟件開發前端技術，使用廣泛，易于維護，使得前后臺分離，后臺數據讀取等操作會在下片文章中繼續講解
vue是目前非常流行的軟件開發前端技術，使用廣泛，易于維護，使得前后臺分離，后臺數據讀取等操作會在下片文章中繼續講解
- 上一篇: vmware虛擬操作系統與數據恢復
- 下一篇: 前端軟件開發技術VUE使用(第二部分)