Vue培训文档

1. nodejs安装

2. 安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. vue脚手架安装

cnpm install -g vue-cli

4. 创建一个vue项目

vue create myproject -r https://registry.npm.taobao.org 淘宝镜像快速创建
myproject 自己定义的项目名
npm run serve 运行

5. 安装iview or Elementui

6.监听事件

v-on:click 缩写为 :click，:click="fun()"调用函数，可以绑定任意的名字，如:data,:href,:src

7.条件语句

v-if v-if=“name”

8.循环语句

v-for

9.属性绑定

v-bind:href

10.双向绑定

v-modal

11.组件

components

**12.Vuex **
store.js 类似于一个页面中的data ，state是变量，mutations是方法 其中两个参数state，payload分别是state实例，传进来的参数，是一个对象

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    AMsg: "",
    BMsg: ""
  },
  mutations: {
    receiveAMsg(state,payload){
      state.Amsg = payload.Amsg;
    },
    receiveBMsg(state,payload){
      console.log(payload); // 传入的参数
      state.BMsg = payload.BMsg;
      console.log(state); // 就是上面的state
    }
  },
  actions: {

  }
})

调用其中的receiveBMsg，其中payload是第二个参数

      this.$store.commit("receiveBMsg", {
        BMsg: this.BMessage
      });

在其他页面监听这个值的改变，使用this.store.state.xxx 返回值

  computed: {
    // couputed也是类似于watch的监听，数据改变会自动检测，但不能声明变量，watch需要声明
    AMessage() {
      console.log(this.$store.state);
      return this.$store.state.BMsg;
    }
  },

$attrs 可以在子组件中获取到由父组件传来的值

学习资料
教程注意：为什么无法new Vue
vue官方文档
vue新手入门文档