一，Vue是什么
是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
二，特点
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 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!'
}
})
现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的
三，指令
条件与循环
v-if , v-show 条件，区别，v-if是显示和删除dom，v-show只是display:none;
v-for 遍历循环
<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: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
绑定事件
v-on：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</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 指令用于响应地更新 HTML 特性 形式如：v-bind:href 缩写为 :href;
v-on 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click;
v-html=""
html: "通过<b>v-html</b>方式绑定,html标签在渲染的时候被解析了。",
v-text=""
text: "通过<b>v-text</b>方式绑定,html标签在渲染的时候被源码输出了。
data()
methods
components
created vue的生命周期 用来触发事件
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()
}
}
根据 Vuex** 文档中的描述，Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。
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 时关键的 5 个属性：
state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。
state: { projects: [], userProfile: {}}
actions:Actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 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: 调用 mutations 是唯一允许更新应用状态的地方。
mutations: { SET_PROJECT_LIST: (state, { list }) => { state.projects = list } }
getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从 Store 中的 projectList 中筛选出已完成的项目列表：
getters:
{ completedProjects: state =>
{ return state.projects.filter(project => project.completed).length }}
</script>
