Vue 开发必须知道的36个技巧(小结)

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
 const name = path.basename(key, '.vue')
 modules[name] = files(key).default || files(key)
})
components:modules

created(){
 this.getList()
},
watch: {
 inpVal(){
 this.getList()
 }
}

watch: {
 inpVal:{
 handler: 'getList',
  immediate: true
 }
}

watch:{
 inpValObj:{
 handler(oldVal,newVal){
  console.log(oldVal)
  console.log(newVal)
 },
 deep:true
 }
}

// 数组:不建议使用
props:[]

// 对象
props:{
 type:Number, //传入值限定类型
 // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
 // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
 required: true, //是否必传
 default:200, //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
 validator:(value) {
 // 这个值必须匹配下列字符串中的一个
 return ['success', 'warning', 'danger'].indexOf(value) !== -1
 }
}

// 父组件
<home @title="title">
// 子组件
this.$emit('title',[{title:'这是title'}])

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
 console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

props: {
 width: {
 type: String,
 default: ''
 }
},
mounted() {
 console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
},

// 父组件
<home @change="change"/>

// 子组件
mounted() {
 console.log(this.$listeners) //即可拿到 change 事件
}

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
 console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

inheritAttrs默认值为 true,也就是父组件上的属性会显示到根组件上
如果设置为 false 就会隐藏

//父组件:
provide: { //provide 是一个对象,提供一个属性或方法
 foo: '这是 foo',
 fooMethod:()=>{
 console.log('父组件 fooMethod 被调用')
 }
},

// 子或者孙子组件
inject: ['foo','fooMethod'], //数组或者对象,注入到子组件
mounted() {
 this.fooMethod()
 console.log(this.foo)
}
//在父组件下面所有的子组件都可以利用inject

//父组件:
provide: { 
 foo: '这是 foo'
},
mounted(){
 this.foo='这是新的 foo'
}

// 子或者孙子组件
inject: ['foo'], 
mounted() {
 console.log(this.foo) //子组件打印的还是'这是 foo'
}

//父组件
mounted(){
 console.log(this.$children) 
 //可以拿到 一级子组件的属性和方法
 //所以就可以直接改变 data,或者调用 methods 方法
}

//子组件
mounted(){
 console.log(this.$parent) //可以拿到 parent 的属性和方法
}

// 父组件
<home ref="home"/>

mounted(){
 console.log(this.$refs.home) //即可拿到子组件的实例,就可以直接操作 data 和 methods
}

