(一)使用props传值:

  <HeadTitle name-data="100"></HeadTitle>

  props:['nameData']

  父组件传递复合名称数据时使用小写和中划线(-) 组合,子组件接收复合名称数据时使用小驼峰。

 (二)路由去 “#”

  路由配置:

  mode:'history'

 (三)路由跳转后回到页面的顶部

  路由配置:
  scrollBehavior () {
  return { x: 0, y: 0 }
  }

 (四)重定向

    ‘重定向’指,用户访问 '/a' 路径时,url会被替换成 '/b' 。

    {  
       path:'/a',
      redirect:'/b'
    }

    重定向至某个子路由:
    
    {  
       path:'/list',
       name:'list'
      children:[
        {
          path:'/list',
          redirect:'aa',
        },
        {
          path:'aa',
          name:'a',
          component:A
        },
        {
          path:'bb',
          name:'b',
          component:B
        }
      ]

    }



(五)watch监控复合数据下面的某个属性

  data(){
    return{
      opt:{
        a:1,
        b:'abc'
      }
  }
  }
  watch:{
    "opt.b"(){
      // code
    },
    
    "$route"(){
      // 路由监控
    }
  }

(六)watch深层监控
  watch:{
    name:{
      handler(){
        // code
      },
      deep:true
    }
  }
(七)vue兼容IE
  因为Vue使用了ES6 Promise,而IE浏览器不支持,解决方法是: 使用babel-polyfill转换 
  
    $ npm install --save-dev babel-polyfill

  如果使用vue-cli项目,在build/webpack.base.js中添加:

    require('babel-polyfill');

    entry: { app: ['babel-polyfill','./src/main.js'] },

 (八)watch的简便写法  

  组件创建的时获取一次列表,同时监听data中数据变化,每当发生变化的时候重新获取一次筛选后的列表。

  常规写法:

  data(){  // data

    return{

      list:[1,2,3]

    }

   },

  methods:{

    editList(){  // 定义对list数据处理的方法。

      // 编辑list

    }

  },

  created(){  // 组件创建时处理list数据

    this.editList();

  },

  watch:{

    list:{  // 监控list变化重新编辑一次处理list

      handler(){

        this.editList();

      }

    }

  }

  优化写法:

  

data(){  // data

    return{

      list:[1,2,3]

    }

   },

  methods:{

    editList(){  

      // 编辑list

    }

  },

  watch:{

    list:{  // 首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

      handler:"editList",  // 直接使用函数的字面量名称

      immediate:true  // 表示创建组件时立马执行一次,即:created时期执行一次

    }

  }

(九)页面加载完成立即执行事件

  data(){

    list:[]

  },

  watch:{

    "list"(){

      this.$nextTick(){

        // DOM更新完成,执行事件

      }

    }

  }

 (十)set / delete

  1、对vue中复合数据 [ Array || Object ] 的设置做到响应使用vue内置方法set

    this.$set(目标数据,键名,键值) / Vue.set(目标数据,键名,键值);

    键名存在就修改,不存在就添加。

  2、删除vue中复合数据中的某个值

    Vue.delete(目标数据,健名) / this.$delete(目标数据,健名) ;

 (十一)v-cloak vue隐藏元素直至当前实例准备完成才编译

    这个指令保持在元素上直到关联实例结束编译。需配合CSS使用

    css:  

    [v-cloak] {
    display: none;
    }
  
    template
    <div v-cloak>
    {{ message }}
    </div>
    <!--当前div内对vue的编译会等到实例准备完成后开始-->

(十二)vue-cli打包上线

  (1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全起见,可以写入app.vue中);
 
  (2).在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到 build:{assetsPublicPath: './'} ,默认路径是 '/' ,需要加上 '.' 
 

(十三)路由别名

    ‘别名’指,用户访问 '/b' 路径时,url依旧是 '/b' ,但匹配到的视图是 '/a'  路由的匹配视图,如同访问 '/a' 路由一样。

  {  
     path:'/a',
    alias:'/b'
  }

