前端界面使用篇
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安装配置 非原创 引用于“得金”