环境搭建
vue-cli@3 vue-cli@2.X
npm i -g @vue/cli
模板语法
文本 <span>Message: {{ msg }}</span>
原始HTML <span v-html="msghtml"></span>
特性 <div v-bind:id="dynamicId"></div>
表达式{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
指令
v-if <p v-if="seen">现在你看到我了</p>
修饰符
<form v-on:submit.prevent="onSubmit">...</form>
计算属性
模板内的表达式非常方便，但是对于复杂的逻辑，这时候使用计算属性
场景 具有依赖关系的数据监听
Class
对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
数组语法 <div v-bind:class="[activeClass, errorClass]"></div>
条件渲染
v-if <h1 v-if="awesome">Vue is awesome!</h1>
v-else
v-else-if
列表渲染
v-for <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li>
事件定义
定义
v-on <button v-on:click="counter += 1">Add 1</button>
内联处理器中的方法 <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
事件修饰符 .stop .prevent .
按键修饰符
组件
通过prop向子组件传递数据
使用事件抛出一个值 $emit
插槽 slot
具名插槽
<slot name="header"></slot>
<template slot="header"> <h1>Here might be a page title</h1> </template>
vue-router
起步
HTML
<router-view></router-view>
JS
const Foo = {template:'<div>Foo</div>'}
const routes = [{path:'/foo',component:Foo}]
const router = new VueRouter({routes})
const app = new Vue({router}).$mount('#app')
router-link
字符串 <router-link to='/foo'></router-link>
表达式 <router-link :to='{name:"user",params:{userId:123}}'></router-link>
Vuex
state 单一状态树
mutation 更改store中的唯一方法提交mutation
action 提交mutation ，不能更改状态 异步
