(Vue)初識Vue

時間 2019-12-11

標籤 vue 简体版

原文原文鏈接

Vue是什麼

　　Vue是什麼，咱們能夠從Vue的中文網站來了解它。 https://cn.vuejs.org/ 。Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。也就是說Vue是一個前端的框架，能夠用來構建頁面，包括web以及app。javascript

Vue的優點

　　對於前端開發人員來講，你們使用過不少的Javascript框架。好比原生的JavaScript,Jquery,angularjs和rectjs等。那麼Vue與這些框架相比，它的優點體如今哪裏？html

Vue 只關注視圖層，採用自底向上增量開發的設計。Vue關注的是視圖層，操做的對象是HTML元素。它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。
Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織應用程序，而不是在任什麼時候候都必須遵循 AngularJS 制定的規則，這讓 Vue 能適用於各類項目.在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元——有本身的視圖和數據邏輯。
Vue 學習起來很是簡單.在 API 與設計兩方面上 Vue.js很是簡單，所以你能夠快速地掌握它的所有特性並投入開發。Vue 的總體思想是擁抱經典的 Web 技術，並在其上進行擴展。基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易。

Hello,Vue

　　對於開發人員來講，學習一門語言的第一行代碼，多數是從Hello，World開發。使用Vue，首先是要在html頁面引入Vue.js文件，引入Vue以後，而後實例化vue對象。Vue的參數是對象，el是Vue須要操做的對象，是一個容器。data能夠賦值給Vue綁定的元素。前端

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             {{message}}
11             </div>
12         <script>
13             //vue實例化
14             //el 綁定html對象，選擇器
15             //data:綁定html對象數據，雙向綁定。能夠用v-model
16             var vm = new Vue({
17                 el:"#box",
18                 data:{
19                     message:"hello,vue"
20                 }
21             });
22             
23         </script>
24     </body>
25 </html>

Vue，數據綁定

　　Vue的雙向數據綁定的原理相信你們也都十分了解了，主要是經過Object對象的defineProperty屬性，重寫data的set和get函數來實現的,這裏對原理不作過多描述，主要仍是來實現一個實例。vue

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             <input type="text" v-model="message" />
11             <br />
12             {{message}}
13         </div>
14         <script>
15             new Vue({
16                 el:"#box",
17                 data:{
18                     message:"test"
19                 }
20             })
21         </script>
22     </body>
23 </html>

　　上面的代碼經過Vue實現了數據的雙向綁定，input的值發生改變，div的text值也會發生改變，經過Vue的v-model指令來實現，v-model指令能夠將data中的值綁定給指定的dom對象。若是不使用vue，採用JavaScript事件來事件，咱們就須要爲input綁定input事件。java

相關標籤/搜索

vue+webpack2.0+vuex+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。