入门
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入门搞明白的流程基本上就是这些。要具体使用,还有很多事情要整,但起了第一步。