(十四)数据还原状态

    1、初始化时设置的数据:

    data(){

      num:1,

      list:[],

      opt:{}

    }

    2、经过处理后数据 this.num,this.list,this.opt 状态

    3、使用初始化状态的数据

      可使用 this.$options.data() 拿到最初的状态。

      示例:  Object.assign( this.form , this.$options.data().form );
 (十五)在vue-cli项目中使用markdown编辑器:Vue-SimpleMDE

    1、npm install vue-simplemde --save
    2、// 全局引用
      import Vue from 'vue'
      import VueSimplemde from 'vue-simplemde'
      Vue.use(VueSimplemde)
    3、// 单个组件内引用

      import markdownEditor from 'vue-simplemde/src/markdown-editor'
 
      export default {
        components: {
          markdownEditor
        }
      }
    4、  <template>
        <!-- 通过 v-model 控制 value -->
        <markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
      </template>

(十六)$nextTick

  1、$nextTick(() => {}) 与DOM相关操作写在该函数回调中,确保DOM已渲染。

  2、在created()钩子函数进行DOM操作一定要放在Vue.nextTick()的回调函数中。(原因:在created()执行时DOM 其实并未进行任何渲染,此时进行DOM操作是获取不到DOM元素,所以一定要将DOM操作的代码放进Vue.nextTick()的回调函数中,确保此时DOM已渲染。)

  

   

vue随记的更多相关文章

  1. Vue折腾记 - (3)写一个不大靠谱的typeahead组件

    Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...

  2. Vue折腾记 - (2)写一个不大靠谱的面包屑组件

    先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...

  3. vue项目中路由验证和相应拦截的使用

    详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

  4. WEB前端学习资源清单

    常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 <JavaScript 闯关记> JavaS ...

  5. [转] WEB前端学习资源清单

    常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 <JavaScript 闯关记> JavaS ...

  6. Javascript的学习清单

    Javascript的学习清单 Javascript学习资源 程序员必读书籍 深入理解JavaScript系列 es6教程 jQuery中文文档 vue官网 zeptojs中文版 常用的插件与UI组件 ...

  7. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  8. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  9. Vue 脱坑记

    问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...

随机推荐

  1. Android:Camera2的简单使用

    以前用的是Camera,但是现在Camera已经被官方弃用了,所以这里使用的是Camera2进行演示 使用Camera需要注意的就是权限的获取,必须有权限 类图介绍 Camera2跟Camera1不一 ...

  2. Linux搭建VNC servere服务

    此安装方法只适用于centos7以上的版本 一,安装 以root用户运行以下命令来安装vncserver; yum install tigervnc-server  同样运行以下命令来安装vncvie ...

  3. VMware 启动虚拟机黑屏(Ubuntu)

    之前启动都很正常,不知道为啥,最近启动,老出现这种黑屏得情况: 解决方法: 在搜索栏里搜索cmd 巴拉了一下谷歌,发现了问题: 虚拟机和主机之间的通信,基本上是以 socket 的方式进行通信的(这里 ...

  4. C# 调用DOS 命令

    class NetWorkDeviceInfo { public static string GetDeviceInfo() { System.Diagnostics.Process p = new  ...

  5. 【springcloud】springcloud与springboot的版本对应关系

    官方网址:https://start.spring.io/actuator/info 更新时间:2019-12-01 spring-cloud: "Finchley.M2": &q ...

  6. 一 MongoDB入门

    一.MongoDB概念解析(对比MySQL学习): 举个例子: MongoDB可视化操作工具:推荐Robomongo 二.MongoDB默认的概念: 1.MongoDB的单个实例可以容纳多个独立的数据 ...

  7. spring加载Bean的解析过程(二)

    1.例如: BeanFactory bf = new XmlBeanFactory(new ClassPathResource("spring.xml")); User user ...

  8. mzy,struts学习(一)

    大家都在讲struts已经过时了,现在都是前后台分离,没有必要去学一个淘汰的框架,但是怎么讲呢?我觉得,struts能够流行那么多年,肯定有它的原因,肯定有很多优秀和好的地方,有一个指导过我的人给我讲 ...

  9. 分享几个下载豆瓣资源的chrome插件

    最近chrome终于以4.69%的市场占有率击败firefox成为中国第二大浏览器.(第一当然是争霸宇宙的IE了) 虽然chrome官方应用程序商店有不少豆瓣的辅助插件,但大多没什么用.属于蛋疼插件. ...

  10. JAVA 之 每日一记 之 算法( 给定一个正整数,返回它在 Excel 表中相对应的列名称。 )

    题目: 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如: 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -& ...