vue随记

　（一）使用props传值:

　　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随记

（十二）vue-cli打包上线

（十六）$nextTick

推荐阅读