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('')
}
}
调用时
{{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安装配置 非原创 引用于“得金”
$ 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 处理以及页面初始化处理
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初学基础 常见错误解决方式的更多相关文章
- 开发常见错误解决(6)WSE3.0未处理的WebException,未处理的Web异常,基础连接以及关闭...
开发常见错误解决(6)WSE3.0未处理的WebException,未处理的Web异常,基础连接以及关闭. 我们在调试WSE服务端服务的时候会抛出,未处理的Web异常,基础连接以及关闭的异常信息.如图 ...
- Hadoop - Mac OSX下配置和启动hadoop以及常见错误解决
0. 安装JDK 参考网上教程在OSX下安装jdk 1. 下载及安装hadoop a) 下载地址: http://hadoop.apache.org b) 配置ssh环境 在terminal里面输入: ...
- VS2012 编译程序时报无法载入PDB文件错误解决方式
VS2012 编译程序时报无法载入PDB文件错误解决方式 "ConsoleApplication1.exe"(Win32): 已载入"C:\Users\hp\Docume ...
- Hbase常见错误解决方法
Hbase常见错误解决方法 原文转载至:https://www.jianshu.com/p/5fd74812c56c 我是通过maven管理的依赖,直接修改maven依赖中hbase的版本就可以了 ...
- Spark程序运行常见错误解决方法以及优化
转载自:http://bigdata.51cto.com/art/201704/536499.htm Spark程序运行常见错误解决方法以及优化 task倾斜原因比较多,网络io,cpu,mem都有可 ...
- WCF分布式开发常见错误解决(1):An error occurred while attempting to find services at...添加服务引用出错
WCF分布式开发常见错误解决(1):An error occurred while attempting to find services at...添加服务引用出错 当我们在客户端添 ...
- PHP编译安装时常见错误解决办法,php编译常见错误
PHP编译安装时常见错误解决办法,php编译常见错误 1.configure: error: xslt-config not found. Please reinstall the libxslt & ...
- hadoop 集群常见错误解决办法
hadoop 集群常见错误解决办法 hadoop 集群常见错误解决办法: (一)启动Hadoop集群时易出现的错误: 1. 错误现象:Java.NET.NoRouteToHostException ...
- jack server 常见错误解决方法【转】
本文转载自:https://blog.csdn.net/qq_27061049/article/details/70156200 jack 服务常见错误解决方法 当你编译Android时,你不需要修改 ...
随机推荐
- Luogu P2866 [USACO06NOV]糟糕的一天Bad Hair Day
P2866 [USACO06NOV]糟糕的一天Bad Hair Day 题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a ...
- Vue ui 大法哪家强?
Element iView Vuex Mint UI Vant cube-ui,对比六大 vue ui 组件库,选中最适合的那个. Element(pc) 介绍 & 版本 饿了么前端团队开发的 ...
- IDEA git commit push revert
Revert uncommitted changes You can always undo the changes you've done locally before you have commi ...
- 洛谷 P1308 统计单词数【字符串处理】
题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...
- 该页必须使用安全性较高的Web 浏览器查看
当用https访问某个网站时,IE提醒“该页必须使用安全性较高的Web 浏览器查看” 您要访问的资源使用了128位版本的“安全套接层(SSL)” 安全保护.要查看该资源,您需要使用支持该版本的SSL浏 ...
- Java基础——基础数据类型与读入输出
首先我们写完了HelloWorld就学会了java的一种输出 System.out.println() 用起来就像是被强化过的C++的puts函数 或者就是自带endl的cout函数,中间的" ...
- [HZOI 2016]tree—增强版
[HZOI 2016]tree—增强版 注意事项 为了体现增强版,题目限制和数据范围有所增强: 时间限制:1.5s 内存限制:128MB 对于15% 的数据,1<=N,Q<=1000. 对 ...
- [bzoj1812][IOI2006]riv_多叉树转二叉树_树形dp
riv bzoj-1812 IOI-2006 题目大意:给定一棵n个点树,要求在上面建立k个收集站.点有点权,边有边权,整棵树的代价是每个点的点权乘以它和它的最近的祖先收集站的距离积的和. 注释:$1 ...
- ZooKeeper之初识
它是什么 俗称动物管理员,它使用java开发,开源,接口简单,高效,稳定的分布式系统,为其它分布式系统提供协调服务 为什么会存在? 开发分布式系统跟单机上做开发完全不同,碰到的问题完全不同,开发分布式 ...
- jq 抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...