好看的网页千篇一律，有趣的代码万里挑一。
今天继续分享一些基础知识点，关键字：
映射函数、自定义插件、自定义指令、$nextTick()
1. 导入映射函数
// 从vuex中，导入映射函数
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
2. 使用映射函数生成计算属性
computed:{
//如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，
//就可以使用mapState映射函数，自动生成页面中的计算属性。
...mapState(['cars']),
//注意：如果要映射模块里面的state，函数的第一个参数设置为模块的名称
...mapState('phone',['phones']),
//如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，
//就可以使用mapGetters映射函数，自动生成页面中的计算属性。
...mapGetters(['totalCarPrice']),
//注意：如果要映射模块里面的getters，函数的第一个参数设置为模块的名称
...mapGetters('phone',['totalPhonePrice'])
}
3. 使用映射函数生成方法
// 注意1：生成的方法名跟mutations里面的方法名相同。
// 注意2：生成的方法会带有一个参数，通过参数传递数据。
...mapMutations(['deleteCar']),
// 注意：如果要映射模块里面的方法，第一个参数传递模块的名称
...mapMutations('phone',['deletePhone'])
...mapActions(['addCar'])
...mapActions('phone',['addPhone'])
自定义插件、自定义指令
1. key
<ul>
<!-- 注意：如果只是展示列表数据，这里的可以可以是索引，
如果列表中的数据会经常发生变化，特别是列表的数据的位置会发生变化，
这个是key一定要设置为对象身上的唯一属性，比如：学号，工号，车牌号等等，
这样做会大大提高列表重新渲染的性能损耗。 -->
<li v-for="(item) in list" :key="item.id">
{{item.id}}--{{item.name}}--{{item.sex}}--{{item.age}}
<button @click="item.age++">添加年龄</button>
</li>
</ul>
<div>
<p>学号：<input type="text" v-model="obj.id"></p>
<p>姓名：<input type="text" v-model="obj.name"></p>
<p>性别：<input type="text" v-model="obj.sex"></p>
<p>年龄：<input type="text" v-model.number="obj.age"></p>
<p><button @click="add">添加</button></p>
</div>
add(){
//验证学号和姓名不能为空
if(!this.obj.id || !this.obj.name) return alert('学号和姓名不能为空')
//验证学号不能重复
if(this.list.map(r=>r.id).includes(this.obj.id)) return alert('学号不能重复')
//添加到数组中
this.list.unshift(this.obj)
//清空当前对象
this.obj = {
id:'',
name:'',
sex:'',
age:''
}
}
$nextTick()
// $nextTick()回调函数里面的代码，回在DOM渲染完毕后执行
// 在Vue中，如果我们需要手动操作DOM，经常会用到这个方法。
this.$nextTick(()=>{
this.$refs.car.focus()
})
自定义指令
directives:{
//自定义一个指令，指令名称是myhtml，
//自定义指令就是一个方法，该方法有两个参数：返回指令所在的dom元素，绑定的一份数据
myhtml:function(el,binding){
el.innerHTML = binding.value
},
red:function(el){
el.style.color = 'red'
},
color:function(el,binding){
el.style.color = binding.value
}
}
自定义插件
// 定义一个插件，插件就是将给Vue添加的全局成员，归类到一起去，这样做利于后期维护。
export default {
//插件中必须包含一个install方法，方法的第一个参数不是Vue，后面的参数是可选的
install: function(Vue) {
// 注册全局指令
Vue.directive("myhtml", function(el, binding) {
el.innerHTML = binding.value;
});
Vue.directive("red", function(el) {
el.style.color = "red";
});
Vue.directive("color", function(el, binding) {
el.style.color = binding.value;
});
//全局混入，之后所有的Vue实例，都将拥有里面定义的成员
Vue.mixin({
data() {
return {
myName: "组件",
myAge: 20,
};
},
methods: {
sayHi() {
alert("大家好！");
},
},
});
//给Vue的原型对象添加成员，之后所有的Vue实例，都将共享这些成员
Vue.prototype.address = "北京市朝阳区1001号";
//全局过滤器
Vue.filter("toFixed2", function(val) {
return val.toFixed(2);
});
//注册全局组件
Vue.component("b-button", {
render: (h) => h("button", { style: { color: "red" } }, "按钮"),
});
},
};
// 导入自定义插件
import myPlugin from './plugin'
//use方法，就是去调用插件中的install方法。
Vue.use(myPlugin)
