vue使用小计
一.props
// 数组:不建议使用 props:[] // 对象 props:{ inpVal:{ 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 } } }
二.attrs和listeners
2.4.0 新增 这两个是不常用属性,但是高级用法很常见;
1.attrs场景:如果父传子有很多值,那么在子组件需要定义多个props解决:attrs 场景:如果父传子有很多值,那么在子组件需要定义多个 props 解决:attrs场景:如果父传子有很多值,那么在子组件需要定义多个props解决:attrs获取子传父中未在 props 定义的值
// 父组件 <home title="这是标题" width="80" height="80" imgUrl="imgUrl"/> // 子组件 mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"} },
相对应的如果子组件定义了 props,打印的值就是剔除定义的属性
props: { width: { type: String, default: '' } }, mounted() { console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"} },
2.listeners场景:子组件需要调用父组件的方法解决:父组件的方法可以通过v−on="listeners 场景:子组件需要调用父组件的方法 解决:父组件的方法可以通过 v-on="listeners场景:子组件需要调用父组件的方法解决:父组件的方法可以通过v−on="listeners" 传入内部组件——在创建更高层次的组件时非常有用
// 父组件 <home @change="change"/> // 子组件 mounted() { console.log(this.$listeners) //即可拿到 change 事件 }
如果是孙组件要访问父组件的属性和调用方法,直接一级一级传下去就可以
3.inheritAttrs// 父组件 <home title="这是标题" width="80" height="80" imgUrl="imgUrl"/> // 子组件 mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"} }, inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props以外的属性) 将inheritAttrs:false后,属性就不会显示在根节点上了
三.install
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' });
四.Vue.compile
var res = Vue.compile('<div><span>{{ msg }}</span></div>') new Vue({ data: { msg: 'hello' }, render: res.render, staticRenderFns: res.staticRenderFns })
五.v-cloak
场景:在网速慢的情况下,在使用vue绑定数据的时候,渲染页面时会出现变量闪烁 用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
// template 中 <div class="#app" v-cloak> <p>{{value.name}}</p> </div> // css 中 [v-cloak] { display: none; }
这样就可以解决闪烁,但是会出现白屏,这样可以结合骨架屏使用
1.preserveWhitespace
场景:开发 vue 代码一般会有空格,这个时候打包压缩如果不去掉空格会加大包的体积 配置preserveWhitespace可以减小包的体积
{ vue: { preserveWhitespace: false } }
2. transformToRequire
场景:以前在写 Vue 的时候经常会写到这样的代码:把图片提前 require 传给一个变量再传给组件
// page 代码 <template> <div> <avatar :img-src="imgSrc"></avatar> </div> </template> <script> export default { created () { this.imgSrc = require('./assets/default-avatar.png') } } </script>
现在:通过配置 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-cli 3.x 将transformToRequire属性换为了transformAssetUrls module.exports = { pages, chainWebpack: config => { config .module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.transformAssetUrls = { avatar: 'img-src', } return options; }); } } // page 代码可以简化为 <template> <div> <avatar img-src="./assets/default-avatar.png"></avatar> </div> </template>