vue使用中的遇到的问题

vue项目文件作用

├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据（state）
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

问题1，注册的时候报这个错误

1.png

测试得出，当输出的用户名是已经存在自己的leancloud的时候就会报这个错误哦

问题2模块通讯

父--->子 props
子-->父 $emit('事件名',变量值)
全局 A- source.$emit('事件名'，某数据)
B source.$on('事件名'，（某数据）=>{
处理方式
})
A B 均要引入source模块

问题3：当页面刷新的时候，created会重新调用一次的，存在data（）里面的数据也会初始化

问题4：vue中computed、watch、methods的区别：

computed与methods

computed是计算属性，methods是方法。
html：
<p>Reversed
 message: "{{ reversedMessage() }}"</p>
js：
1.
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')//依赖（this.message）发生改变，计算属性就会发生改变：reversedMessage，自动的
    }
  }
})
2.
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')//调用该方法，计算该属性，不论该依赖是否发生改变
  }
}
})

computed和watch

watch 属性。
当你有一些数据需要随着其它数据变动而变动时computed 属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName//当firstname改变的时候，回调一个函数，这个函数返回的是this.fullname的值
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

5、v-el的改动

简单起见，v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样：ref="myElement"，v-ref:my-component 变成了这样：ref="myComponent"。绑定在一般元素上时，ref 指 DOM 元素，绑定在组件上时，ref 为一组件实例。
因为 v-ref 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和v-for 结合的时候是很有用的：

$nextTick()

Vue.nextTick( [callback, context] )
参数：
{Function} [callback]

{Object} [context]

用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

vuex值异步获取的问题