Vue.js是一個提供 MVVM 風格的雙向數據綁定的庫。
首先下載vue.js 。地址：http://cn.vuejs.org/
相關命令:
a、npm install vue 安裝vue版本
b、npm install -g vue-cli 全局安裝vue-cli
c、vue init webpack project 創建一個基於“webpack”模板新項目(project爲項目名)
d、cd project
npm install
npm run dev 安裝依賴
Vue.js使用的相關步驟
a、調用vue.extend()方法創建組件構造器
eg: var my = Vue.extend({
template:'<div>Hello!!!!!!!</div>'
})
其中template是定義組件要渲染的HTML
b、調用Vue.component()方法註冊組件
eg: Vue.component('my',my)
其中第一個my是組件標籤，作用類似html,body等標籤，第二個my是組件構造器
c、在Vue實例的作用範圍內使用組件
ps:以上註冊的組件爲全局註冊，將組件註冊到實例下爲局部註冊，用components
eg:new Vue({
el:'#app',
components : {
'my' : my
}
)}
父組件和子組件步驟
a、定義一個子組件構造器eg: var Child = Vue.extend({.....})
b、定義一個父構造器，並將子組件寫入父構造器
eg： var Parent = Vue.extend({
template: 'XXXXXX<child></child>',
components: {
'child',Child
}
})
c、全局註冊Parent組件
eg: Vue.component('parent',Parent)
d、在頁面中渲染父組件
使用<script>標籤
<script type="text/x-template" id = "lalala">
<div>xxxxx</div>
</script>
然後在註冊的組件中template部分寫成
Vue.component('my',{
template:‘#lalala’
})
PS:也可以使用<template>標籤，與script標籤類似，但是不用指定type屬性
數據綁定
a、<props>默認單向綁定，即父影響子，子不影響父
eg: <child v-bind : 子組件prop（當props中名字myName時，此時用“-”將兩個單詞分開，即my-name，不區分大小寫）=“父組件數據屬性”></child>
想用父組件的數據，必須在子組件中定義props屬性。
b、.sync雙向綁定
eg: <child v-bind : my-name.sync="name"></child>
c、.once單次綁定，即父不影響子，子不影響父