企业做网站步骤,个人网页设计与制作论文结束语,网站建设与管理logo,防城港门面做网站的组件通讯 组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件#xff1f;父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 … 组件通讯 组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 目前我们还是使用html开发,因为使用模板的话,我们是初步认识vue,需要深入了解 父传子 首先我们需要确保我们的定义的组件是没有问题的,我们定义了一个组件 my-aaa 这个是子组件,而我们的父组件就是app这个组件
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript src../static/vue.global.js/script/headbodydiv idappmy-aaa/my-aaa/divtemplate idtmp/templatescriptconst appVue.createApp({components: {my-aaa:{template:#tmp,}},})app.mount(#app)/script/body
/html 我们想要从父组件传值给子组件,需要给父组件定义一个数据,假如父亲有100元,他要给儿子,他儿子就是 my-son,如何给他呢? 我们需要用到绑定指令,绑定父亲的100元,然后有一个自定义的属性将父亲的100元赋值给自定义属性 可以这样理解在父亲心里100块钱是钱,而父亲给儿子之后,可能儿子不觉得是钱,而是能买很多东西 父亲给儿子100块钱,儿子是需要去接住的所以我们就使用到了 props属性,用于接收外部传来的数据,因为可能不只是一个数据所以使用数组的形式
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript src../static/vue.global.js/script/headbodydiv idapp父亲有 {{money}}元 brmy-aaa :sonmoneymoney/my-aaa/divtemplate idtmp儿子问爸爸要了{{sonmoney}}元/templatescriptconst appVue.createApp({data(){return{money:1000}},components: {my-aaa:{template:#tmp,props:[sonmoney]}},})app.mount(#app)/script/body
/html 子传父 儿子传给父亲,这时我们是需要有一个点击事件来完成的, 因为定义一个按钮,点击之后,会将这个方法,与父组件的方法绑定 emits: 我们自定义声明的事件,是需要在emits中声明使用的,也可以不加,但是有时候会报警告 步骤: 当我们点击按钮时,emit(自定义事件名,参数) 会与我们父组件的getToy进行绑定,点击儿子内的按钮,我们的父组件定义的getToy方法就会生效,在儿子内传的参数在getToy的参数内
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript src../static/vue.global.js/script/headbodydiv idapp父亲的玩具: {{toyson}}xue-cheng send-toygetToy/xue-cheng/divtemplate idson儿子的玩具: {{toy}} brbutton click$emit(send-toy,toy)儿子给父亲玩具/button/templatescriptconst app Vue.createApp({data() {return {toyson: }},methods: {getToy(val) {this.toyson val}},components: {xue-cheng: {data() {return {toy: 奥特曼}},emits: [send-toy],template: #son}}})app.mount(#app)/script/body
/htmlAxios Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 中文文档 https://www.axios-http.cn/docs/intro 他与Ajax的使用是很相似的,但是ajax只支持get和post请求,我们的Axios是基本所有的请求都支持的,所以我们需要使用到Axios get 我们直接上案例 首先我们需要的后端需要先可以获取我们数据,这个参数是我们定义的分页,这里可以和我不一样只要能访问到数据就可以 首先我们先要使用axios,因为我们是使用html编写的,所以需要有一个axios的包 这里我们有网的话,可以使用外网导入资源
script srchttps://unpkg.com/axios/dist/axios.min.js/script 这里我们实现的是,点击按钮之后,向后端请求数据,请求成功之后,将数据放入我们定义的数据内,然后进行展示
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript src../static/vue.global.js/scriptscript src../static/axios.min.js/script/headbodydiv idapp{{empList}}button clickgetEmp获取数据/button/divscriptconst app Vue.createApp({data() {return {empList: []}},methods: {getEmp() {axios.get(http://localhost:8082/queryAll, {params: {currPage: 1,pageSize: 2}}).then(res{console.log(res)this.empListres.data.list})}}})app.mount(#app)/script/body
/html这里我们可以了解到,我们的axios的使用 axios.请求方式请求路径,{ 配置 }.thenfunction (响应){ 操作 } 这里明显是说我们是存在跨域问题的,是浏览器拦截了我们,不让我们进行跨域,这里可以理解为,你要去一个陌生人家里拿东西,难道不会被拦住吗 出于浏览器的同源策略限制。同源策略Sameoriginpolicy是一种约定它是浏览器最核心也最基本的安全功能如果缺少了同源策略则浏览器的正常功能可能都会受到影响 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 这里我们可以在后端解决一下跨域在你想要跨域的方法上或者类上添加CrossOrigin注解即可 这就是我们响应的数据,我们想要的数据在data里
当我们点击按钮之后会将我们的数据展示出来
post 如果我们使用post的请求是有一点不一样的我们就用这个接口请求我们的数据 首先我们需要知道post请求的传参方式是传的json数据,而我们后端是一个java对象,所以我们需要使用一个注解,将我们的json格式的数据转换成java对象 RequestBody 放在参数前面 那我们在前端是如何定义一个json数据传到前端呢,我们可以看到与get相比起是不用加params属性的 axios.post(http://localhost:8082/add, {stuname: niuer,sex: 男}).then(res{console.log(res.data)}) 代表我们已经成功了
VueRouter 客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时URL 会随之更新但页面不需要从服务器重新加载 Vue Router 基于 Vue 的组件系统构建可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件 首先我们先定义两个组件,当我们点击 a的时候出现 A组件,当点击b的时候出现B组件
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript src../static/vue.global.js/script/headbodydiv idapp/divtemplate idah1这是一个组件A/h1/templatetemplate idbh1这是一个组件B/h1/templatescriptconst app Vue.createApp({})app.mount(#app)/script/body
/html 我们是需要通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件要使用路由需要引入vue的路由资源,我们的路由不可能是有一个路由的,我们需要根据格式来编写配置路由,如果监听到你要去 /a的话,就给你展示a组件,b组件也是
const routerVueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes:[{path:/a,component:{template:#a}},{path:/b,component:{template:#b} }]}) 不同于常规的 a 标签我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL处理 URL 的生成、编码和其他功能,RouterLink的本意还是a标签, RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中你可以把它放在任何地方但它需要在某处被导入否则 Vue Router 就不会渲染任何东西。 当你点击a这个a标签的时候,Vue的路由会监听到你要去到 /a 下,/a在你配置的路由中,指向了一个组件,他会给你展示那个组件,但是要展示在哪里也是需要你自己定义,使用RouterView div idapprouter-link to/aa/route-link brrouter-link to/bb/route-linkrouter-view/route-view/div
