【Vue.js實現前后端分離架構中前端頁面搭建】

九、Vue的事件處理

Vue的事件都是使用 v-on:事件類型 進行綁定。也可以使用@事件類型進行操作。其中事件類型和之前學習jQuery中事件名稱是一樣。

示例中都是以點擊事件為例。

1. 直接操作屬性值

代碼示例中通過點擊按鈕對counter值加一。下面<p>中顯示屬性值。所以會出現點擊按鈕后下面數字在變化的效果

<template><div id="app"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div> </template><script>export default {name: 'App',data() {return {counter: 0}} } </script>

也可以把上面的v-on：click換成@click。

2. 事件處理方法

Vue中事件也可以綁定給特定的方法進行處理。

@click取值是方法名稱

methods是固定屬性。里面定義了多有事件能綁定的方法。

jqk:function(event)中

jqk 是方法名。

event是方法形參，在js中方法形參名稱隨意。只要@click中使用沒有參數的方法時，都會默認傳遞事件對象。如果方法中不使用事件對象，function里面就不需要寫event了，在Vue中變量聲明后必須使用。

<template><div id="app"><button @click="jqk">click</button></div> </template><script>export default {name: 'App',data(){return {field:"值"};},methods:{jqk:function (event) {// this是當前Vue對象alert(this.field);if(event){alert(event.target.tagName)}}} } </script>

3. 事件傳參

事件傳參只需要在調用方法時加上括號和要傳遞的參數就可以了。

注意：

字符串值必須有單引號。

沒有單引號參數(field)，調用data()中屬性

方法中不需要使用事件對象時就不寫$event。但是如果需要使用事件對象，必須手動傳遞事件對象，且必須叫做$event，$event是全局Vue對象原型(prototype)里面的屬性。

<template><div id="app"><button @click="jqk('name',$event)">click</button><button @click="jqk(field,$event)">click</button></div> </template><script>export default {name: 'App',data(){return {field:"值"};},methods:{jqk:function (name,event) {alert("name:"+name);if(event){alert(event.target.tagName)}}} } </script>

十、組件

組件：如果項目中多次用到類似效果，就可以把這個效果進行自定義組件。

新建項目后默認存在HelloWorld.vue就是一個組件。

import Helloworld .... 組件文件必須導入才能使用。其中Helloworld為自定義名稱，通過這個名稱就可以調用對應組件。如果import時直接寫組件名（大小寫相同）IDEA會提升生成組件的路徑，所以一般習慣上都是把名稱定義為組件文件名。

components: 組件文件只import是不能被使用的。必須在components中注冊組件，注冊后在<template>中就可以通過組件名直接引用組件了。在<template>中組件以標簽形式存在，標簽名為組件名。其中msg是在Helloworld中定義的props參數，表示需要傳遞給組件的數據。

1. 新建vue文件

在Vue中組件就是可復用的頁面內容。以.vue文件形式存在。

在src/components中新建一個文件。名稱任意。示例中叫做MyComponent.vue。

在Vue中組件的文件名多使用大駝峰。

{{jqk}} 獲取組件傳遞參數的值

props:定義組件傳遞的參數名稱和類型

<template><div><div>這是一個組件</div><div>{{jqk}}</div></div> </template><script>export default {name: "MyComponent",props: {jqk: String}} </script><style scoped></style>

2. 修改App.vue

<MyComponent>就是下面定義的組件名稱。jqk是參數名

import 導入組件并設置名稱為MyComponent

components 聲明組件

<template><div id="app"><MyComponent jqk="這是傳遞的內容"/></div> </template><script>import MyComponent from "@/components/MyComponent";export default {name: 'App',components:{MyComponent} } </script>

十一、路由

組件和頁面的區別？

組件和頁面文件中內容是完全相同，唯一區別是組件可能被多次使用，import時會給組件定義個名稱，而頁面文件可能只使用一次，import時就不需要定義名稱。在項目中為了區分頁面和組件，把組件放在components文件夾而頁面放在pages（名稱隨意，一般多叫pages）文件夾下。

為什么使用路由?

在項目中創建了First.vue和Second.vue。如果按照組件方式進行操作這個兩個頁面中數據固定顯示在App.vue中。但是我們知道正常項目都是通過不同的URL控制顯示不同頁面。在SPA項目中也是需要通過不同的URL在App.vue中顯示不同的數據。

現在缺少一個可以通過URL控制哪個頁面顯示在App.vue中的功能/組件。路由就是做這件事情的。

什么是路由？

在Vue中路由就是控制顯示哪個頁面。通過路由顯示的頁面是顯示在App.vue中的，這符合SPA，當更改URL后只改變App.vue頁面中路由對應的部分的內容，也就是說通過路由顯示時也是屬于局部刷新效果。

在App.vue中通過<router-view/>顯示路由內容。

簡單一句話說明：通過識別URL顯示頁面的功能。

1. 安裝路由依賴

在IDEA中的terminal面板運行命令。--save表示把添加的依賴寫入到package.json。如果沒有--save效果上也可以，但是加上可以更好的知道項目都使用了哪些組件。

使用terminal時也需要注意下，命令是否在當前項目的根路徑下。

運行成功后會在package.json中多了router相關依賴。

2. 新建兩個頁面

在src下新建了page文件夾。在文件夾下新建了兩個.vue的頁面

頁面內容也只是寫了字符串first。另一個頁面first換成second，其他都相同。

此時這兩個頁面是無法訪問的。

<template><div>first</div> </template> <script>export default {name: "First"} </script> <style scoped> </style>

3. 修改main.js

import Vue from 'vue' import App from './App.vue' // 導入路由依賴。安裝了vue-router組件后系統帶有的依賴。 import VueRouter from 'vue-router' // 導入兩個頁面 import First from "@/pages/First"; import Second from "@/pages/Second";Vue.config.productionTip = false; // 使用路由 Vue.use(VueRouter); // 創建路由對象。new VueRouter為上面import設置的名稱 // 路由對象名稱，必須是router。其他命名都無法提供路由表功能，頁面拋出異常： // TypeError: Cannot read property 'matched' of undefined const router = new VueRouter({// 沒有history，訪問URL會有#mode:"history",routes:[{path:"/first",component:First},{path:"/second",component:Second}] });new Vue({// 使用router對象router,render: h => h(App), }).$mount('#app')

4. 修改App.vue

必須要有<router-view/> 否則無法顯示路由控制的頁面。

<template><div id="app"><router-view/><MyComponent jqk="這是傳遞的內容"/></div> </template>

5 優化結構

把main.js中和路由相關的內容放到一個單獨的js文件中。這樣維護更好。

5.1 編寫index.js文件

在src下新建router文件夾，在文件夾中新建index.js。

注意文件的第一行和最后一行。

// 必須有這個導入，否則使用路由報錯 import Vue from 'vue' // 導入路由依賴 import VueRouter from 'vue-router' // 導入兩個頁面 import First from "@/pages/First"; import Second from "@/pages/Second";// 使用路由 Vue.use(VueRouter); // 創建路由對象。new VueRouter為上面import設置的名稱 const router = new VueRouter({// 沒有history，訪問URL會有#mode:"history",routes:[{path:"/first",component:First},{path:"/second",component:Second}] }); // 必須有這個導出，否則main.js無法獲取router對象 export default router

5.2 修改main.js

引入router下index.js文件。

import Vue from 'vue' import App from './App.vue' // Vue中index.js是默認js文件名。下面引用時省略了index import router from "@/router"; Vue.config.productionTip = falsenew Vue({router,render: h => h(App), }).$mount('#app')

十二、發起網絡請求和跨域處理

Vue中使用axios進行網絡請求。使用起來和jQuery中$.get和$.post功能類似。

給定服務端控制器代碼。可以接收name和age參數，設置到Map中并返回。

一定要注意：控制器上有跨域注解。前后端分離都是跨域請求。且端口不能是8080端口。

@RestController @CrossOrigin public class DemoController {@RequestMapping("/demo")public Map<String,Object> demo(String name ,Integer age){Map<String,Object> result = new HashMap<>();result.put("name",name);result.put("age",age);return result;} }

1. 安裝依賴

2. get請求

<template><div>發起請求</div> </template><script>import axios from "axios"export default {name: "axios", // 頁面加載事件。mounted() {axios.get("http://localhost:8081/demo?name=bjsxt&age=12").then(res => {console.log(res.data);}).catch(error => {console.log(error);})}} </script><style scoped></style>

3. post方式

下面演示了使用POST獲取值后把name顯示在頁面的過程。

注意：

POST也支持URL重寫方式傳參。通過?和&傳參數。

如果使用下面這種方式傳參必須要結合querystring使用。

<template><div>發起請求獲取到的結果。{{name}}</div> </template><script>import axios from "axios"import qstring from "querystring"export default {name: "axios",data() {return {name: ""};},mounted() {axios.post("http://localhost:8081/demo", qstring.stringify({name: "張三",age: 12})).then(res => {console.log(res.data.name);this.name = res.data.name;}).catch(error => {console.log(error);})}} </script><style scoped></style>

4. axios全局設置

如果使用上面的方式，將需要在每個頁面中都導入axios。

也可以全局綁定axios。

4.1 修改main.js

Vue.prototype.$jqk=axios 中

Vue 全局Vue對象

prototype 原型。設置全局屬性。

$jqk 隨意設置的名稱。

axios 依賴對象名

import Vue from 'vue' import App from './App.vue' // Vue中index.js是默認js文件名。下面引用時省略了index import router from "@/router"; import axios from "axios" import qstring from "querystring"Vue.prototype.$axios = axios Vue.prototype.$qstring=qstring Vue.config.productionTip = falsenew Vue({router,render: h => h(App), }).$mount('#app')

4.2 頁面中寫法

在任何頁面中都可以直接使用this.$jqk進行設置。

<template><div>這是首頁。所有內容都顯示在這個頁面中。SPA<br/>姓名：{{name}}, 年齡:{{age}}</div></template><script>export default {data() {return {name:"",age:0};},mounted() {this.$axios.post("http://localhost:8081/demo",this.$qstring.stringify({name:"北京尚學堂",age:15})).then(response => {this.name = response.data.name;this.age = response.data.age}).catch(error => {console.log(error)})}} </script>

十三、請求代理

在Vue中發起網絡請求時URL都使用完整URL，可以把公共URL提出，提出后發起網絡請求時URL只寫路徑部分。省略協議、ip、端口。

如果沒有請求代碼每次在瀏覽器開發者工具看見真實請求服務器地址，這樣話就把服務器暴露給客戶端了。使用代理后只能看見代理前請求，保護真實服務器地址。

在項目根路徑（不是src）下新建vue.config.js。名稱固定

這個配置文件操作完成后必須重啟

發起請求時可以使用/api/xxx 的形式

在開發者工具看見的請求

總結

以上是生活随笔為你收集整理的vue click事件_Vue.js---实现前后端分离架构中前端页面搭建（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。