plugin插件
1、插件是一个对象，必须实现install办法
2、插件需要在vue文件中使用Vue.use(插件)
3、插件方法
Vue.extend(.vue文件)继承.vue文件的构造函数
var NotifyCom = Vue.extend(NotifyVue);
instance.$mount(dom)手动挂载
var instance = new NotifyCom();
instance.$mount(document.createElement("div"));
instance.$el 实例的真是dom
挂载全局
Vue.prototype.$toast=Toast
将插件挂载到全局的（所有组件的实例都将拥有拆键的方法和属性）
总体代码
import NotifyVue from "./NotifyVue.vue";
const Notify = {
};
Notify.install = function (Vue) {
var NotifyCom = Vue.extend(NotifyVue);
var instance = new NotifyCom();
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
Notify.show = instance.show;
Notify.hide = instance.hide;
Notify.success = instance.success;
Notify.danger = instance.danger;
Notify.warning = instance.warning;
Vue.prototype.$notify = Notify;
};
export default Notify;
提示插件Notify编写
在plugin创建一个文件夹notify
里面包含NotifyCom.vue和index.js俩文件
NotifyCom.vue文件编写
<template>
<div class="notify"
v-if="msg"
:style="{ color: color, backgroundColor: bgColor }">
{
{
msg }}
</div>
</template>
<style scoped>
.notify {
height: 44px;
line-height: 44px;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: center;
}
</style>
<script>
export default {
data () {
return {
msg: "",
color: "#fff",
bgColor: "#090",
};
},
methods: {
show (msg, bgColor = "#090", color = "#fff") {
this.msg = msg;
this.color = color;
this.bgColor = bgColor;
setTimeout(() => {
this.hide()
}, 2000)
},
hide () {
this.msg = "";
},
// c成功
success (msg) {
this.show(msg, "#090")
},
danger (msg) {
this.show(msg, "#ff5500")
},
warning (msg) {
this.show(msg, "#ffd606")
}
},
};
</script>
index.js
import NotifyVue from "./NotifyVue.vue";
const Notify = {
};
Notify.install = function (Vue) {
var NotifyCom = Vue.extend(NotifyVue);
var instance = new NotifyCom();
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
Notify.show = instance.show;
Notify.hide = instance.hide;
Notify.success = instance.success;
Notify.danger = instance.danger;
Notify.warning = instance.warning;
Vue.prototype.$notify = Notify;
};
export default Notify;
使用
在需要使用的地方插入插件例如我在登录页面，在请求到数据时提醒登陆成功 ，登陆失败以及网络错误
if (res.data.code === 200) {
this.$notify.success(res.data.msg)//使用的插件
localStorage.setItem('token', res.data.token)
localStorage.setItem('user', JSON.stringify(res.data.user))
var redirect = this.$route.query.redirect || "/"
this.$router.replace(redirect)
} else {
this.$notify.danger(res.data.msg)//使用的插件
localStorage.removeItem("token")
localStorage.removeItem("user")
}
}
).catch(err => {
this.$notify.warning("登陆失败")//使用的插件
console.error(err);
localStorage.removeItem("token")
localStorage.removeItem("user")
})
vue组件
全局组件定义与使用
定义全局组件
需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；
这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签
template里必须只有一个根元素
在组件中，data是函数，将数据return回去
依然可以用this来调用data中定义的数据
定义组件
① 定义一个组件，命名为my-component
② 其中包含数据：name和方法：changeName
③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name
④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)
当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成；
组件定义时也可以用横杆法命名；
如果定义时用myComponent，标签用是OK的，系统自动识别
使用组件
① 在vue对象对应的根元素（el指定标签）下使用
② 由于定义的是全局组件，所以可以在任意的vue对象下使用
③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立
####局部组件定义与使用
// template仅一个根元素：ul
var msgComponent = {
// 数据是自身提供的 (hobbies)
template:`<ul><li v-for='hobby in hobbies' v-bind:key='hobby.id'>{
{hobby}}</li></ul>`,
data(){
return {
hobbies:['看剧','看动漫','吃好吃的']
}
}
}
注册局部组件：
// 仅由注册过该局部组件的vue对象才能使用，此处为div#vue-app-one
// 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法
// 可以写成msg-component，此处直接简化了命名为msg，
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent
}
})
父向子传值/传引用：prop
静态传值
创建子组件：
var titleComponent = {
props:["title"],
template:`<p>{
{title}}</p>`
// 所需要的数据title由父组件提供
}
在父组件的components属性中注册子组件
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent,
"titleComponent":titleComponent
},
})
在父组件上使用子组件：
<!-- div#vue-app-one为父组件 -->
<div id="vue-app-one">
<p>这里是vue-app-one</p>
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<!--使用子组件title-component，并传值"我的爱好："给子组件-->
<title-component title="我的爱好："></title-component>
<msg></msg>
</div>
动态传值：v-bind
定义子组件
var titleComponent = {
props:["title"],
template:`<p>{
{title}}</p>`
}
在父组件的components属性中注册子组件：
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent,
"titleComponent":titleComponent
},
data(){
return {
title:"my hobbies are ",
}
}
})
使用子组件，通过绑定父组件data中的变量title来实现动态传值：
<!-- div#vue-app-one为父组件 -->
<div id="vue-app-one">
<p>这里是vue-app-one</p>
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<!-- 动态绑定title -->
<title-component v-bind:title="title"></title-component>
<msg></msg>
</div>