一，Vue是什么

是一套構(gòu)建用戶界面的漸進(jìn)式框架。Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)。

二，特點(diǎn)

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM：

<div id="app">
  {{ message }}
<div class="v-if"  v-if="show"> </div>
<div class="v-show"  v-show="show"> </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被綁定在一起，所有的元素都是響應(yīng)式的

三，指令

條件與循環(huán)
v-if , v-show 條件，區(qū)別，v-if是顯示和刪除dom，v-show只是display:none;

v-for 遍歷循環(huán)

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學(xué)習(xí) JavaScript' },
      { text: '學(xué)習(xí) Vue' },
      { text: '整個(gè)牛項(xiàng)目' }
    ]
  }
})

綁定事件

v-on：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-bind 指令用于響應(yīng)地更新 HTML 特性 形式如：v-bind:href 縮寫為 :href;

v-on 指令用于監(jiān)聽DOM事件 形式如：v-on:click 縮寫為 @click;

v-html=""

html: "通過<b>v-html</b>方式綁定,html標(biāo)簽在渲染的時(shí)候被解析了。",

v-text=""

       text: "通過<b>v-text</b>方式綁定,html標(biāo)簽在渲染的時(shí)候被源碼輸出了。

data()
methods
components
created vue的生命周期 用來觸發(fā)事件
method用來定義方法的,比如你@click="test",methods就定義test這個(gè)方法

路由

v-router
axios

vuex

把同步操作放在mutations
異步操作放在actions

import axios from 'axios'
export default {
  name: 'projects',
  data: function () {
    return {
      projects: []
    }
  },
  methods: {
    loadProjects: function () {
      axios.get('/secured/projects').then((response) => {
        this.projects = response.data
      }, (err) => {
        console.log(err)
      })
    }
  },
  mounted: function () {
    this.loadProjects()
  }
}

根據(jù) Vuex** 文檔中的描述，Vuex 是適用于 Vue.js 應(yīng)用的狀態(tài)管理庫(kù)，為應(yīng)用中的所有組件提供集中式的狀態(tài)存儲(chǔ)與操作，保證了所有狀態(tài)以可預(yù)測(cè)的方式進(jìn)行修改。
Vuex 中 Store 的模板化定義如下：

import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { },
 actions: { },
 mutations: { },
 getters: { }, 
modules: { }
})
export default store

上述代碼中包含了定義 Vuex Store 時(shí)關(guān)鍵的 5 個(gè)屬性：

state: state 定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，同樣可以在這里設(shè)置默認(rèn)的初始狀態(tài)。

state: { projects: [], userProfile: {}}

actions:Actions 即是定義提交觸發(fā)更改信息的描述，常見的例子有從服務(wù)端獲取數(shù)據(jù)，在數(shù)據(jù)獲取完成后會(huì)調(diào)用store.commit()來調(diào)用更改 Store 中的狀態(tài)?？梢栽诮M件中使用dispatch來發(fā)出 Actions。

actions: { LOAD_PROJECT_LIST: function ({ commit }) { 

axios.get('/secured/projects').then((response) => { commit
('SET_PROJECT_LIST', { list: response.data }) }, (err) => { console.log(err) }) } }

mutations: 調(diào)用 mutations 是唯一允許更新應(yīng)用狀態(tài)的地方。

mutations: { SET_PROJECT_LIST: (state, { list }) => { state.projects = list } }

getters: Getters 允許組件從 Store 中獲取數(shù)據(jù)，譬如我們可以從 Store 中的 projectList 中篩選出已完成的項(xiàng)目列表：

getters:
{ completedProjects: state => 
{ return state.projects.filter(project => project.completed).length }}

</script>

腳手架