vue vuex初学基础 常见错误解决方式

前端界面使用篇

vue生命周期初始化事件

http://www.cnblogs.com/lily1010/p/5830946.html

 

常见错误篇

1 Newline required at end of file but not found

提示少一个文件结尾 在文件最后面敲一个“回车”即可解决。

网上错误集锦 来源转发 发帖人未查找到

http://www.tuicool.com/articles/7nYnIba

 

vue中提供的变异方法 仅仅是给出列方法名称使用方法和用处没有讲解，不过可以参照html的array数组操作方式

基本方法操作效果一致

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
参照 http://www.w3school.com.cn/jsref/jsref_obj_array.asp

splice()可用于修改例如array.splice(0,1,newitem) 从什么位置，删除几个元素，最后一个是新的元素用于顶替刚删除的元素用于
实现更新效果

技巧方法篇
1.初始化表单数据
方法1:封装在方法中 使用时调用即可

function init () {
　for(var name in this.$data.form) {
    this.$data.form[name] = "" }

this.name = ''
}

方法2:

new Vue({
    el: '#app',
    data() {
        return {
            value1: "", value2: "我是預設值", value3: "", value4: "我也是", value5: "",
　　　　　　　form: {} } }, created() { this.defaultData = JSON.parse(JSON.stringify(this.$data)); }, methods: { submit() { // 送出後 this.$data = Object.assign(this.$data, this.defaultData); } } })
局部初始化是 不需要$符号 直接使用数据字段就好例如 this.form

注意点篇

计算属性 computed
用于将属性进行复杂化逻辑处理的时候 从Mustache语法中独立处理，Mustache尽量用来数据展示不做

逻辑处理例如：

Reversed message: "{{message.split('').reverse().join('') }}"

改为

computed: {

    // a computed getter

    reversedMessage: function () {

      // `this` points to the vm instance

      return this.message.split('').reverse().join('')

    }

  }

调用时

{{reversedMessage}}

方法 method 与computed基本相同

methods: {

    // a computed getter

    reversedMessage: function () {

      // `this` points to the vm instance

      return this.message.split('').reverse().join('')

    }

  }

调用时

{{reversedMessage()}}

以上个属性都能达到所需的效果，唯一区别是

computed当属性不产生变化时不会变更，每次都是读取缓存当中的值

而method每次使用时都会运行一次，时时刷新。

 

watches 观察属性

此属性与computed效果类似 常用语属性发生变更时
同时对属性进行大量逻辑或执行异步及延迟处理时使用

当指定监控的属性发生变化时则会出发观察属性进行数据处理。

var watchExampleVM = new Vue({

  el: '#watch-example',

  data: {

    question: '',

    answer: 'I cannot give you an answer until you ask a question!'

  },

  watch: {

    // 如果 question 发生改变，这个函数就会运行

    question: function (newQuestion) {

      this.answer = 'Waiting for you to stop typing...'

      this.getAnswer()

    }

  }

}）

 

常用方法集锦

vue数据操作

http://www.cnblogs.com/lily1010/p/5830946.html 

 

安装篇

vue安装配置 非原创 引用于“得金”

vue
          
$ npm install -g vue-cli
$ vue init webpack my-project $ cd my-project
$ npm install
$ npm run dev


vue 基础 http://cn.vuejs.org/v2/guide/installation.html
vue 状态管理 http://vuex.vuejs.org/en/    源码 https://github.com/vuejs/vuex
vux 中文路径  https://vuxjs.gitbooks.io/vux/content/
vue 路由 http://router.vuejs.org/zh-cn/
vue 网路请求 https://github.com/mzabriskie/axios
editorconfig     配置你的编辑器  http://www.cnblogs.com/xiyangbaixue/p/4201490.html

 
  例子
网站插件使用  https://wappalyzer.com/download
项目结构介绍  http://hyuhan.com/2016/12/20/vue-cli-2-0/
easy-vue http://tigerb.github.io/easy-vue/#/
echarts 数据化可是平台展示  https://github.com/hieeyh/tong2-family    
笔记应用 https://segmentfault.com/a/1190000005015164

1 data  //vue  对象数据 
2 methods  //vue  对象方法 
3 watch  //  vue对象监听方法   
4 computed  //  计算机逻辑放到    computed
5 created  //    属性已绑定  dom未生成  一般在这里进行ajax 处理以及页面初始化处理          

 

bootstrap 样式 https://github.com/yuche/vue-strap
Keen-UI https://github.com/JosephusPaye/Keen-UI
N3 https://github.com/N3-components/N3-components
饿了么 https://github.com/ElemeFE/element
https://github.com/vue-bulma/vue-admin

 

转载于:https://www.cnblogs.com/HelloXZ/p/6248604.html