vue是一個前端框架,封裝的是原生js, vue里面封裝的基本都是es6的方法.
1.vue.js的快速入門使用.
官方網站：
官方文檔：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，我們學習2.x版本的。2.x到3.x是平滑過渡的，也就是說你之前用2.x寫的代碼，用3.x的版本的vue.js也是沒問題的。
前后端分離的項目，py33網站 vue + drf(djangorestframework后端接口) 開發項目
crm項目， 非前后端分離 index.html {{ msg }} -- views.py def index(request):render(request,'index.html',{'msg':'xxoo'}) /index/
Vue 前端框架 MVVM -- model -- view -- viewmodel --- template模板渲染
model--數據
view -- 視圖 -- html標簽 類似於jquery $('#d1').text('xxx')
viewmodel：數據驅動視圖 vue的核心，model數據直接驅動到視圖中(html標簽中)
django -- MTV模式 model template view + url控制器 template這一塊功能就去掉了
view--視圖： 后端邏輯 FBV和CBV
圖解:
2.vue安裝
1.打開vue官網,將這個地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 中的代碼復制到項目vue.js文件中,如圖:
2.新建html文件,在其中引入vue.js文件,如圖,引入后就可以正常使用了.
3. vue基本使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <h1>{{msg}}</h1> <h1>{{ number+1 }}</h1> <!-- 支持四則運算,簡單的js語法都支持 --> <h1>{{ 3+1 }}</h1> <h1>{{info.name}}</h1> <h1>{{number>100?'aa':'bb'}}</h1> <!-- 三元運算 --> <h1>{{msg2.split('').reverse().join('')}}</h1> <!-- 常用數據類型的一些方法或者屬性都可以直接調用 --> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el:'#app', // 要通過vue語法來控制id屬性值為app的標簽, 在這個標簽內部,就可以使用vue的語法 // data:{ // msg:'aaaaa', // } // 以后用這種方式定義數據屬性 data(){ return { msg:'hello world', number:101, info:{name:'chao',age:18}, msg2:'hello' } } }) </script> </html>
總結:
1. vue的使用要從創建Vue對象開始 var vm = new Vue(); 2. 創建vue對象的時候，需要傳遞參數，是自定義對象，自定義對象對象必須至少有兩個屬性成員 var vm = new Vue({ el:"#app", # 圈地:要通過vue語法來控制id屬性值為app的標簽, 在這個標簽內部,就可以使用vue的語法,這個標簽外部不能使用vue語法 #數據屬性定義的: 方式1 data: { 數據變量:"變量值", 數據變量:"變量值", 數據變量:"變量值", }, #方式2 (常用) data(){ return { msg:'hello world', } } }); el:圈地，划地盤，設置vue可以操作的html內容范圍，值就是css的id選擇器,其他選擇器也可以，但是多用id選擇器。 data: 保存vue.js中要顯示到html頁面的數據。 3. vue.js要控制器的內容外圍，必須先通過id來設置。 <div id="app"> <h1>{{message}}</h1> <p>{{message}}</p> </div>