一揽思，Vue是什么
是一套構(gòu)建用戶界面的漸進式框架。Vue 采用自底向上增量開發(fā)的設(shè)計质和。Vue 的核心庫只關(guān)注視圖層寓辱，它不僅易于上手，還便于與第三方庫或既有項目整合太示。另一方面镀钓，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時病毡，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動啦扬。
二中狂，特點
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 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: '整個牛項目' }
]
}
})
綁定事件
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)簽在渲染的時候被解析了勋又。",
v-text=""
text: "通過<b>v-text</b>方式綁定,html標(biāo)簽在渲染的時候被源碼輸出了。
data()
methods
components
created vue的生命周期 用來觸發(fā)事件
method用來定義方法的,比如你@click="test",methods就定義test這個方法
路由
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)管理庫楔壤，為應(yīng)用中的所有組件提供集中式的狀態(tài)存儲與操作，保證了所有狀態(tài)以可預(yù)測的方式進行修改惯驼。
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 時關(guān)鍵的 5 個屬性：
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ù)獲取完成后會調(diào)用store.commit()來調(diào)用更改 Store 中的狀態(tài)∑＞欤可以在組件中使用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 中篩選出已完成的項目列表：
getters:
{ completedProjects: state =>
{ return state.projects.filter(project => project.completed).length }}
</script>
