1. 程式人生 > >初識Vue.js資料與方法

初識Vue.js資料與方法

Vue.js:是一套構建使用者介面的漸進式框架,Vue 只關注檢視層, 採用自底向上增量開發的設計。

Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

可以通過引入來使用Vue

Vue的資料:
在html中:

 <div id="app">
        <h2>{{title}}</h2>
    </div>

在js中:

new Vue({
           el:"#app",
           data:{
               title:"HELLO THE WORLD"
           }
       })

通過new Vue建立Vue的例項,el繫結是element的選擇器,
當一個 Vue 例項被建立時,它向 Vue 的響應式系統中加入了其 data 物件中能找到的所有的屬性。
資料繫結最常見的形式就是使用 {{…}}(雙大括號)的文字插值

在這裡插入圖片描述

Vue.js方法:
當一個 Vue 例項被建立時,它向 Vue 的響應式系統中加入了其 methods 方法

methods: {
        greet: function(time){
            return 'Good ' + time + ', ' + this.name;
        }
    }



 <h1>Hey, {{ greet(time) }}</h1>

在這裡插入圖片描述
可以往methods中的函式傳入對應的引數