当前位置:首页 > 程序开发 > Web > VUE3快速入门(1)——搭建开发环境

VUE3快速入门(1)——搭建开发环境

bnbplayer6个月前 (02-08)Web1372

扫描二维码推送至手机访问。

版权声明:本文由行者无疆发布,如需转载请注明出处。

本文链接:http://xinz.run/post/5.html

标签: VUE
分享给朋友:
返回列表

没有更早的文章了...

下一篇:VUE3快速入门(2)——自定义组件

“VUE3快速入门(1)——搭建开发环境” 的相关文章

VUE3快速入门(4)——Setup语法糖与数据绑定

VUE3快速入门(4)——Setup语法糖与数据绑定

本文讲述了如何使用Setup语法糖简化代码,以及如何获取表单数据。在本系列后续的文章中,均使用setup语法糖写法。 1. Setup语法糖使用Setup导出数据或者方法必须使用return,当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容,也不必再写setup方法名。 1.1 声明组件导出首先将<script>代码中的setup方法部分全部移除,仅留下组件导出声明: <script lang="ts"> export default { name: "MyComp", } 1.2 创建setup语法糖其次,新增一个<script>片段,如下: <script lang="ts" setup> </script> 注意: lang属性对应的语言必须与上一个<script>的代码语言一致,不得JS、TS混用;setup语法糖所在的<script>必须增加一个setup属性 1.3 在setup语法糖标签内写代码最后将原本setup方法里面的内容除了return外全部放入后一个<script>标签内,完整代码如下: <script lang="ts" setup> let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; function add(a: number, b: number): number{ return a + b; } function show(content: any): any { alert(content); } //无需return {author, mail, ...} </script> 这样,凡是在setup语法糖内定义的数据和方法全部自动导出,不用再return。 2. 数据绑定数据绑定是指获取表单中填写的值。 2.1 创建一个表单在合适位置增加一个表单标签: <input name=””/> 2.2 创建变量并绑定表单的值创建一个变量,用于接收表单的值: let input_content = "" 在表单标签内使用v-model指令将表单值与该变量绑定: <input name="" v-model="input_content"/> 2.3 测试修改button的click事件,单击时弹出表单的值: <button @click="show(input_content)">单击</button> 其中show方法代码: function show(content: any): any { alert(content); } 3. 总结 使用setup语法糖就无需再显式声明导出的内容,但要求两个<script>片段语言类型一致;v-model指令用于将表单值与变量绑定;v-model指令仅能用于表单相关的标签。...

VUE3快速入门(7)——监视

VUE3快速入门(7)——监视

本文讲述了监视基础数据类、对象数据类的方法。 1. 什么是监视监视是指,当被监视的对象发生变化时,执行某个逻辑,类似于控件的消息事件。从被监视的数据类型分类,可分为监视ref创建的普通类型、ref创建的对象类型、reactive创建的对象类型三类;从被监视数据的完整与否又可分为监视整个对象和监视部分属性。 2. ref类型的监视2.1 基础类型import { ref, watch } from 'vue'//引入watch let input_content = ref(0);//创建一个基础数据类型 //使用watch方法实现监视 watch(input_content, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) }); 关于watch方法的参数: 参数1: 需要时监视的变量;参数2: 回调函数,其中有两个传入参数,分别为新值和的值;也可以只有一个参数,即为新值;参数3: 配置对象,用于指定一些其他功能,如立即监视、深度监视等。 2.2 监视整个对象监视由ref定义的对象类型,其实是在监控对象类型的地址,因此部分字段的更新不会触发监视,需要手动开启深度监视。在这种情况下,任何一个字段的变化都会触发监视。 例子:监控员工年龄变化,当到达35岁时让其卷铺盖走人。HTML部分: <button @click="add()">+1</button> JS部分: import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(worker, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) if(newVal.age > 35) { alert("卷铺盖走人"); stop();//停止监视 } }, {deep: true});//第三个参数开启深度监视 提示: 上述代码中,watch返回了一个函数,调用该函数时会停止当前的监视;watch的第三个参数开启了深度监视选项,这样仅变化对象成员时,也会触发监视调用;控制台打印的newVal, oldVal值均相同,因为对象的地址没有发生变化。 2.3 监视对象的属性(部分监视)很多时候,我们仅需要关注对象的某几个字段是否发生了变化,即部分监视。对象的部分属性又可能是基础类型,也可能是一个嵌套的对象。因此部分监视又分为基础数据类型和对象数据类型两种。 2.3.1 属性为基础数据类型需要将被监视的数据包装为getter函数 import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(()=>{ return worker.value.age }, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) if(newVal > 35) { alert("卷铺盖走人"); stop();//停止监视 } }); 注意箭头函数也可以简写成: ()=> worker.value.age 2.3.2 属性为对象类型即嵌套对象,修改worker代码,增加银行存款账户的嵌套对象类属性: let worker = ref({ name: "张三", age: 32, accounts: { icbc: 2000, bc: 1200 } }); 增加存款和清零的功能: <button @click="icbc()">存入工行</button> <button @click="bc()">存入中行</button> <button @click="clear()">清零存款</button> function icbc() { //改变accounts的一个属性 worker.value.accounts.icbc += 1000; } function bc() { //改变accounts的一个属性 worker.value.accounts.bc += 1000; } function clear() { //改变整个accounts worker.value.accounts = {bc: 0, icbc: 0}; } 仅监视存款清零: watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("账户变动:", newVal, oldVal) }); 监视存款清零和增加存款: watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("存款清零:", newVal, oldVal) },{deep: true});//开启了深度监视 提示: 与整个对象的监视不同,部分监视即使该部分是对象,也必须写成getter函数形式,在这种情况下监视的是部分对象的地址;监视嵌套对象的内部属性,开启深度监视即可;最佳编码方式是,由ref创建的对象,只要是部分监视,则一律写成getter函数。 3. reactive类型的监视将worker修改为由reactive定义的响应式对象,特别注意整体修改accounts属性的写法: function clear() { Object.assign(worker.accounts, {bc: 0, icbc: 0}); } 监视accounts属性: watch(worker.accounts, (newVal, oldVal)=>{ console.log("账户变动:", newVal, oldVal) }); 当accou...

