剛進公司做的第一個項目,剛好前端人手不足,需要我們後端同時兼顧前後端的工作,采用的iview UI架構,基于vue.js。
先給大家科普一下:
前端JS架構和前端UI架構的差別
前端JS架構:基于js進行一定封裝與一些獨立設計的架構
比如:jQuery,Vue,React,angular等等
前端UI架構:基于某種js架構進行設計的UI元件庫,就是一些寫好的UI元件,拿來就能用,不需要自己寫css
比如:
基于JQuery的Bootstrap,jQuery Smart UI 等
基于Vue的iView,Element等
基于React的Material-UI,React Desktop等
對于剛接觸的Vue架構的我來說,vue最大的特性,莫過于
雙向綁定
了
單向綁定和雙向綁定
Model:資料模型
View:視圖
單向綁定：把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。是以，我們不需要進行額外的DOM操作，隻需要進行Model的操作就可以實作視圖的關聯更新。
例如，我們定義好一個JavaScript對象作為Model，并且把這個Model的兩個屬性綁定到DOM節點上：
雙向綁定：把Model綁定到View的同時也将View綁定到Model上，這樣就既可以通過更新Model來實作View的自動更新，也可以通過更新View來實作Model資料的更新。
是以，當我們用JavaScript代碼更新Model時，View就會自動更新，反之，如果使用者更新了View，Model的資料也自動被更新了。
例如當使用者填寫表單時，View的狀态就被更新了，在浏覽器中，當使用者修改了表單的内容時，我們綁定的Model會自動更新,那就相當于我們把Model和View做了雙向綁定：
Vue的基本結構
//這個div在最外層,将其他的div或者其他元素都包起來 <div id="app">...</div> <script> const app = new Vue({ //找到對應的dom樹,将他轉成vue對象 el: '#app', //資料屬性:存放資料 data: { message: 'Vue的生命周期' }, //方法屬性:存放方法 methods：{ test:function(){ console.info("測試方法") } }, //建立完成狀态函數: //元件執行個體建立完成,屬性已綁定,但DOM未生成 //常用于資料的初始化操作 created () { console.group('------created建立完畢狀态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, //DOM渲染完成 //常用于資料的初始化操作,當需要操作DOM時,在此處進行 mounted: function () { console.group('mounted 挂載結束狀态===============》'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 } }) </script> 下面寫一個使用例子
<!-- 引入 Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <!-- 引入 iView的樣式css --> <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> <!-- 引入 iView --> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <body> <div id="app"> <div style="margin:auto;height: 300px;width: 300px"> <b>View</b> <i-input v-model="name" ></i-input> <i-input v-model="age" ></i-input> <i-button @click="test">測試按鈕</i-button> <p><b>Data</b></p> <p>{{name}}</p> <p>{{age}}</p> </div> </div> </body> <script> const app = new Vue({ el: '#app', //找到對應的dom樹。将他轉成vue對象, //資料屬性:存放資料 data: { name:"ken", age:"26" }, //方法屬性:存放方法 methods: { test:function(){ this.name = "測試按鈕-名稱" this.age = "測試按鈕年齡" } } }) </script> 1.data初始化DOM的值
2.使用v-model屬性進行資料綁定
3.Dom的值與data的值雙向綁定綁定,互相影響
可看下面動圖
這裡隻做了個小示範,我的vue水準也差不多到這了(hahah~)
我這裡使用的iview UI架構,也可以嘗試其他的UI架構,UI架構都差不多,隻是一些樣式群組件
就到這了,感興趣的可以自己動手試試,有js,Jquery基礎的上手很快!
我們被教育訓練了半個小時,就開始動手寫了