20230425----重返学习-vue项目-vue自定义指令-vue-cli的配置

相关文章推荐

强悍的鸡蛋面 · vue如何给自带默认回调参数的函数添加自定义 ...· 2 天前 ·

睿智的松鼠 · vue时分选择器结束时间大于开始时间 - ...· 9 小时前 ·

开朗的烤红薯 · vue ...· 2 小时前 ·

咆哮的黑框眼镜 · vue 获取当前时间戳 + 4位随机数 - ...· 2 小时前 ·

博学的火锅 · Vue进阶（六十四）：iframe更改src ...· 2 小时前 ·

买醉的熊猫 · Mysql中where 条件中加 if ...· 1 年前 ·

忧郁的大象 · qss样式表笔记大全(二)：可设置样式的窗口 ...· 1 年前 ·

飘逸的荔枝 · Django原生sql使用Paginator ...· 1 年前 ·

有胆有识的香瓜 · string - Parsing ...· 1 年前 ·

咆哮的梨子 · python - ...· 1 年前 ·

在 /src/store/ 中创建一个目录 /模块目录名/ ，里面有一个 index.js文件 ，以便 vuex主实例对象 导入作为一个模块。


    /src/store/模块目录名/index.js

导出的一个对象，只不过它可以被


    /src/store/index.js

这个


    vuex主实例对象

导入并使用。

这个


    /src/store/模块目录名/index.js

依然可以导入其它模块或者是其它方法，以生成自己的模块。不过总体都在


    /src/store/index.js

这个


    vuex主实例对象

上。

/src/store/模块目录名/index.js 中的state属性里有一个变量，用于保存表格数据。

/src/store/模块目录名/index.js 中的mutations属性里有一个同步函数，用于修改表格数据。

/src/store/模块目录名/index.js 中的actions属性里有一个异步函数，用于发送axios请求获取表格数据，并通过mutations属性里的同步函数修改state属性里的表格数据变量。

在业务组件中从vuex中导入mapState与mapActions辅助函数，并用这两个辅助函数把 /src/store/模块目录名/index.js 中的state属性里的表格数据变量展开放置到业务组件的computed计算属性中，把 /src/store/模块目录名/index.js 中的actions属性里的异步函数放置到业务组件的methods方法函数中。

业务组件中定义一个计算属性，用于放置渲染表格用的表格数据，它主要对vuex中的表格数据变量进行处理，并用于渲染页面的表格DOM。

一开始让业务组件表格loading。

在业务组件的created()中调用vuex异步函数，发送一个axios请求表格数据。得到数据后，更新vuex中的表格数据。之后业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。

停止表格loading。

删除功能，直接发送一个axios请求用于删除数据，vuex中的同步修改数据，业务组件中的表格数据计算属性也会重新计算，进而更新表格。


    /src/store/模块目录名/index.js

中的mutations属性里有一个同步函数，用于删除vuex表格数据中一项数据。

在业务组件中从vuex中导入mapMutations辅助函数，并用这个辅助函数把把


    /src/store/模块目录名/index.js

中的mutations属性里的同步函数放置到业务组件的methods方法函数中。

直接发送一个axios请求用于删除后端的一项数据。

删除失败，做出提示后，不做操作。

删除成功，做出提示后，调用vuex中的同步函数，删除vuex表格数据中一项数据。

由于vuex表格数据改变，业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。

完成功能，直接发送一个axios请求用于完成数据，vuex中的同步修改数据，业务组件中的表格数据计算属性也会重新计算，进而更新表格。


    /src/store/模块目录名/index.js

中的mutations属性里有一个同步函数，用于修改vuex表格数据中一项数据变成完成状态。

在业务组件中从vuex中导入mapMutations辅助函数，并用这个辅助函数把把


    /src/store/模块目录名/index.js

中的mutations属性里的同步函数放置到业务组件的methods方法函数中。

直接发送一个axios请求用于完成后端的一项数据。

完成操作失败，做出提示后，不做操作。

完成操作成功，做出提示后，调用vuex中的同步函数，修改vuex表格数据中一项数据变成完成状态。

由于vuex表格数据改变，业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。

新增功能，对数据进行校验，发送一个axios请求用于新增数据，调用vuex异步函数，发送一个axios请求表格数据，更新vuex中的表格数据。业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。

对数据进行校验，并处理数据让其符合后台需求的格式。

直接发送一个axios请求用于新增数据。

新增失败，做出提示后，不做操作。

新增成功，做出提示后，复用关闭弹窗的方法，之后调用vuex异步函数，发送一个axios请求表格数据。得到数据后，更新vuex中的表格数据。之后业务组件通过计算属性拿到并处理好vuex中的表格数据，更新业务组件中的表格数据。

/src/store/index.js 中引入同目录中其它文件夹，每个文件夹中的index.js就是它的一个模块。表现为在它的Vuex实例对象中配置对象中modules对象中的一个属性。

使用模块中的state及getters及mutations及actions等。

一般通过辅助函数来进行。

