Vue-学习笔记-2

最新推荐文章于 2024-07-24 14:58:19 发布
最新推荐文章于 2024-07-24 14:58:19 发布
阅读量97 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pakho_lin/article/details/120154712
版权

文章目录

Vue

一、组件的定义及复用性，局部组件和全局组件

<script>
  // 组件的定义
  // 组件具备复用性
  // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔
  // 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名
  // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射

  const Counter = {
    data() {
      return {
        count: 1
      }
    },
    template: `<div @click="count += 1">{{count}}</div>`
  }

  const HelloWorld = {
    template: `<div>hello world</div>`
  }

  const app = Vue.createApp({
    components: {
      // counter: Counter,
      // 'hello-world': HelloWorld,
      Counter, HelloWorld,
    },
    template: `
      <div>
        <hello-world />
        <counter />
      </div>
    `
  });

  // app.component('counter-parent', {
  //   template: `<counter />`
  // })

  // app.component('counter', {
  //   data() {
  //     return {
  //       count: 1
  //     }
  //   },
  //   template: `<div @click="count += 1">{{count}}</div>`
  // })


  const vm = app.mount('#root');
</script>

二、组件间传值及传值校验

动态传参 v-bind，静态传参。

<script>
  const app = Vue.createApp({
    data() {
      return { num: 1234 }
    },
    template: `
      <div><test :content="num" /></div>
    `
  });

  // type:String, Boolean, Array, Object, Function, Symbol
  // required 必填
  // default 默认值
  app.component('test', {
    props: {
      content: {
        type: Number,
        validator: function(value) {
          return value < 1000;
        },
        default: function() {
          return 456;
        }
      }
    },
    template: `<div>{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

三、单项数据流的理解

<script>
  // v-bind="params"
  // :content="params.content" :a="params.a" :b="params.b" :c="params.c"
  // 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名
  // 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据
  const app = Vue.createApp({
    data() {
      return { num: 1 }
    },
    template: `
      <div>
        <counter :count="num" />
        <counter :count="num" />
        <counter :count="num" />
      </div>
    `
  });

  app.component('counter', {
    props: ['count'],
    template: `<div @click="count += 1">{{count}}</div>`
  });

  const vm = app.mount('#root');
</script>

四、Non-Props属性

<script>
  // Non-prop 属性
  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" msg1="hello1" />
      </div>
    `
  });

  app.component('counter', {
    // inheritAttrs: false,
    mounted() {
      console.log(this.$attrs.msg);
    },
    template: `
      <div :msg="$attrs.msg">Counter</div>
      <div v-bind="$attrs">Counter</div>
      <div :msg1="$attrs.msg1">Counter</div>
    `
  });

  const vm = app.mount('#root');
</script>

五、父子组件间如何通过事件进行通信

<script>
  const app = Vue.createApp({
    data() {
      return { count: 1 }
    },
    template: `
      <counter v-model="count" />
    `
  });

  app.component('counter', {
    props: ['modelValue'],
    methods: {
      handleClick() {
        this.$emit('update:modelValue', this.modelValue + 3);
      }
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  });

  const vm = app.mount('#root');
</script>

六、组件间双向绑定

<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 'a',
      }
    },
    template: `
      <counter v-model.uppercase="count" />
    `
  });

  app.component('counter', {
    props: {
      'modelValue': String,
      'modelModifiers': {
        default: ()=> ({})
      }
    },
    methods: {
      handleClick() {
        let newValue = this.modelValue + 'b';
        if(this.modelModifiers.uppercase) {
          newValue = newValue.toUpperCase();
        }
        this.$emit('update:modelValue', newValue);
      },
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  });

  const vm = app.mount('#root');
</script>

七、使用插槽和具名插槽解决组件内容传递问题

<script>
  // slot 插槽
  // slot 中使用的数据，作用域的问题
  // 父模版里调用的数据属性，使用的都是父模版里的数据
  // 子模版里调用的数据属性，使用的都是子模版里的数据
  // 具名插槽
  const app = Vue.createApp({
    template: `
      <layout>
        <template v-slot:header>
          <div>header</div>
        </template>
        <template v-slot:footer>
          <div>footer</div>
        </template>
      </layout>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot name="header"></slot>
        <div>content</div>
        <slot name="footer"></slot>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

八、作用域插槽

<script>
  // 作用域插槽
  const app = Vue.createApp({
    template: `
      <list v-slot="{item}">
        <div>{{item}}</div>
      </list>
    `
  });

  app.component('list', {
    data() {return {list: [1, 2, 3]}},
    template: `
      <div>
        <slot v-for="item in list" :item="item" />
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

九、动态组件和异步组件

<script>
  // 动态组件: 根据数据的变化，结合 compoent 这个标签，来随时动态切换组件的现实
  // 异步组件: 是异步执行某些组件的逻辑，这叫做异步组件

  const app = Vue.createApp({
    template: `
      <div>
        <common-item />
        <async-common-item />
      </div>
    `
  });

  app.component('common-item', {
    template: `<div>hello world</div>`
  });

  app.component('async-common-item', Vue.defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          template: `<div>this is an async component</div>`
        })
      }, 4000)
    })
  }))

  const vm = app.mount('#root');
