vue.js

[uniquejava]

vue-cli建的项目如何升级vue的版本.

在项目目录里运行 npm upgrade vue vue-template-compiler，不出意外的话，可以正常运行和 build。如果有任何问题，删除 node_modules 文件夹然后重新运行 npm i 即可。

.sync modifer

https://alligator.io/vuejs/upgrading-vue-2.3/
.sync相当于input版本的v-model, 适用于非input组件.
:prop.sync=”binding” 会被展开为 :prop=”binding” @update:prop=”value => binding = value”
但你依然无法在child组件中直接修改parent传过来的属性, 但可以通过`$emit('update:prop', 'some value')的方式去修改父组件传过来的prop.

例子

<my-component :prop.sync="binding"></my-component>

<template>
  <p @click="updateProp"></p>
</template>

<script>
export default {
  props: {
    prop: String
  },

  methods: {
    updateProp() {
      this.$emit('update:prop', this.prop + ' Updated!')
    }
  }
}
</script>

再来一例

<template>
  <doggie :size.sync="size" />
</template>
<script>
  export default {
    data: {
      size: 'little'
    }
  }
</script>

<template>
  <input :value="size" @input="$emit('update:size', $event.target.value)" />
</template>
export default {
  props: ['size'],
}

嵌套的.sync

最外层(App.vue)

<my-dialog :visible.sync="myDialogVisible"
  @ok="myDialogVisible=false"
  @close="myDialogVisible=false"></my-dialog>

子(MyDialog.vue):
在MyDialog的el-dialog上不能使用:visibile.sync这是因为在点el-dialog的关闭按钮时, 如果加了.sync那么el-dialog会兼听 update:visible事件, 尝试修改my-dialog中的props: ['visible'], 而props是不能直接修改的, 这时可以去掉.sync然后在close回调中手动向最外层emit一个update事件, 如下(加一个@close)

<template>
<el-dialog title="Resource Deployment" :visible="visible" :show-close="true" @open="onOpen" @close="$emit('update:visible', false)"
</template>
<script>
  export default {
    name: "ResourceDeployer",
    props: {
      visible: {type: Boolean},
    },
    methods: {
      cancel(){
        this.$emit('close'); 
      }
    }
</script>

或者, 将:show-close设置为false. 用户只能通过点击cancel按钮来关闭窗口.

xxxx

https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c

How to build your first Vue.js component

Vue’s new and improved prop.sync

// 定义
var CustomComponent = Vue.extend({...}) 

// 注册component
Vue.component("component-1", CustomComponent)

// 使用
<component-1 />

References

https://juejin.im/post/59097cd7a22b9d0065fb61d2

[uniquejava]

router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Login from '@/components/Login';
import SignUp from '@/components/SignUp';

Vue.use(Router);

let router = new Router({
  // 数组中的每一个配置项为一个route record
  routes: [
    // 所有找不到的路径
    {
      path: '*',
      redirect: '/login'
    },

    // 首页
    {
      path: '/',
      redirect: '/login'
    },

    // 受保护的页面
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/sign-up',
      name: 'SignUp',
      component: SignUp
    }
  ]
});

// Navigation Guards
router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser;
   // route record可以嵌套， 所以route.matched返回的是一个数组
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    next('login');
  } else if (!requiresAuth && currentUser) {
    next('hello');
  } else {
    next();
  }

});

export default router;

[uniquejava]

问题

1. 组件内动态生成的其它组件, 需要把.el-table th的样式写到全局的css文件中, 见: https://segmentfault.com/q/1010000012899907?sort=created
2. 不能监测数组内部元素的变化, 解决方案一可以重新给这个数组赋值
3. 给组件添加事件需要加上.native修饰符, 如: <el-input type="textarea" v-model="xx" @keyup.ctrl.enter.native="go"></el-input>

设置背景图的最佳实践

https://github.com/vuejs/vue-loader/issues/646

按钮背景图: fontawesome和美工给的两种版本, 如下使用:

<el-button size="mini" title="Import" type="success" @click="handleImport()">
  <img :src="require('@/assets/import.png')" alt="import">
</el-button>
<el-button size="mini" title="Save all" type="success" @click="saveAllFields">
  <img :src="`${require('@/assets/xxx.png')}`" alt="import">
</el-button>
<el-button size="mini" title="Undo" type="success" @click="undo()" >
  <icon name="undo"/>
</el-button>

动态引入图片

此处product.image_url实际值比如为: images/xxx.jpg, 它的位置在src/assets/imags/xxx.jpg

来源: https://github.com/vuejs-templates/webpack/issues/450

[uniquejava]

dnd

https://hejx.herokuapp.com/vue-dndl/#!/
https://juejin.im/entry/58ddbd10da2f60005fbcc0f7
https://github.com/ElemeFE/element/issues/3543 (同时要给el-table加上row-key属性,不然拖拽会出现错误)

富文本编辑器

https://zhuanlan.zhihu.com/p/43416702

集成lodash

最简单的方案:

import _ from 'lodash';
Vue.set(Vue.prototype, '_', _);

另lodash中的_.pluck在4.x中重命名成了_.map

详见: https://stackoverflow.com/questions/37694243/using-lodash-in-all-of-vue-component-template

[uniquejava]

动态设定axios的baseURL

使用webpack的DefinePlugin
https://forum.vuejs.org/t/vue-webpack-environment-config-webpack-defineplugin/4452

watch $props change all at once

来自: How to watch prop change in Vue.js component?

<template>
  <div>
    {{count}}</div>
</template>

<script>
export default {
  name: 'test',
  props: ['count'],
  watch: {
    '$props':{
      handler: function (val, oldVal) { 
        console.log('watch', val)
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.count)
  }
}
</script>