![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端-VUE
文章平均质量分 53
VUE相关学习
chuntian_tester
路漫漫其修远兮,吾将上下而求索。
展开
-
Vue----axios发起异步请求
axios是vue中专门用来发起异步请求的库,可以理解为python中的requests库,java中的rest-assured库。1.安装axioscnpm install axios -S2.使用axios.get(url) :发起请求.then():请求成功需要做的事.catch():请求失败需要做的事要修改data()中的属性,此处用箭头函数来指定this对象,否则,this.xxx修改的是.then()中的function对象。1.往往我们可以把这类api的请求原创 2022-05-23 21:22:57 · 1179 阅读 · 0 评论 -
Vue----路由Vue router
根据官方文档说明安装:npm:npm install vue-router@4cnpm install vue-router@4yarn:yarn add vue-router@4我们可以从github上面下载写stars比较多的示例下来参考如何使用挑选热度最高的,进去查看examples示例将项目clone下来后打开,就可以参考里面vue-router的示例了。查看示例demo:将demo使用到项目中项目中使用router:.原创 2022-05-23 10:23:47 · 371 阅读 · 0 评论 -
Vue----组件间传值与slot插槽
1.父组件给子组件传值在父组件App.vue中定义属性,然后将属性传给子组件2.子组件获取父组件传递过来的数据:props:{}原创 2022-05-21 21:52:12 · 7832 阅读 · 1 评论 -
Vue----局部组件与全局组件
局部组件:局部组件的使用前提是:在根组件App.vue中导入,声明,引用后才能使用,不导入,则不能使用。全局组件:在入口函数main.js中声明该组件为全局组件后,在任意子组件中可直接使用该全局组件,不用再经历导入--->声明--->引用的流程了。示例:vue2中定义全局组件:import Vue from 'vue'import TkBadge from './components/TkBadge'import App from './App.vue'Vue.comp原创 2022-05-21 21:29:26 · 1999 阅读 · 0 评论 -
Vue----Vue实例生命周期created,mounted钩子
在vue实例的整个生命周期过程中,有几个钩子函数可设置:beforeCreate,created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroy.created: vue内部初始化的事件可以定义在created函数中,类似于测试框架中的setup/before.mounted:vue实例挂载(示例加载到DOM树中)完成,模版中的html渲染到了页面中,此时一般可以做一些axios操作,mounted也只会执原创 2022-05-21 21:02:06 · 2400 阅读 · 0 评论 -
Vue---v-bind单向绑定与v-model双向绑定
v-bind是单向绑定,数据只能由model流向view,不能从view流向model; v-model,数据既能从view流向model,也能从model流向view,是为双向绑定,我们可以将后台的查询数据等操作,通过axios请求,放在created或者mounted等钩子函数中,查询到的数据可以处理后自动传给view层。1.创建login.vue组件<template> <div class="login"> <form method="post".原创 2022-05-21 20:44:30 · 3079 阅读 · 0 评论 -
Vue----methods定义js函数并使用
可以在组件中的script标签中定义methods:{},在methods中定义函数,并通过v-on:click绑定该函数为点击事件,在对象被点击时就会自动触发执行该js函数,达到动态效果。示例:v-on:click="xxx"可用@click="xxx"代替<template> <div class="msg"> <span v-bind:title="truth">chuntian is hansome!</span> <原创 2022-05-20 13:52:20 · 2863 阅读 · 1 评论 -
ElementUI-----UI框架
ElementUI是由饿了么团队开源的UI框架,并于Vue完美契合。原创 2022-05-17 20:43:50 · 62484 阅读 · 3 评论 -
Vue 基础
1.<span title="xxxx"></span>标签:当被span标签包裹时,前端将鼠标放在控件上就能显示出其title属性:2.v-bind: 将数据绑定为属性值;{{truth}}将数据插入展示。可以缩写为:v-xxx开头的叫Vue指令效果:3. v-if:条件判断控制,每次都会重新删除和创建元素(开销较大) v-if=true 效果: v-if=fal......原创 2022-05-17 00:14:55 · 2652 阅读 · 0 评论 -
Vue框架----一个js框架
一.简介:1.Vue.js特点 前端三大框架Angular.js,React.js,Vue.js;Vue.js,前端主流框架之一;使用gzip压缩后只有20kb左右;Introduction | Vue.js自动响应式更新:只需关注前端业务逻辑,无需操作DOM。高级特性:国人开发,解耦视图与数据;可复用组件前端路由状态管理......原创 2022-05-15 22:49:31 · 873 阅读 · 1 评论