Vue3学习第一例:Vue3架构入门

入门

Vue3的教程很少,官方网站实例不好整,另外由于Python的Django也掌握了,学习这个有些让人眼乱。Vue项目创建后,在public目录下面自动生成了一个index.htm,里面有个div id="app",这就是简单实例中需要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生成一个网页模块,并把它的内容填充到id="app"的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入门搞明白的流程基本上就是这些。要具体使用,还有很多事情要整,但起了第一步。

上一篇:bootstrap用jquery控制模态框


下一篇:jQuery 之 模态编辑框实例(文本获取值与设置值)