佛山网站建设冯哥,建网站点击率,专门做折扣的网站,网站速成【Vue.js实现前后端分离架构中前端页面搭建】九、Vue的事件处理Vue的事件都是使用 v-on:事件类型 进行绑定。也可以使用事件类型进行操作。其中事件类型和之前学习jQuery中事件名称是一样。示例中都是以点击事件为例。1. 直接操作属性值代码示例中通过点击按钮对counter值加一。…【Vue.js实现前后端分离架构中前端页面搭建】九、Vue的事件处理Vue的事件都是使用 v-on:事件类型 进行绑定。也可以使用事件类型进行操作。其中事件类型和之前学习jQuery中事件名称是一样。示例中都是以点击事件为例。1. 直接操作属性值代码示例中通过点击按钮对counter值加一。下面p中显示属性值。所以会出现点击按钮后下面数字在变化的效果templatediv idappbutton v-on:clickcounter 1Add 1/buttonpThe button above has been clicked {{ counter }} times./p/div
/templatescriptexport default {name: App,data() {return {counter: 0}}
}
/script也可以把上面的v-onclick换成click。2. 事件处理方法Vue中事件也可以绑定给特定的方法进行处理。click取值是方法名称methods是固定属性。里面定义了多有事件能绑定的方法。jqk:function(event)中jqk 是方法名。event是方法形参在js中方法形参名称随意。只要click中使用没有参数的方法时都会默认传递事件对象。如果方法中不使用事件对象function里面就不需要写event了在Vue中变量声明后必须使用。templatediv idappbutton clickjqkclick/button/div
/templatescriptexport 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)里面的属性。templatediv idappbutton clickjqk(name,$event)click/buttonbutton clickjqk(field,$event)click/button/div
/templatescriptexport 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:定义组件传递的参数名称和类型templatedivdiv这是一个组件/divdiv{{jqk}}/div/div
/templatescriptexport default {name: MyComponent,props: {jqk: String}}
/scriptstyle scoped/style2. 修改App.vueMyComponent就是下面定义的组件名称。jqk是参数名import 导入组件并设置名称为MyComponentcomponents 声明组件templatediv idappMyComponent jqk这是传递的内容//div
/templatescriptimport 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其他都相同。此时这两个页面是无法访问的。templatedivfirst/div
/template
scriptexport default {name: First}
/script
style scoped
/style3. 修改main.jsimport 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/ 否则无法显示路由控制的页面。templatediv idapprouter-view/MyComponent jqk这是传递的内容//div
/template5 优化结构把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 router5.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 MapString,Object demo(String name ,Integer age){MapString,Object result new HashMap();result.put(name,name);result.put(age,age);return result;}
}1. 安装依赖2. get请求templatediv发起请求/div
/templatescriptimport axios from axiosexport default {name: axios,
// 页面加载事件。mounted() {axios.get(http://localhost:8081/demo?namebjsxtage12).then(res {console.log(res.data);}).catch(error {console.log(error);})}}
/scriptstyle scoped/style3. post方式下面演示了使用POST获取值后把name显示在页面的过程。注意POST也支持URL重写方式传参。通过?和传参数。如果使用下面这种方式传参必须要结合querystring使用。templatediv发起请求获取到的结果。{{name}}/div
/templatescriptimport axios from axiosimport qstring from querystringexport 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);})}}
/scriptstyle scoped/style4. axios全局设置如果使用上面的方式将需要在每个页面中都导入axios。也可以全局绑定axios。4.1 修改main.jsVue.prototype.$jqkaxios 中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 querystringVue.prototype.$axios axios
Vue.prototype.$qstringqstring
Vue.config.productionTip falsenew Vue({router,render: h h(App),
}).$mount(#app)4.2 页面中写法在任何页面中都可以直接使用this.$jqk进行设置。templatediv这是首页。所有内容都显示在这个页面中。SPAbr/姓名{{name}}, 年龄:{{age}}/div/templatescriptexport 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 的形式在开发者工具看见的请求
