Vue2.0学习笔记

环境搭建

　　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 ，不能更改状态   异步