// 父组件
mounted(){
 console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
 console.log(this.$root.$children[0]) //获取根实例的一级子组件
 console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

// 父组件
<home :title.sync="title" />
//编译时会被扩展为
<home :title="title" @update:title="val => title = val"/>

// 子组件
// 所以子组件可以通过$emit 触发 update 方法改变
mounted(){
 this.$emit("update:title", '这是新的title')
}

// 父组件
<todo-list> 
 <template v-slot:default>
  任意内容
  <p>我是匿名插槽 </p>
 </template>
</todo-list> 

// 子组件
<slot>我是默认值</slot>
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

// 父组件
<todo-list> 
 <template v-slot:todo>
  任意内容
  <p>我是匿名插槽 </p>
 </template>
</todo-list> 

//子组件
<slot name="todo">我是默认值</slot>

// 父组件
<todo-list>
 <template v-slot:todo="slotProps" >
 {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

// 子组件
<slot name="todo" :user="user" :test="test">
 {{ user.lastName }}
 </slot> 
data() {
 return {
  user:{
  lastName:"Zhang",
  firstName:"yue"
  },
  test:[1,2,3,4]
 }
 },
// {{ user.lastName }}是默认数据 v-slot:todo 当父页面没有(="slotProps")

// 在 main.js
Vue.prototype.$eventBus=new Vue()

// 传值组件
this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')

// 接收组件
this.$eventBus.$on("eventTarget",v=>{
 console.log('eventTarget',v);//这是eventTarget传过来的值
})

function broadcast(componentName, eventName, params) {
 this.$children.forEach(child => {
 var name = child.$options.componentName;

 if (name === componentName) {
  child.$emit.apply(child, [eventName].concat(params));
 } else {
  broadcast.apply(child, [componentName, eventName].concat(params));
 }
 });
}
export default {
 methods: {
 dispatch(componentName, eventName, params) {
  var parent = this.$parent;
  var name = parent.$options.componentName;
  while (parent && (!name || name !== componentName)) {
  parent = parent.$parent;

  if (parent) {
   name = parent.$options.componentName;
  }
  }
  if (parent) {
  parent.$emit.apply(parent, [eventName].concat(params));
  }
 },
 broadcast(componentName, eventName, params) {
  broadcast.call(this, componentName, eventName, params);
 }
 }
}

// 路由定义
{
 path: '/describe/:id',
 name: 'Describe',
 component: Describe
}
// 页面传参
this.$router.push({
 path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

// 路由定义
{
 path: '/describe',
 name: 'Describe',
 omponent: Describe
}
// 页面传参
this.$router.push({
 name: 'Describe',
 params: {
 id: id
 }
})
// 页面获取
this.$route.params.id

// 路由定义
{
 path: '/describe',
 name: 'Describe',
 component: Describe
}
// 页面传参
this.$router.push({
 path: '/describe',
 query: {
  id: id
 `}
)
// 页面获取
this.$route.query.id

// 文件路径 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable({ count: 0 })
export const mutations = {
 setCount (count) {
 store.count = count
 }
}

//使用
<template>
 <div>
  <label for="bookNum">数 量</label>
   <button @click="setCount(count+1)">+</button>
   <span>{{count}}</span>
   <button @click="setCount(count-1)">-</button>
 </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
 name: 'Add',
 computed: {
 count () {
  return store.count
 }
 },
 methods: {
 setCount: mutations.setCount
 }
}
</script>

// 根据 props 生成标签
// 初级
<template>
 <div>
 <div v-if="level === 1"> <slot></slot> </div>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </div>
</template>

// 优化版,利用 render 函数减小了代码重复率
<template>
 <div>
 <child :level="level">Hello world!</child>
 </div>
</template>

<script type='text/javascript'>
 import Vue from 'vue'
 Vue.component('child', {
 render(h) {
  const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]
  return h(tag, this.$slots.default)
 },
 props: {
  level: { type: Number, required: true } 
 }
 }) 
 export default {
 name: 'hehe',
 data() { return { level: 3 } }
 }
</script>

// 工厂函数执行 resolve 回调
Vue.component('async-webpack-example', function (resolve) {
 // 这个特殊的 `require` 语法将会告诉 webpack
 // 自动将你的构建代码切割成多个包, 这些包
 // 会通过 Ajax 请求加载
 require(['./my-async-component'], resolve)
})

// 工厂函数返回 Promise
Vue.component(
 'async-webpack-example',
 // 这个 `import` 函数会返回一个 `Promise` 对象。
 () => import('./my-async-component')
)

// 工厂函数返回一个配置化组件对象
const AsyncComponent = () => ({
 // 需要加载的组件 (应该是一个 `Promise` 对象)
 component: import('./MyComponent.vue'),
 // 异步组件加载时使用的组件
 loading: LoadingComponent,
 // 加载失败时使用的组件
 error: ErrorComponent,
 // 展示加载时组件的延时时间。默认值是 200 (毫秒)
 delay: 200,
 // 如果提供了超时时间且组件加载也超时了，
 // 则使用加载失败时使用的组件。默认值是：`Infinity`
 timeout: 3000
})

webpack< 2.4 时
{
 path:'/',
 name:'home',
 components:resolve=>require(['@/components/home'],resolve)
}

webpack> 2.4 时
{
 path:'/',
 name:'home',
 components:()=>import('@/components/home')
}

<component v-bind:is="currentTabComponent"></component>

<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<transition>
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>

// 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
// 设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
// 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
// 组件递归用来开发一些具体有未知层级关系的独立组件。比如：
// 联级选择器和树形控件 

<template>
 <div v-for="(item,index) in treeArr">
  子组件，当前层级值： {{index}} <br/>
  <!-- 递归调用自身, 后台判断是否不存在改值 -->
  <tree :item="item.arr" v-if="item.flag"></tree>
 </div>
</template>
<script>
export default {
 // 必须定义name，组件内部才能递归调用
 name: 'tree',
 data(){
 return {}
 },
 // 接收外部传入的值
 props: {
  item: {
  type:Array,
  default: ()=>[]
 }
 }
}
</script>

<template functional>
 <div v-for="(item,index) in props.arr">{{item}}</div>
</template>

export default{
 components:{home}
}

Vue.component('home',home)

// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签
 data: function () {
 return {
  extendData: '这是extend扩展的数据',
 }
 },
 props:['propsExtend']
})

// 创建的构造器可以挂载到元素上,也可以通过 components 或 Vue.component()注册使用
// 挂载到一个元素上。可以通过propsData传参.
new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')

// 通过 components 或 Vue.component()注册
Vue.component('Profile',Profile)

const mixin={
 created(){
  this.dealTime()
 },
 methods:{
  dealTime(){
  console.log('这是mixin的dealTime里面的方法');
  }
 }
}

export default{
 mixins:[mixin]
}

const extend={
 created(){
  this.dealTime()
 },
 methods:{
  dealTime(){
  console.log('这是mixin的dealTime里面的方法');
  }
 }
}

export default{
 extends:extend
}

var MyPlugin = {};
 MyPlugin.install = function (Vue, options) {
 // 2. 添加全局资源,第二个参数传一个值默认是update对应的值
 Vue.directive('click', {
  bind(el, binding, vnode, oldVnode) {
  //做绑定的准备工作,添加时间监听
  console.log('指令my-directive的bind执行啦');
  },
  inserted: function(el){
  //获取绑定的元素
  console.log('指令my-directive的inserted执行啦');
  },
  update: function(){
  //根据获得的新值执行对应的更新
  //对于初始值也会调用一次
  console.log('指令my-directive的update执行啦');
  },
  componentUpdated: function(){
  console.log('指令my-directive的componentUpdated执行啦');
  },
  unbind: function(){
  //做清理操作
  //比如移除bind时绑定的事件监听器
  console.log('指令my-directive的unbind执行啦');
  }
 })

 // 3. 注入组件
 Vue.mixin({
  created: function () {
  console.log('注入组件的created被调用啦');
  console.log('options的值为',options)
  }
 })

 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  console.log('实例方法myMethod被调用啦');
 }
 }

 //调用MyPlugin
 Vue.use(MyPlugin,{someOption: true })

 //3.挂载
 new Vue({
 el: '#app'
 });

mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
 this.$nextTick(() => {
 this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
 })
}

// 全局定义
Vue.directive("change-color",function(el,binding,vnode){
 el.style["color"]= binding.value;
})

// 使用
<template>
<div v-change-color>{{message}}
</div>
</template>
<script>
 export default{
 data(){
  return{
  color:'green'
  }
 }
 }
</script>

// 使用
// 在双花括号中
{{ message | capitalize }}

// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>

// 全局注册
Vue.filter('stampToYYMMDD', (value) =>{
 // 处理逻辑
})

// 局部注册
filters: {
 stampToYYMMDD: (value)=> {
 // 处理逻辑
 }
}

// 多个过滤器全局注册
// /src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') 
export { dateServer }
// /src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
 data: {
 msg: 'hello'
 },
 render: res.render,
 staticRenderFns: res.staticRenderFns
})

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
 // Vue v2.x.x
} else if (version === 1) {
 // Vue v1.x.x
} else {
 // Unsupported versions of Vue
}

// 利用 set
this.$set(arr,index,item)

// 利用数组 push(),splice()

// 将键码为 113 定义为 f2
Vue.config.keyCodes.f2 = 113;
<input type="text" @keyup.f2="add"/>

Vue.config.performance = true

Vue.config.errorHandler = function (err, vm, info) {
 // handle error
 // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
 // 只在 2.2.0+ 可用
}

Vue.config.warnHandler = function (msg, vm, trace) {
 // `trace` 是组件的继承关系追踪
}

<span v-pre>{{ this will not be compiled }}</span> 显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>  即使data里面定义了msg这里仍然是显示的{{msg}}

// template 中
<div class="#app" v-cloak>
 <p>{{value.name}}</p>
</div>

// css 中
[v-cloak] {
 display: none;
}

<span v-once> 这时只需要加载一次的标签</span>

<transition>
 <keep-alive v-if="aliveFlag"> //因为有些页面,如试试数据统计,要实时刷新,所以就不需要缓存
 <router-view/> //路由标签
 </keep-alive>
 <router-view v-else/>
</transition>

router.beforeEach((to, from, next) => {
 console.log('全局前置守卫：beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫
 if (path === '/login') {
 next()
 return
 }
 if (token) {
 next();
 } 
})

beforeRouteEnter (to, from, next) {
 // 这里还无法访问到组件实例，this === undefined
 next( vm => {
 // 通过 `vm` 访问组件实例
 })
}

this.$router.push():跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace():不会有记录
this.$router.go(n):n可为正数可为负数。正数返回上一个页面,类似 window.history.go(n)

this.$route.params.id:获取通过 params 或/:id传参的参数
this.$route.query.id:获取通过 query 传参的参数

<router-view :key="$route.fullpath"></router-view>

new Vue({
 data: {
  // vue不会对list里的object做getter、setter绑定
  list: Object.freeze([
   { value: 1 },
   { value: 2 }
  ])
 },
 mounted () {
  // 界面不会有响应,因为单个属性被冻结
  this.list[0].value = 100;

  // 下面两种做法，界面都会响应
  this.list = [
   { value: 100 },
   { value: 200 }
  ];
  this.list = Object.freeze([
   { value: 100 },
   { value: 200 }
  ]);
 }
})

// main.js
Vue.prototype.$log = window.console.log;

// 组件内部
<div>{{log(info)}}</div>

{
 vue: {
 preserveWhitespace: false
 }
}

// page 代码
<template>
 <div>
 <avatar :img-src="/UploadFiles/2021-04-02/imgSrc">

现在:通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件


// vue-cli 2.x在vue-loader.conf.js 默认配置是
transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
 avatar: ['default-src']

// vue-cli 3.x 在vue.config.js
{
 vue: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

// page 代码可以简化为
<template>
 <div>
 <avatar img-src="/UploadFiles/2021-04-02/default-avatar.png">

34.为路径设置别名


1.场景:在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名
2.vue-cli 2.x 配置


// vue-cli 2.x在vue-loader.conf.js 默认配置是
transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

// 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改
 avatar: ['default-src']

// vue-cli 3.x 在vue.config.js
{
 vue: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

// page 代码可以简化为
<template>
 <div>
 <avatar img-src="/UploadFiles/2021-04-02/default-avatar.png">

3.vue-cli 3.x 配置


// 在根目录下创建vue.config.js
var path = require('path')
function resolve (dir) {
 console.log(__dirname)
 return path.join(__dirname, dir)
}
module.exports = {
 chainWebpack: config => {
 config.resolve.alias
  .set(key, value) // key,value自行定义，比如.set('@@', resolve('src/components'))
 }
}



35.img 加载失败


场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片


// page 代码
<img :src="/UploadFiles/2021-04-02/imgUrl">

36.css


36.1 局部样式


1.Vue中style标签的scoped属性表示它的样式只作用于当前模块，是样式私有化.
2.渲染的规则/原理：


给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性


在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式，如：.demo[data-v-2311c06a]{}

如果引入 less 或 sass 只会在最后一个元素上设置


// 原始代码
<template>
 <div class="demo">
  <span class="content">
   Vue.js scoped
  </span>
 </div>
</template>

<style lang="less" scoped>
 .demo{
  font-size: 16px;
  .content{
   color: red;
  }
 }
</style>

// 浏览器渲染效果
<div data-v-fed36922>
 Vue.js scoped
</div>
<style type="text/css">
.demo[data-v-039c5b43] {
 font-size: 14px;
}
.demo .content[data-v-039c5b43] { //.demo 上并没有加 data 属性
 color: red;
}
</style>



36.2 deep 属性




// 上面样式加一个 /deep/
<style lang="less" scoped>
.demo{
font-size: 14px;
}
.demo /deep/ .content{
color: blue;
}
</style>

// 浏览器编译后
<style type="text/css">
.demo[data-v-039c5b43] {
font-size: 14px;
}
.demo[data-v-039c5b43] .content {
color: blue;
}
</style>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                

                                    Vue,36个技巧,Vue,技巧 
                                

                                    标签：
                                        
Vue,36个技巧,Vue,技巧