开始学习插件

20_脚手架/vue_code/04.src_插件/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  }
+}
+</script>

20_脚手架/vue_code/04.src_插件/components/School.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2>学校名称：{{ name | mySlice}}</h2>
+    <h2>学校地址：{{ address }}</h2>
+    <button @click="test">点击触发hello方法</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院修仙学院修仙学院",
+      address: "长白山",
+      msg: "欢迎学校"  // 以vc内数据为准
+    }
+  },
+  methods: {
+    test() {
+      this.hello()
+    }
+  }
+}
+</script>
+

20_脚手架/vue_code/04.src_插件/components/Student.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+    <input type="text" v-fbind:value="name">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18,
+      msg: "欢迎学生"
+    }
+  }
+}
+</script>
+

20_脚手架/vue_code/04.src_插件/main.js

@@ -0,0 +1,20 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入插件
+import plugins from "./plugins"
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(plugins)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')

20_脚手架/vue_code/04.src_插件/plugins.js

@@ -0,0 +1,34 @@
+export default {
+    install(Vue) {
+        // 全局过滤器
+        Vue.filter("mySlice", function (value) {
+            return value.slice(0, 4)
+        })
+
+        //   全局指令
+        Vue.directive("fbind", {
+            bind(element, binding) {
+                element.value = binding.value
+            },
+            inserted(element, binding) {
+                element.focus()
+            },
+            update(element, binding) {
+                element.value = binding.value
+            }
+        })
+
+        //     定义混入
+        Vue.mixin({
+            data() {
+                return {
+                    x: 100,
+                    y: 200
+                }
+            }
+        })
+
+        // 给Vue原型上添加一个方法
+        Vue.prototype.hello = ()=> {alert('Hello')}
+    }
+}

20_脚手架/vue_code/src/App.vue

@@ -9,7 +9,6 @@
 import School from "./components/School.vue";
 import Student from "./components/Student.vue";
 
-
 export default {
   name: "App",
   components: {

20_脚手架/vue_code/src/components/School.vue

@@ -1,28 +1,27 @@
 <template>
   <div>
-    <h2 @click="showName">学校名称：{{ name }}</h2>
+    <h2>学校名称：{{ name | mySlice}}</h2>
     <h2>学校地址：{{ address }}</h2>
+    <button @click="test">点击触发hello方法</button>
   </div>
 </template>
 
 <script>
-// 局部混合
-// import {mixin_method1, mixin_method2} from "@/mixin";
 
 export default {
   name: "School",
   data() {
     return {
-      name: "修仙学院",
+      name: "修仙学院修仙学院修仙学院",
       address: "长白山",
       msg: "欢迎学校"  // 以vc内数据为准
     }
   },
-  mounted() {
-    console.log(this.msg)  // mixin和vc内的都要执行
-  },
-  // 局部混合
-  // mixins: [mixin_method1, mixin_method2]
+  methods: {
+    test() {
+      this.hello()
+    }
+  }
 }
 </script>
 

20_脚手架/vue_code/src/components/Student.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
-    <h2 @click="showName">学生名称：{{ name }}</h2>
+    <h2>学生名称：{{ name }}</h2>
     <h2>学生年龄：{{ age }}</h2>
+    <input type="text" v-fbind:value="name">
   </div>
 </template>
 
 <script>
-// 局部混合
-// import {mixin_method1, mixin_method2} from "../mixin";
-
 export default {
   name: "Student",
   data() {
@@ -17,12 +15,7 @@ export default {
       age: 18,
       msg: "欢迎学生"
     }
-  },
-  mounted() {
-    console.log(this.msg)
-  },
-  // 局部混合
-  // mixins: [mixin_method1, mixin_method2]
+  }
 }
 </script>
 

20_脚手架/vue_code/src/main.js

@@ -1,13 +1,17 @@
+// 引入Vue
 import Vue from "vue";
+// 引入App
 import App from "./App";
+// 引入插件
+import plugins from "./plugins"
 
-import {mixin_method1, mixin_method2} from "@/mixin";
-
-
+// 设置Vue
 Vue.config.productionTip = false
-Vue.mixin(mixin_method1)
-Vue.mixin(mixin_method2)
 
+// 使用插件
+Vue.use(plugins)
+
+// 实例化Vue
 new Vue({
     components: {
         App

20_脚手架/vue_code/src/mixin.js

@@ -1,17 +0,0 @@
-export const mixin_method1 = {
-    methods: {
-        showName() {
-            alert(this.name)
-        }
-    },
-    mounted() {
-        console.log("欢迎")
-    }
-}
-export const mixin_method2 = {
-    data() {
-        return {
-            msg: "欢迎"
-        }
-    }
-}

20_脚手架/vue_code/src/plugins.js

@@ -0,0 +1,34 @@
+export default {
+    install(Vue) {
+        // 全局过滤器
+        Vue.filter("mySlice", function (value) {
+            return value.slice(0, 4)
+        })
+
+        //   全局指令
+        Vue.directive("fbind", {
+            bind(element, binding) {
+                element.value = binding.value
+            },
+            inserted(element, binding) {
+                element.focus()
+            },
+            update(element, binding) {
+                element.value = binding.value
+            }
+        })
+
+        //     定义混入
+        Vue.mixin({
+            data() {
+                return {
+                    x: 100,
+                    y: 200
+                }
+            }
+        })
+
+        // 给Vue原型上添加一个方法
+        Vue.prototype.hello = ()=> {alert('Hello')}
+    }
+}