前端--vue框架
1、下載
查看已安裝好的版本
?-------漸進式的JS框架---------
vue是什么
Vue.js(讀音 /vju?/, 類似于 view) 是一套構(gòu)建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。如果你是有經(jīng)驗的前端開發(fā)者,想知道 Vue.js 與其它庫/框架的區(qū)別,查看對比其它框架。
?引入vue格式(網(wǎng)址引入):
?
// 實例化vue對象 new Vue({ el:"#vue-app" data:{ name:"miss wu" },methods:{
},
watch:{
}});el:element 需要獲取的元素,一定是html中的跟容器元素
data:用于數(shù)據(jù)的存儲
methods:用于存儲各種方法
watch:{}:數(shù)據(jù)監(jiān)聽
一個簡單的實例
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的屬性和方法
?
?
雙擊鼠標(biāo)事件:
?模板指令: html和vue對象的粘合劑
數(shù)據(jù)渲染:v-text、v-html 、{{}}
控制模板 隱藏:v-if、v-show
?
?渲染循環(huán)列表:v-for---展現(xiàn)之后第一行是apple,第二行是banana
事件綁定:v-on
屬性綁定:v-bind
小結(jié):
?v-text="title"等價于{{title}}
?
轉(zhuǎn)載于:https://www.cnblogs.com/foremostxl/p/10328373.html
總結(jié)
- 上一篇: 高并发系统三大利器之缓存
- 下一篇: html5倒计时秒杀怎么做,vue 设