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

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

bnbplayer2个月前 (02-08)Web165

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

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

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

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

没有更早的文章了...

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

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

VUE3快速入门(2)——自定义组件

VUE3快速入门(2)——自定义组件

本文介绍了VUE组件的基本使用,包括定义组件、导出组件、引入组件、使用组件的基本过程,尤其是特别提示了组合式API与选项式API交互的问题。 1. 准备工作 用VSCode打开上节课“VUE3快速入门(1)——搭建开发环境”的文件夹。在VSCode选择“终端”、“新建终端”,准备用命令行执行npm相关指令。打开/src/app.vue文件,删除掉顶部代码 import TheWelcome from ‘./components/TheWelcome.vue’ 同时删除约17行的<TheWelcome />的标签,该步骤是为了删除对TheWelcome组件的引用,稍后将替换成自己编写的组件。 2. 新建一个组件2.1 新建文件在/src/components目录下新建一个文件:MyComp.vue 2.2 添加组件模板代码模板代码用于描述模板架构,由H5标签组成。模板代码写在<template>标签内,Vue2版本要求必须被<div>标签包裹,Vue3则无此要求。 <template> <h1>门禁管理系统</h1> <h2>作者:{{ author }},联系邮箱:{{ mail }},电话:{{ tel }}</h2> </template> 2.2 添加组件控制代码控制代码用于描述控制逻辑,实现相关功能。整体结构是一个被导出的类。在Vue3中,内部数据、方法、计算属性、传入属性等均写在setup方法内,目前先使用内部数据。 <script lang="ts"> export default { //组件名称 name: "MyComp", //组合式API setup() { let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; //返回外部需要的数据 return {author, mail, tel}; //上述代码返回的是一个键值对,当key=value时,可省略其中一个。否则需要写成key: value的形式,则外部需要通过key获取值:{{key}} } } </script> 2.3 添加组件样式代码控制代码用于描述组件外观,如字号、字体等,由css代码组成。样式代码写在<style>标签内。 <style scoped> font-size: 16px; </style> style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 3. 调用该组件3.1 引入组件在App.vue中的<script>标签内,增加语句: import MyComp from './components/MyComp.vue'; 3.2 使用组件在App.vue的<template>标签内,像使用H5标签那样,直接在期望展示的位置或者直接在刚才删掉<TheWelcome>处写上 <MyComp></MyComp> 即可。或简写为 <MyComp/> 4. 执行npm能热更新。当编译、构建完成无误后,页面将出现“作者:Jesse,联系邮箱:3898xxxx@qq.com,电话:136****615”的字样 5. 总结 组件分为<template>、<script>、<style>三个部分。<template>定义组件的骨架,<script>定义组件的业务逻辑,<style>定义样式。Vue2下<template>内的所有标签必须被<div>标签包裹,Vue3无此要求。export default用于导出该组件以便复用,其本质上是导出了一个类。如果做过C#、MFC的传统桌面端的开发,可以将组件理解为控件。Vue3下,外部需要的数据(包括内部数据、计算属性、方法等)均写在setup内,且通过return返回。使用组件需要先import引入,最后像使用H5标签一样调用该组件。建议所有组件样式都加上scoped属性,避免污染其他组件样式。 6. 特别提示 setup方法内不允许用this关键字。Vue2的data、methods等可以用this,且可以通过该关键字获取setup里的内容,但setup不能反过来获取data、methods等里面的内容。不要Vue2/3混用,即Vue3不要再用选项式API。 7. 拓展学习与思考 使用组件有什么好处?从创建组件到使用组件的步骤是什么样的?选项式API与组合式API有什么区别?...

VUE3快速入门(3)——方法与事件

VUE3快速入门(3)——方法与事件

本文讲述了如何在自定义组件中定义并调用方法,以及绑定DOM事件响应的方法。 1. 自定义方法1.1 定义一个方法在<script>标签内的setup方法内增加一个add方法,该方法传入两个参数,用于求和: function add(a: number, b: number): number{ return a + b; } 同时,将add方法暴露(返回): return {author, mail, tel, add};//author, mail, tel是上一节定义的变量 1.2 调用方法在<template>标签内,适当位置增加一个标签,用于调用方法: <h2>调用add方法: {{add(1,1)}}</h2> 1.3 查看结果编译、构建成功后,浏览器新出现“调用add方法: 2”的字样,说明求和方法被成功调用。 2. 绑定事件前端开发少不了处理DOM事件,如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。 2.1 绑定一个事件在<template>标签内,适当位置增加一个按钮,绑定click方法: <button @click="show(tel)">点我</button> 单击会调用test函数,并传入tel的值,该值在上一节已经定义: let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; 2.2 完善事件处理方法在<script>标签内setup方法内,再增加show方法,该方法具有一个传输参数: function show(content: any): any { alert(content); } 同时记得暴露该方法: return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量 2.3 执行编译、构建成功后,浏览器会出现一个按钮,点击按钮,将弹出对话框,其内容是tel变量的内容。 3. 总结 方法与变量一样需要写在methods属性内。@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。除了click外,还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。 4. 拓展学习与思考 除了v-on指令外,学习v-if、v-show、v-for的用法。尝试处理submit、onfocus等其他常见DOM事件。...

VUE3快速入门(4)——Setup语法糖与表单取值

VUE3快速入门(4)——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指令仅能用于表单相关的标签。...

发表评论

访客

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