簡述Vue.js
最近幾年vue非常火爆，非常受歡迎
即將面臨畢業的我，終於決定從事前端工作，決然的著手開始學習vue
什麼是Vue.js呢？
它是有助於我們前端工程師開發的一種框架
Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的漸進式框架。
Vue 只關注檢視層， 採用自底向上增量開發的設計。
Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
並且Vue 學習起來非常簡單。
要想學習vue怎麼入手呢？要有什麼準備呢？
裡面的東西也挺多的！
起步呢，你需要點進連結進入網站，點選vue.js安裝，下載我們的vue.js將其引入
或者直接建立文件 .html 將<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>引入到程式碼中
之後我們就可以動手來實現自己的vue程式碼啦
eg：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>學習之地</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app">//跟容器 {{ message }} </div> <script> new Vue({ el: '#app', data: { message: "hello vue!" } }) </script> </body> </html>
Vue.js 的核心是一個允許你採用簡潔的模板語法來宣告式的將資料渲染進 DOM 的系統
例項化Vue物件： el:element 需要獲取的元素，一定是html中的跟容器元素 data:用於資料的儲存 ，用於定義屬性。 {{}}就是獲取data裡的值
除了繫結插入的文字內容，我們還可以採用這樣的方式繫結 DOM 元素屬性：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>學習之地</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <pre><a v-bind:href="url">vue</a></pre> </div> <script> var er = new Vue({ el:'#app', data:{ url:'http://www.runoob.com' } }) </script> </body>
那麼v-bind是做什麼用的呢？
V-bind屬性是指令，指令是帶有v- 字首的特殊屬性，指令用於在表示式的值改變實施，將某些行為應用到DOM上，這段程式碼中的意思就是將這個元素節點的 href屬性和 Vue 例項的 url屬性繫結到一起。
接下來我們來試試實現資料雙向繫結：
v-model 指令，它使得在表單輸入和應用狀態中做雙向資料繫結變得非常輕巧
<!DOCtYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> <link rel="stylesheet" type="text/css" href="../css/index.css"> </head> <body> <h1>Hello world例項</h1> <hr> <div id="app"> <p>{{message}}</p> <p><input type="text" v-model="message"/></p>//雙向繫結文字 </div>
<script> var app = new Vue({ el:'#app', data:{ message:'hello vue!' } }) </script> </body> </html
注意： vue.js為我們最常見的指令提供了特別的縮寫 <a v-bind:href="url"></a>----<a:href="url"></a> <a v-on:click="dosomething"></a>----<a @click="dosomething"></a>
好啦！
就說到這裡啦，vue 非常有趣，小夥伴們和我一起深入學習吧！