博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue vuex初学基础 常见错误解决方式
阅读量:6677 次
发布时间:2019-06-25

本文共 2498 字,大约阅读时间需要 8 分钟。

前端界面使用篇

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安装配置 非原创 引用于“得金”

vue
          
$ npm install -g vue-cli
$ vue init webpack my-project $ cd my-project
$ npm install
$ npm run dev
vue 基础
vue 状态管理     源码
vux 中文路径 
vue 路由
vue 网路请求
editorconfig     配置你的编辑器 
 
  例子
网站插件使用 
项目结构介绍 
easy-vue
echarts 数据化可是平台展示     
笔记应用
1 data  //vue  对象数据 
2 methods  //vue  对象方法 
3 watch  //  vue对象监听方法   
4 computed  //  计算机逻辑放到    computed
5 created  //    属性已绑定  dom未生成  一般在这里进行ajax 处理以及页面初始化处理          
 
bootstrap 样式
Keen-UI
N3
饿了么

 

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

你可能感兴趣的文章
Android代码重构总结
查看>>
实用技巧:教你如何在没有网络的Linux机器上快速安装软件
查看>>
JMS消息的概念解释-stomp
查看>>
java引用类型
查看>>
模块、包
查看>>
Jenkins + nodejs编译打包nodejs应用
查看>>
手动新增swap空间
查看>>
PHP 简单留言板
查看>>
朱先生与Python恋爱日记(一、 初识 )
查看>>
Linux常用命令(五)
查看>>
linux学习笔记——yum安装软件、搭建仓库、rpm命令
查看>>
决心书
查看>>
短小、精悍的日志输入接口:slf4j
查看>>
Linux cp命令总结
查看>>
升级Centos6到Centos7错误记录
查看>>
调用淘宝API时常见问题的解决方案
查看>>
Mysql常用主从复制架构以及MHA高可用的主从复制的实现
查看>>
程序员的职业素养:向世界宣告“我是专业人士”
查看>>
dedecms小助手使用方法
查看>>
专访肖佳:写一本技术图书是水到渠成的
查看>>