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尽量用来数据展示不做

逻辑处理例如：

<p>Reversed message: "{{message.split('').reverse().join('') }}"</p>

改为

computed: {

// a computed getter

reversedMessage: function () {

// `this` points to the vm instance

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

}

调用时

方法 method 与computed基本相同

methods: {

// a computed getter

reversedMessage: function () {

// `this` points to the vm instance

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

}

调用时

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

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

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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