vue.js學習（第一課）

學習資料 來自臺灣小凡！

vue.js是javascript的一個庫，只專一於UI層面，核心價值永遠是 API的簡潔。

第一課：

不支持IE8.

一、聲明式渲染：

el元素的簡稱 element ； el：元素名字

data放數據；

二、雙向綁定：

用到一個指令 v-model ； 指定到一個數據上，這個數據與頁面顯示就雙向綁定了。

這裏寫錯了 ，不能加等號！！！

 

這樣P標籤 就能夠隨這個input的改變而改變。

三、列表渲染

v-for 循環數據 讀取數據 渲染到標籤；

v-for=" xxx in dataXXX" {{}}

注意數據的寫法data:{裏面是數據的命名空間:[裏面是json數據 一條一條]}

四、處理函數：

new Vue({

el:"#box",

data:{

msg:'111',

},

methods:{

fnName:funxtion(){

alert(1);

}

}

})

五、綜合案例

一、外面是 vue的做用範圍 盒子。

newTodo是 data中的一個子的數據模型，todos是另外一個數據模型。

input綁定到newTodo上；keyup.enter按enter世間觸發 addtodo方法；

定義一個變量接受當前的input值：this.newTodo；

this.todo.push({text:當前值})；

二、$index當前事件的下標。

 

總結：data就是建好數據，methods調用數據。html裏用v-指令