初学者新手入门

Vue3的案例实例教程很少,官方网站案例不大好整,除此之外由于PythonDjango也掌握了,培训学习这一有一些让人的双眼乱。Vue新新项目创建后,在public文档文件目录下面自动生成了一个index.htm,里面有一个div ,这就是简单案例中务必 mount的安全通道,整了半天才发现。
Vue程序流程步骤的安全通道,是main.js文件,里面要开展以下工作中中。

导入createApp

Import createApp from "vue"
注意这一vue,我的掌握应该是js/vue.js这一文档

导入待添充index.html中app标识的Vue文档

import App from "./views/Home.vue"
注意这一Home.vue就写全了,它在src/views文件文件目录下存放。

申明App并添充案例

createApp(App).mount("#app")
上面的命令很强悍,一是申明用Home.vue文档中name:”App”的export default转换成一个网页页面网页页面操纵控制模块,并把它的內容添充到的div中,转换成网页页面网页页面供顾客运用。

案例:Vue模块置入

一般的Vue运用就别说话,大伙儿讲一个实际使用中采用模块化设计设计方案设计开发应用十分广泛的方法 :Vue文档置入运用。

场景

在主页上定制一个Button,点一下后掩藏或说明一个区别內容,该地域可以是管理方法管理权限申明,还能够是别的信息。

定制Modal.vue

位置:src/views/Modal.vue
编号:
<template> <div class="modal"> <slot></slot> </div> </template>
普遍难题:这里有一个slot命令,是Vue中用以承后爸模块待说明的內容,即这一modal的Div下面,务必 说明的內容,我的掌握,父级引进时,申明一个moda,接着加一个标志项,该项內容很有可能在Modal模块中继承和说明。

主界面的template

文档: src/views/Home.vue
<template> <button @click="onModalClick">{{modalFlag?"Close modal":"Open Modal"}}</button> <modal v-if="modalFlag"> <p>Modals would be appeAred here when modalFlag is true.</p> </modal> </template>
注意:这里的moda,是Modal。vue这一子构件中定义的,在主文档中使用时,并不一定再定义和引进。

主界面中的script申明

务必 申明和引进以下一部分內容:
import Modal from "./Modal.vue" import { ref } from "vue";
注意由于Modal.vue和Home.vue都是在一个views文件文件目录下,因此这一方式是文档目录,注意别方式出错找不到module了呢。

默认关键主要参数导出

//exports default export default { name:"Home", components:{ Modal }, setup(){ const modalFlag=ref(false); const onModalClick=()=>{ modalFlag.value=!modalFlag.value; } return { modalFlag, onModalClick } } }
上面一段编号中务必 注意的是:

默认导出

export default申明,default是否能够修改,如何改,并没有获得相关信息内容。

name

name的值一定要有,这个是import 的总体目标,可以自定,还能够与涵数名称不一致,建议保持一致吧。

components申明

当运用置入时,尽量将导入的构件作为子构件给与申明,这里有多少个可以导入多少个,比如广泛的footer、nav、logo、copyright等。

setup()

一定无须太英文化艺术逻辑性逻辑思维,并并不是setups,注意这儿边存储所有的网站网页页面数据信息信息内容元素,可以是简单数据信息ref,还能够是错综复杂的reactive,数据信息要交给template,尽量return相对性应数据信息,仅有return出的数据信息template才能够一切正常运用。

箭头符号涵数

这个是JS的坑,融进吧,可以用以基本参数选值,还能够无参函数声明。

归纳

Vue3初学者搞一搞清晰的流程绝大多数就是这类。要具体运用,也是有很多事情要整,但起了第一步。