前端--vue框架
1、下載
查看已安裝好的版本
?-------漸進式的JS框架---------
vue是什么
Vue.js(讀音 /vju?/, 類似于 view) 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,并且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。如果你是有經驗的前端開發者,想知道 Vue.js 與其它庫/框架的區別,查看對比其它框架。
?引入vue格式(網址引入):
?
// 實例化vue對象 new Vue({ el:"#vue-app" data:{ name:"miss wu" },methods:{
},
watch:{
}});el:element 需要獲取的元素,一定是html中的跟容器元素
data:用于數據的存儲
methods:用于存儲各種方法
watch:{}:數據監聽
一個簡單的實例
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link href="styles.css" rel="stylesheet" /><script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"><h1>{{ message }}</h1>{{job}}<p>{{greet('today')}}</p> </div><script src="app.js"> </script> </body> </html>app.js
var app = new Vue({el: '#app',data: {message: 'Hello Vue!',job:'admin'},methods:{greet:function (time) {return 'Good'+'\n'+time+"!"+'....'+this.job}} });?-----------------------
?vue的屬性和方法
?
?
雙擊鼠標事件:
?模板指令: html和vue對象的粘合劑
數據渲染:v-text、v-html 、{{}}
控制模板 隱藏:v-if、v-show
?
?渲染循環列表:v-for---展現之后第一行是apple,第二行是banana
事件綁定:v-on
屬性綁定:v-bind
小結:
?v-text="title"等價于{{title}}
?
轉載于:https://www.cnblogs.com/foremostxl/p/10328373.html
總結
- 上一篇: 高并发系统三大利器之缓存
- 下一篇: vue json 导出 excel