Vue.js 前端框架學習筆記

介紹一下Vue：

        Vue.js是一套構建用戶界面的漸進式JavaScript框架，它是以數據驅動和組件化的思想構建的，與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠爲複雜的單頁應用程序提供驅動。

Vue的特點：     

1. vue.js屬於輕量級的框架；
   
2. vue.js的數據時雙向綁定的；
   
3. vue.js中指令和組件分得更清晰；
   
4. vue.js能夠異步批量DOM更新；
   
5. vue.js具有可擴展性，讓用戶可以在多個組件中複用共同的特性。

用法如下：

首先把Vue.js用<script>標籤引入  官網下載地址：https://vuejs.org/js/vue.min.js

每一個Vue都需要通過實例化來實現，語法如下：

 <script src="https://npmcdn.com/vue/dist/vue.js">

           var vm = new Vue({
            el: '#app',

            data: {

                message: 'Hello Vue.js!'
                    }
})

</script>

<div id="app">

      <h1>message: : {{message:}}</h1>

</div>

在Vue構造器中有一個el參數，它是DOM中的id，我的理解是把數據綁定到模型上

data 是用來定義屬性的   這裏的message就是屬性

也可以這樣寫 多個屬性用 ，隔開

<script src="https://npmcdn.com/vue/dist/vue.js">

        data = {message ："Hello Vue.js"} 

          var vm =  new Vue({

            el: '#app',

            data: data

})

</script>

在頁面中可以看到Hello Vue.js      效果如下：

當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，html 視圖將也會產生相應的變化。