< meta charset = "UTF-8" /> < script src = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" > </ script > </ head > < div id = "app" > < h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2 = "'red'+6" > h1 </ h1 > </ div > < script > //全局指令: `v-color`; Vue . directive ( "color" , { bind ( el, binding, vnode, oldVnode ) { console . log ( `bind()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); inserted ( el, binding, vnode, oldVnode ) { console . log ( `inserted()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); update ( el, binding, vnode, oldVnode ) { console . log ( `update()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); componentUpdated ( el, binding, vnode, oldVnode ) { console . log ( `componentUpdated()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); unbind ( el, binding, vnode, oldVnode ) { console . log ( `unbind()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); //局部指令: `v-color`; let vm = new Vue ({ el : "#app" , </ script > </ body > </ html > < meta charset = "UTF-8" /> < script src = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" > </ script > </ head > < div id = "app" > < h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2 = "'red'+6" > h1 </ h1 > </ div > < script > let vm = new Vue ({ el : "#app" , directives : { //局部指令: `v-color`; color :{ bind ( el, binding, vnode, oldVnode ) { console . log ( `bind()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); inserted ( el, binding, vnode, oldVnode ) { console . log ( `inserted()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); update ( el, binding, vnode, oldVnode ) { console . log ( `update()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); componentUpdated ( el, binding, vnode, oldVnode ) { console . log ( `componentUpdated()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); unbind ( el, binding, vnode, oldVnode ) { console . log ( `unbind()钩子函数： el-->` ,el, `\n binding-->` ,binding, `\n vnode-->` ,vnode, `\n oldVnode-->` ,oldVnode); </ script > </ body > </ html >

自定义指令的定义方式

自定义指令的定义方式：

对象，有五个钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

虚拟DOM—真实DOM 插入页面的时候，执行

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
    <div id="app">
      <h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
    </div>
    <script>
      //全局指令: `v-color`;
      Vue.directive("color", {
        bind(el, binding, vnode, oldVnode) {
          console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        inserted(el, binding, vnode, oldVnode) {
          console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
          el.style.color=binding.value.slice(0,3)
        update(el, binding, vnode, oldVnode) {
          console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        componentUpdated(el, binding, vnode, oldVnode) {
          console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        unbind(el, binding, vnode, oldVnode) {
          console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
      let vm = new Vue({
        el: "#app",
        directives: {
          // bgColor(){},//函数（简写）；
          // 对象
          bgColor: {
            bind() {},
          //局部指令: `v-background`;
          background:{
            bind(el, binding, vnode, oldVnode) {
              console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            inserted(el, binding, vnode, oldVnode) {
              console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
              el.style.backgroundColor=binding.value;
            update(el, binding, vnode, oldVnode) {
              console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            componentUpdated(el, binding, vnode, oldVnode) {
              console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            unbind(el, binding, vnode, oldVnode) {
              console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
    </script>
  </body>
</html>
函数（简写） ，相当于对象的inserted()和update()这两个钩子，常用的方式
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
虚拟DOM—真实DOM 插入页面的时候，执行
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
    <div id="app">
      <h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
    </div>
    <script>
      //全局指令: `v-color`;
      Vue.directive("color", (el, binding, vnode, oldVnode)=> {
        console.log(`函数简写，相当于对象的inserted()和update()： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        console.log(`binding.value.slice(0,3)-->`, binding.value.slice(0,3));
        el.style.color=binding.value.slice(0,3)
      //局部指令: `v-color`;
      let vm = new Vue({
        el: "#app",
        directives: {
          background(el, binding, vnode, oldVnode) {
            console.log(`函数简写，相当于对象的inserted()和update()： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            el.style.backgroundColor=binding.value
    </script>
  </body>
</html>
name：指令名，不包括 v- 前缀。
rawName: 指令名，包括 v- 前缀。
value：指令的绑定值，计算后的，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。不能计算，例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
    <div id="app">
      <h1 v-color:theArg1:theArg2.theModifiers1.theModifiers2="'red'+6" v-background="'blue'">h1</h1>
    </div>
    <script>
      //全局指令: `v-color`;
      Vue.directive("color", {
        bind(el, binding, vnode, oldVnode) {
          console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        inserted(el, binding, vnode, oldVnode) {
          console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
          el.style.color=binding.value.slice(0,3)
        update(el, binding, vnode, oldVnode) {
          console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        componentUpdated(el, binding, vnode, oldVnode) {
          console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
        unbind(el, binding, vnode, oldVnode) {
          console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
      let vm = new Vue({
        el: "#app",
        directives: {
          // bgColor(){},//函数（简写）；
          // 对象
          bgColor: {
            bind() {},
          //局部指令: `v-background`;
          background:{
            bind(el, binding, vnode, oldVnode) {
              console.log(`bind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            inserted(el, binding, vnode, oldVnode) {
              console.log(`inserted()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
              el.style.backgroundColor=binding.value;
            update(el, binding, vnode, oldVnode) {
              console.log(`update()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            componentUpdated(el, binding, vnode, oldVnode) {
              console.log(`componentUpdated()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
            unbind(el, binding, vnode, oldVnode) {
              console.log(`unbind()钩子函数： el-->`,el,`\n binding-->`,binding,`\n vnode-->`,vnode,`\n oldVnode-->`,oldVnode);
    </script>
  </body>
</html>
vue-cli的配置

vue-cli的配置文件在/vue.config.js
2023年4月vue2的/vue.config.js新默认配置
//脚手架的默认配置
const { defineConfig } = require('@vue/cli-service')//用于提示的一个函数，写在它里面，可以提示一些TypeScript数据类型。
module.exports = defineConfig({
    transpileDependencies: true,
    //...
老vue2的/vue.config.js新默认配置
//老配置
module.exports = {
    //...
        target:"https://www.jianshu.com",//目标服务器网址
        ws: true,//使用websocket
        changeOrigin: true,//是否伪装访问
        pathRewrite:{//网址重写
          "/jianshu":""
       相关推荐




    
 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
  663.4k阅读
  · 
 8261点赞vue-cli3 项目从搭建优化到docker部署
  86.7k阅读
  · 
 2103点赞分享8个非常实用的Vue自定义指令
  58.8k阅读
  · 
 2105点赞vue-cli3 从搭建到优化
  57.4k阅读
  · 
 1161点赞Vue自定义指令
  20.5k阅读
  · 
 147点赞
    友情链接：
 
        java类集框架的结构图