</script>

十、基础语法-补

<script>
  // v-once 让某个元素标签只渲染一次
  // ref 实际上是获取 Dom 节点 / 组件引用 的一个语法
  // provide / inject
  const app = Vue.createApp({
    data() {
      return { count: 1}
    },
    provide() {
      return {
        count: this.count,
      }
    },
    template: `
      <div>
        <child :count="count" />
        <button @click="count += 1">Add</button>
      </div>
    `
  });

  app.component('child', {
    template: `<child-child />`
  });

  app.component('child-child', {
    inject: ['count'],
    template: `<div>{{count}}</div>`
  });

  const vm = app.mount('#root');
</script>

十一、使用Vue实现基础的CSS过渡与动画效果

 <style>
    /*  动画
    @keyframes leftToRight {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      0% {
        transform: translateX(0px);
      }
    }
    .animation {
      animation: leftToRight 3s;
    } */

    /* 过渡
    .transition {
      transition: 3s background-color ease;
    }
    .blue {
      background: blue;
    }
    .green {
      background: green;
    } */

    .transition {
      transition: 3s background-color ease;
    }

  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        styleObj: {
          background: 'blue'
        }
      }
    },
    methods: {
      handleClick() {
        if(this.styleObj.background === 'blue') {
          this.styleObj.background = 'green';
        }else {
          this.styleObj.background = 'blue'
        }
      }
    },
    template: `
      <div>
        <div class="transition" :style="styleObj">hello world</div>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

十二、使用transition标签实现单元素组件的过渡和动画效果

<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px)
      }
      50% {
        transform: translateX(-50px)
      }
      100% {
        transform: translateX(50px)
      }
    }
    .hello-leave-active {
      animation: shake 3s;
    }
    .hello-enter-active {
      animation: shake 3s;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 单元素，单组件的入场出场动画
  const app = Vue.createApp({
    data() {
      return {
        show: false
      }
    },
    methods: {
      handleClick() {
        this.show = !this.show;
      }
    },
    template: `
      <div>
        <transition name="hello">
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 单元素，单组件的入场出场动画
  const app = Vue.createApp({
    data() {
      return {
        show: false
      }
    },
    methods: {
      handleClick() {
        this.show = !this.show;
      },
      handleBeforeEnter(el) {
        el.style.color = "red";
      },
      handleEnterActive(el, done) {
        const animation = setInterval(() => {
          const color = el.style.color;
          if(color === 'red') {
            el.style.color = 'green';
          } else {
            el.style.color = 'red';
          }
        }, 1000)
        setTimeout(() => {
          clearInterval(animation);
          done();
        }, 3000)
      },
      handleEnterEnd(el) {
        alert(123);
      }
    },
    template: `
      <div>
        <transition
          :css="false"
          @before-enter="handleBeforeEnter"
          @enter="handleEnterActive"
          @after-enter="handleEnterEnd"
        >
          <div v-show="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

十三、组件和元素切换动画的实现

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <title>lesson 25</title>
  <style>
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-from {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s ease-in;
    }
    .v-leave-from ,
    .v-enter-to {
      opacity: 1;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 多个单元素标签之间的切换
  // 多个单组件之间的切换
  const ComponentA = {
    template: '<div>hello world</div>'
  }

  const ComponentB = {
    template: '<div>bye world</div>'
  }

  const app = Vue.createApp({
    data() {
      return { component: 'component-a' }
    },
    methods: {
      handleClick() {
        if(this.component === 'component-a') {
          this.component = 'component-b';
        }else {
          this.component = 'component-a';
        }
      },
    },
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB,
    },
    template: `
      <div>
        <transition mode="out-in" appear>
          <component :is="component" />
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

十四、状态动画

<script>
  // 状态动画
  const app = Vue.createApp({
    data() {
      return {
        number: 1,
        animateNumber: 1
      }
    },
    methods: {
      handleClick() {
        this.number = 10;
        if(this.animateNumber < this.number) {
          const animation = setInterval(() => {
            this.animateNumber += 1;
            if(this.animateNumber === 10) {
              clearInterval(animation);
            }
          }, 100);
        }
      },
    },
    template: `
      <div>
        <div>{{animateNumber}}</div>
        <button @click="handleClick">增加</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 vue-next-admin 学习笔记,
rilqa的博客
12-16 1199
App.vue 至-->
Vue-router学习笔记
01-27
2. **模块化的、基于组件的路由配置**：路由配置可以根据项目需求进行模块化，每个路由可以关联一个或多个组件，使代码更易于管理和维护。 3. **路由参数、查询、通配符**：通过在路径中使用冒号`:`定义动态参数，...
message与modelValue有什么区别？
weixin_40945354的博客
08-05 169
<div id="app"> <my-component v-model.capitalize="message"></my-component> {{ message }} </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return {
vue3的modelModifiers用法及原理
weixin_45455337的博客
12-23 305
在这个示例中，我们在父组件中使用了一个自定义的组件 CustomInput，并且使用了 v-model.trim 修饰符。在父组件中，我们可以通过 v-model.trim 修饰符来指定对输入值进行 trim 处理，而在子组件中，我们通过 modelModifiers 来获取修饰符，并对输入值进行相应的处理。总之，modelModifiers 可以帮助你在自定义组件中使用 v-model 指令时，对输入值进行额外的处理和修饰，从而更好地满足自定义组件的需求。
使用modelModifiers处理自定义修饰符
温壁
04-27 294
/ 这里会输出{aaa: true}
Vue3 | 父子组件间通信、组件间双向绑定的高级内容、插槽详解、动态组件、异步组件...
aaLiweipeng的博客
03-21 577
完整原文地址见简书https://www.jianshu.com/p/c8891bd3fe36 本文内容提要 父子组件可通过事件 进行通信 携带参数的事件 发送和监听回调 使用 组件的emits板块 整理组件事件 使用 组件emits板块的 Object形式 校验外传的参数值 结合$emit、v-bind与v-model 实现 父子组件通信(数据双向绑定) 结合$emit、v-bind与...
【初学vue3笔记】
weixin_43881166的博客
08-10 424
【初学vue3笔记】 值得注意的新特性 1. Teleport Teleport 是什么？它解决的是什么问题？用法？ Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术 应用场景：一个常见的场景是创建一个包含全屏模式的组件。在大多数情况下，你希望模态框的逻辑存在于组件中，但是模态框的定位很快就很难通过 CSS 来解决，或者需要更改组件组合。 类似这种结构 <body> <div style="position: relative;">
vue-simple-uploader 的使用(学习笔记)
weixin_45608414的博客
03-06 2257
Vue uploader
vue-element-admin前端搭建学习笔记
Parker_cpp的博客
01-16 1406
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。官方网站为。
VUE学习笔记--vue-cli
CelineT的博客
04-07 1536
vue-cli简介用法、cli目录结构、命令、npm run serve 执行过程、vue-cli的起步文件、使用自定义组件
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
Vue2学习笔记之请求数据交互vue-resource
01-21
必须引入一个库：vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 392
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1001
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
vue3 学习笔记17 -- 基于el-menu封装菜单
weixin_46328739的博客
07-23 162
前提条件：组件创建完成。
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 212
vue3——利用自定义指令实现下拉框分页懒加载
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 984
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1295
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
django-vue-admin 学习笔记 自定义插槽tooltip字符数据显示
02-02
最近我在学习django-vue-admin时遇到了一个问题，就是关于自定义插槽tooltip字符数据显示的。在默认情况下，tooltip只能显示简单的数据，无法满足我对复杂数据的显示需求。经过查阅文档和实践，我成功解决了这个问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值