Vue3.0 初体验

最新推荐文章于 2024-07-10 17:59:46 发布
最新推荐文章于 2024-07-10 17:59:46 发布
阅读量307 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue3.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/litter_lj/article/details/116446470
版权

1. createApp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3.0</title>
  </head>
  <body>
    <div id="app">
      <h1 :title="title">{{title}}</h1>
      <course v-model="inputVal" @add="addCourse"></course>
      <p>{{ list.toString() }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>

    <script type="text/x-template" id="course">
        <input :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" placeholder="添加课程" />
        <button @click="$emit('add')">添加数据</button>
    </script> 
    <script>
      const Course= {
          template: "#course",
          props: {
            modelValue:{
              type: String,
              required: true
            }
          },
          emits: ["add","update:modelValue"]
      }  
      Vue.createApp({
        components:{
            course: Course
        },  
        data() {
          return {
            title: "缪冬冬",
            list:[],
            inputVal:"默认值"
          };
        },
        methods: {
            addCourse() {
                this.list.push(this.inputVal)
            }
        },
      }).mount("#app");
    </script>
  </body>
</html>

2.setup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Composition Api</title>
  </head>
  <body>
    <div id="app">
      <h2>{{ state.title }}</h2>
      <h2>数值ref： {{count}}</h2>
      <comp title="666" desc="555"></comp>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script type="text/x-template" id="com">
      <input v-model="val" placeholder="请输入内容" />
      <button @click="addItem">添加内容</button>
      <ul>
          <li v-for="(item,i) in list" :key="i">{{item}}</li>
      </ul>
    </script>
    <script>
      const { reactive, onMounted, ref, toRefs } = Vue;
      const Comp = {
        template: "#com",
        props: ["title"],
        setup(props, ctx) {
          console.log(props, ctx);
          const { attrs } = ctx;

          const state = reactive({
            val: props.title,
            list: [attrs.desc],
          });

          function addItem() {
            state.list.push(state.val);
          }

          return {
            ...toRefs(state),
            addItem,
          };
        },
      };

      const app = Vue.createApp({
        components: {
          Comp,
        },
        setup() {
          const state = reactive({
            title: "默认值",
          });

          onMounted(() => {
            console.log(document.getElementById("app"));
            setTimeout(() => {
              state.title = "修改的值";
            }, 2000);
          });

          const count = ref(0);

          setInterval(() => {
            count.value++;
          }, 1000);

          return {
            state,
            count,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

3.watch

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>count的值: --- {{count}}</p>
      <p>count的值: --- {{newCount}}</p>
      <input v-model="val" /><button @click="addCourse">添加课程</button>
      <p>{{valDesc}}</p>
      <ul>
        <li v-for="(item,i) in list" :key="i">{{item}}</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>

    <script>
      const { reactive, toRefs, watchEffect, watch, computed, ref } = Vue;
      Vue.createApp({
        setup() {
          const state = reactive({
            count: 1,
            newCount: null,
          });

          watchEffect(() => {
            // setTimeout(() => {
            //   state.newCount = state.count * 2;
            // }, 1000);
            state.newCount = state.count * 2;
          });

          watch(
            () => state.count,
            (count, prev) => {
              console.log(count, prev);
            }
          );

          const num = ref(0);

          watch(num, (nm, prev) => console.log(nm, prev, "ref watch"));

          const interval = setInterval(() => {
            if (state.count >= 10) {
              clearInterval(interval);
            }
            state.count++;
            num.value++;
          }, 2000);

          // 测试demo
          const msg = reactive({
            list: ["java", "php"],
            val: "",
            valDesc: computed(() => `输入的值是:${msg.val}`),
          });

          function addCourse() {
            msg.list.push(msg.val);
          }

          return {
            ...toRefs(state),
            num,
            ...toRefs(msg),
            addCourse,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

4.provide,inject

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <p>useCounter：{{count}}</p>
        <cp></cp>
        <p><button @click="setCount(number)">设置值</button></p>
        
    </div>
    <script src="https://unpkg.com/vue@next"></script>

    <script type="text/x-template" id="comp">
        <input v-model="val" />
    </script>

    <script type="module">
      import { useCounter } from "./hook.js";
      const { reactive, ref, toRefs, provide, inject } = Vue;

      const Comp= {
          template: "#comp",
          setup(){
              const val= inject("num");
              return {
                val
              };
          }
      }
  
      Vue.createApp({
        components:{
            cp: Comp
        },  
        setup() {
          const [count, setCount] = useCounter();

          const number= ref(10);
          provide("num",number);

          return {
            count,
            setCount,
            number
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

5.directive

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-focus v-model="val" />
      <p><button @click="changeShow">改变权限</button></p>
      <p v-permission="show">用户名</p>
    </div>
    <script src="./vue.js"></script>

    <script>
      const { createApp, reactive, toRefs } = Vue;

      const app = createApp({
        setup() {
          const state = reactive({
            val: "",
            show: true,
          });
          function changeShow() {
            state.show = !state.show;
            console.log(state.show);
          }
          return {
            ...toRefs(state),
            changeShow,
          };
        },
        directives: {
          permission(el, binding) {
            if (!binding.value) {
              el.style.display = "none";
            } else {
              el.style.display = "block";
            }
          },
        },
      });

      app.directive("focus", {
        mounted(el) {
          el.focus();
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

6.teleport

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .md {
        width: 400px;
        height: 200px;
        position: fixed;
        top: 50%;
        left: 50%;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="changeShow">打开/关闭</button>
      <modal v-model:visible="show"></modal>
      <div id="md"></div>
    </div>
    <script src="./vue.js"></script>

    <script type="text/x-template" id="modal">
      <teleport :to="dom" v-if="dom">
          <div class="md" v-show="vib">
              <p>这是个弹框</p>
              <slot></slot>
              <button @click="$emit('update:visible',false)">关闭</button>
          </div>
      </teleport>
    </script>

    <script>
      const { reactive, ref, computed, onMounted } = Vue;

      const Modal = {
        template: "#modal",
        props: ["visible"],
        emits: ["update:visible"],
        setup(props) {
          const vib = computed(() => props.visible);
          let dom = ref(null);
          onMounted(() => {
            dom.value = document.getElementById("md");
          });
          return {
            vib,
            dom,
          };
        },
      };

      Vue.createApp({
        components: {
          Modal,
        },
        setup() {
          const show = ref(false);

          function changeShow() {
            show.value = !show.value;
            console.log(show.value);
          }

          return {
            show,
            changeShow,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

7.h render渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="appVal" />
      <button @click="getVal">获取值</button>
      <x-head :level="2" :list="[1,2,3,4,85]">测试标题</x-head>
      <l-input v-model="lVal"></l-input>
    </div>
    <script src="./vue.js"></script>
    <script type="text/x-template" id="input">
      <p>这是个输入组件</p>
      <input :value="modelValue" @input="$emit('update:modelValue',$event.target.value)"  />
    </script>
    <script>
      const { createApp, h, ref } = Vue;

      const AInput = {
        template: "#input",
        props: ["modelValue"],
        emits: ["update:modelValue"],
      };

      createApp({
        setup() {
          const appVal = ref("");
          const lVal = ref("1");
          function getVal() {
            console.log(appVal.value, "appVal");
            console.log(lVal.value, "lVal");
          }
          return {
            appVal,
            getVal,
            lVal,
          };
        },
      })
        .component("x-head", {
          props: {
            level: {
              type: Number,
              required: true,
            },
            list: Array,
          },
          render() {
            if (this.list && this.list.length > 0) {
              const children = this.list.map((item) =>
                h(
                  "li",
                  {
                    // onClick: {
                    //   handler: () => {
                    //     console.log("click", item);
                    //   },
                    //   once: true,
                    //   capture: true,
                    // },
                    title: item,
                    onDblclick: () => console.log("db", item),
                  },
                  item
                )
              );
              return h("ul", children);
            } else {
              return h(`h${this.level}`, this.$slots.default());
            }
          },
        })
        .component("l-input", {
          props: ["modelValue"],
          emits: ["update:modelValue"],
          render() {
            return h(AInput, {
              modelValue: this.modelValue,
              "onUpdate:modelValue": (val) =>
                this.$emit("update:modelValue", val),
            });
          },
        })
        .mount("#app");
    </script>
  </body>
</html>

8. 插件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mes {
        width: 400px;
        height: 200px;
        position: fixed;
        top: 50%;
        left: 50%;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="showMsg">打开消息</button>
    </div>
    <script src="./vue.js"></script>

    <script type="text/x-template" id="mes">
      <div class="mes">
          {{msg}}
      </div>
    </script>
    <script>
      const { createApp, render, h } = Vue;

      const app = createApp({
        methods: {
          showMsg() {
            this.$message({ msg: "测试" });
          },
        },
      });

      const MessagePlugin = {
        install() {
          const Message = {
            template: "#mes",
            props: {
              duration: {
                type: Number,
                default: 2000,
              },
              msg: String,
            },
            mounted() {
              setTimeout(() => {
                app.config.globalProperties.$message(null);
              }, this.duration);
            },
          };

          const container = document.createElement("div");
          document.body.appendChild(container);

          app.config.globalProperties.$message = (props) => {
            if (props) {
              render(h(Message, { msg: props.msg }), container);
            } else {
              render(null, container);
            }
          };
        },
      };

      app.use(MessagePlugin);

      app.mount("#app");
    </script>
  </body>
</html>

9.hook.js

const { onMounted, onUnmounted, ref } = Vue;

export function useCounter() {
    
  const count = ref(0);
  let timer;

  onMounted(() => {
    timer = setInterval(() => {
      count.value++;
    }, 1000);
  });

  function setCount(val) {
    count.value = val;
  }

  onUnmounted(() => {
    clearInterval(timer);
  });

  return [count, setCount];
}

 

litter_lj
关注
专栏目录
vue3.0最新初体验
xssxxssx的博客
05-28 475
vue3.0之初体验 直接上代码 <template> <div class="text"> <h1>当前数值：{{ count }}</h1> <h2>当前数值 * 2：{{ doubleCount }}</h2> <h3>vuex中的数值a：{{ a }}</h3> <button @click.stop="add">添加</button>
vue3.0+ts+element-plus项目初体验
marko_zheng的博客
12-03 1万+
vue3.0+ts+element-plus+axios项目初体验 项目基于vue-cli@4.5下开发的，vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同。 首先得全局安装cli npm install -g @vue/cli //全局安装vue-cli最新版本 第二步：实例化项目 vue create mypro // 创建项目，mypro项目名，项目名中不允许出现大写字母 要使用3.0 选择 >Default (Vue 3 Preview) ([Vue
【vue3】vue3 setup如何使用render渲染函数？
qq_39576711的博客
03-16 1万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 注意：setup语法糖是不可以使用render的，所以只有用setup选项才可以。 <script setup lang="ts"> //这里不能使用render渲染 </script> 我们可以在setup选项里直接return ()=> h() 或者多个return ()=>
vue3 setup语法糖中使用render函数渲染标签
long321041080的博客
05-19 3534
render函数在vue3的setup语法糖中使用方式
vue3 setup、vnode、render编译vue组件DOM
黄彪博客
09-28 710
setup 和 虚拟DOM Vnode 渲染组件
vue3 学习笔记 (四)——vue3 setup() 高级用法
前端人的博客
11-19 4404
本篇文章干货较多，建议收藏！ 从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup 配置项，用它来写组合式API。 一、选项式API 和 组合式API 区别 有些同学稀里糊涂用了vue一年了，竟然不知道选项式api ！你是那个同学吗？是的话，赶紧收藏起来。 vue2 中的 Option
浅谈vue-cli 3.0.x 初体验
11-27
总结来说，Vue CLI 3.0.x 的改进主要体现在更友好的开发体验、更简洁的配置结构以及强大的多环境配置支持上。通过使用官方文档和最新的安装方法，开发者可以快速上手并充分利用这些新特性，提高开发效率，同时保持...
vue3对比 Setup、Render、SFC 从 vue 底层实现和性能开销上全面分析三者区别及优略
最新发布
Gleason
07-10 637
在 Vue 3 中，有多种定义和实现组件的方法，包括使用单文件组件（SFC）、defineComponent 以及组合式 API。以下是对三种方法的全面分析，包括其底层实现和性能开销。
vue3.0自定义指令实现
weixin_39001286的博客
07-13 883
Vue-cli 3.x 自定义指令1.vue-cli中新建指令集文件夹2.写入指令3.main.js中引入4.组件中使用 本文例子是自定义指令实现防抖和节流，其它指令实现类似 1.vue-cli中新建指令集文件夹 在src目录下创建directives文件夹，并在directives中创建index.js文件，结构如图： 2.写入指令 在新建的index.js文件中写入指令并抛出 //自定义指令集 export default (app) => { /*** * 防抖 单位时间只触
web前端培训Vue3 setup() 启动函数的原理
weixin_45695430的博客
04-27 717
我们在 Vue2编写组件的时候，会在 props、data、methods、computed 等 options 中定义一些变量。在组件初始化阶段，Vue内部会处理这些 options，即把定义的变量添加到了组件实例上。等模板编译成 render 函数的时候，内部通过 with(this){} 的语法去访问在组件实例中的变量。 那么到了 Vue3，新出现的setup启动函数，是整个组件逻辑组织的入口，我们可以在它内部写composition-api，以更加直观的形式声明变量，有利于代码的逻辑组织和复用，但
vue3+ts defineEmits update使用，v-model:visible 子组件传递数据给父组件
qq_42859450的博客
11-10 4448
vue3 defineEmits v-model:visible
Vue3.x渲染流程（render()）
前端小记
04-08 6040
本文章是叙述的DIff算法之前，patch函数进行分类的探讨，关于DIff算法的深入了解可以看我另一篇文章
vue3.0清理定时器无效问题
xy19950125的博客
12-15 5612
今天朋友问我一个问题 说路由离开后 怎么清除定时器 我理解的就是页面离开了 清掉定时器 然后就给他说 在beforeDestroy生命周期里面清掉就行了 然后他说不行 我郁闷死了 怎么可能呢 然后让他给我截图 他是直接写的一个定时器 没有指定名字 然后我也就无奈了 期间 我自己也动手试了试 奇怪的是 我也清理不掉 不管怎么清理 都是不行 这就让我一头雾水了 开始我最先想到的是我vue版本的问题 我当时用的是vue3.0 所以 我又去扒api 发现vue3.0的beforeDestroy生命周期有所改动..
vue单页面html,单独html使用Vue3 || 单页面使用Vue3
weixin_35765686的博客
06-03 2192
为什么要写这个如此简单的文章呢？因为用的时候找了半个小时的方法才找到正确的使用方式，而且百度的时候没有，所以写出来，如果有人跟我一样的话最起码写起来没那么难了不同构建版本Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。...
vue中常用到的一些解决问题方法（整理一些真正有效能够使用到项目中的方法）（等待不断更新积累）
前端小白成长记
10-09 1990
vue中常用到的一些解决问题方法
vue3中使用render函数
热门推荐
long321041080的博客
01-19 2万+
vue3中使用render函数(使用setup语法糖和未使用setup语法糖写法)
Vue3.0初体验：项目搭建与核心特性
"Vue3.0的初体验和项目搭建教程" Vue3.0作为Vue.js框架的最新版本，带来了显著的改进和优化，提升了整体性能，并引入了一系列新特性。以下是对这些变化的详细说明： 1. **性能提升 (Performance)**: Vue3.0在性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值