VUE3快速入门(9)——插槽

VUE3快速入门(9)——插槽

插槽可以实现组件的样式由调用者决定的功能。本文讲述了默认插槽、具名插槽以及作用域插槽的三种使用方式。 1. 什么是插槽插槽是指组件的部分或全部HTML样式由调用者决定,即动态的Template。例如组件的列表有可能是无序列表、有序列表或图片列表,无法在设计组件时指定,在这种情况下需要使用插槽。 2. 默认插槽默认插槽类似HTML的嵌套标签。本节在上一节的基础上对员工列表组件进行改造(WorkerTableEx),上一节组件的列表标题使用了<h1>标签,但调用者可能希望行换成其他的形式,这里使用默认插槽实现。 组件代码如下: <template> <slot></slot><!-- 使用默认插槽形成占位符 --> <table id="main"> <!-- 表格部分省略 --> </table> </template> 则调用该组件的代码为: <WorkerTableEx><h2>部门:办公室</h2></WorkerTableEx> <WorkerTableEx><p>部门:办公室</p></WorkerTableEx> <WorkerTableEx><img src="..."/></WorkerTableEx> 这样,表格的标题展示形式由调用者决定,它可以是头部标题、段落或者图片以及其他。 通过在<template>中使用<slot></slot>形成占位符,当调用者在组件标签中插入HTML片段或另一个组件时,VUE将会把插入的内容放到占位符中(有几个占位符就放几个)。 3. 具名插槽有时希望多个占位符展示的内容不一样,这种情况需要使用具名插槽。假如要求表格底部可以显示备注信息,这就需要与展示标题的插槽区分开来: <template> <slot name="title"></slot><!-- 使用具名插槽,标题显示部分 --> <table id="main"> <!-- 表格部分代码省略 --> </table> <slot name="description"></slot><!-- 使用具名插槽,备注显示部分 --> </template> 则调用该组件的代码为: <WorkerTableEx> <template v-slot:title><!-- 使用v-slot指令 --> <h3>部门:办公室</h3> </template> <template #description><!-- v-slot语法糖 --> <p>导出时间:2024年6月26日</p> </template> </WorkerTableEx> 提示: 使用v-slot指令可以指明内容放在组件的哪个插槽内,同时v-slot指令可以简写为“#”。v-slot指令只能用在<template>标签和组件标签上,不能用在HTML标签上,因此使用具名插槽必须把普通HTML代码用<template>标签包裹。由于使用了具名插槽,因此组件展示的内容顺序与调用者的编码顺序无关。 4. 作用域插槽有时会有这样的需求:数据由组件生成(如请求服务器得到后端数据),但展示形式却由调用者决定,这种情况需要使用作用域插槽。作用域插槽常见于UI框架。 继续改造WorkerTableEx组件,其中该组件仅提供数据(员工、部门及导出时间)以及头部、正文和注脚三个具名插槽: let ajax_data = ref( { workers: [ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ], department: "技术部", exp_t: "2024年6月27日20:22:37" });//实际开发从应从服务器获取 组件的模板部分: <template> <slot :title="ajax_data.title" name="header"></slot> <slot :workers="ajax_data.workers" name="content"></slot> <slot :exp_t="ajax_data.exp_t" name="footer"></slot> </template> 上述代码使用了具名作用域插槽,将ajax_data的title、workers和exp_t属性分别绑定到三个不同的具名插槽。 则调用者的代码为: <WorkerTableEx> <template #header="parame"> <h3>部门:{{ parame.title }}</h3> </template> <template #footer="parame"> <p>导出时间:{{ parame.exp_t }}</p> </template> <template #content="parame"> <table id="main"> <thead> <tr> <th scope="col">员工号码</th>...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。