网站建设规划方案模板,wordpress remove js,鹰潭北京网站建设,网络营销与直播电商✅作者简介#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者#xff0c;修心和技术同步精进。 #x1f34e;个人主页#xff1a;Java Fans的博客 #x1f34a;个人信条#xff1a;不迁怒#xff0c;不贰过。小知识#xff0c;大智慧。 #x1f49e;当前专栏… ✅作者简介2022年博客新星 第八。热爱国学的Java后端开发者修心和技术同步精进。 个人主页Java Fans的博客 个人信条不迁怒不贰过。小知识大智慧。 当前专栏前端案例分享专栏 ✨特色专栏国学周更-心性养成之路 本文内容一文吃透 Vue 框架教程上 文章目录 1. Vue 引言2. Vue入门2.1 下载Vue.js2.2 Vue第一个入门应用 3. v-text和v-html3.1 v-text3.2 v-html 4.vue中事件绑定(v-on)4.1 绑定事件基本语法4.2 Vue中事件的简化语法4.3 Vue事件函数两种写法4.4 Vue事件参数传递 5.v-show v-if v-bind5.1 v-show5.2 v-if5.3 v-bind5.4 v-bind 简化写法 6.v-for的使用7 .v-model 双向绑定 MVVM架构 双向绑定机制8. 事件修饰符8.1 stop事件修饰符8.2 prevent 事件修饰符8.3 self 事件修饰符8.4 once 事件修饰符 9. 按键修饰符9.1 enter 回车键9.2 tab 键 10. Axios 基本使用10.1 引言10.2 Axios 第一个程序10.2.1 GET方式的请求10.2.2 POST方式请求10.2.3 axios并发请求10.2.4 拦截器 11. Vue 生命周期 1. Vue 引言 渐进式 JavaScript 框架 --摘自官网 # 渐进式1. 易用 html css javascript2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性# 总结Vue 是一个javascript 框架 js 简化页面js操作bootstrap 是一个css框架 封装css# 后端服务端开发人员: Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM # Vue 作者尤雨溪 国内的 2. Vue入门
2.1 下载Vue.js
//开发版本:!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script//生产版本:!-- 生产环境版本优化了尺寸和速度 --script srchttps://cdn.jsdelivr.net/npm/vue/script2.2 Vue第一个入门应用
div idapp{{ msg }} {{username}} {{pwd}}brspan{{ username }}h1{{ msg }}/h1/span/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app, //element 用来给Vue实例定义一个作用范围data:{ //用来给Vue实例定义一些相关数据msg:欢迎你,期待你的加入!,username:hello Vue!,pwd :12345,}});/script
#总结: 1.vue实例(对象)中el属性: 代表Vue的作用范围 在Vue的作用范围内都可以使用Vue的语法 2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出 3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等 4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签 3. v-text和v-html
3.1 v-text v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText div idapp classaaspan {{ message }}/spanspan v-textmessage/span/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{message:kgc欢迎您}})/script#总结 1.{{}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
3.2 v-html v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML div idapp classaaspan{{message}}/spanbrspan v-textmessage/spanbrspan v-htmlmessagexxxxxx/span/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{message:a hrefkgc欢迎您/a}})/script4.vue中事件绑定(v-on)
4.1 绑定事件基本语法 div idapph2{{message}}/h2h2 v-textmessage/h2h2年龄:{{ age }}/h2brinput typebutton value点我改变年龄 v-on:clickchangeage/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{message:hello 欢迎来到kgc课堂!,age:23,},methods:{ //methods 用来定义vue中时间changeage:function(){alert(点击触发);this.age//代表当前vue实例this.aa();//代表调用方法},aa:function(){}}})/script#总结: 事件 事件源:发生事件dom元素 事件: 发生特定的动作 click… 监听器 发生特定动作之后的事件处理程序 通常是js中函数 1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click 2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名 3.在vue中事件的函数统一定义在Vue实例的methods属性中 4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据 调用methods中相关方法
4.2 Vue中事件的简化语法 div idapph2{{ age }}/h2input typebutton value通过v-on事件修改年龄每次1 v-on:clickchangeageinput typebutton value通过绑定时间修改年龄每次-1 clickeditage/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app, //element: 用来指定vue作用范围data:{age:23,}, //data : 用来定义vue实例中相关数据methods:{changeage:function(){this.age;},editage:function(){this.age--;}} //methods: 用来定义事件的处理函数});/script#总结: 1.在vue中绑定事件时可以通过符号形式 简化 v-on 的事件绑定
4.3 Vue事件函数两种写法 div idappspan{{count}}/spaninput typebutton value改变count的值 clickchangecount/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{count:1,},methods:{/*changecount:function(){this.count;}*/changecount(){this.count;}}});/script在Vue中事件定义存在两种写法
一种是 函数名:function(){}一种是 函数名(){} 推荐
4.4 Vue事件参数传递 div idappspan{{count}}/spaninput typebutton value改变count为指定的值 clickchangecount(23,xiaohei)/div!--引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{count:1,},methods:{//定义changecountchangecount(count,name){this.count count;alert(name);}}});/script#总结: 1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数 5.v-show v-if v-bind
5.1 v-show v-show:用来控制页面中某个标签元素是否展示 div idapp!--v-show: 用来控制标签展示还是隐藏的--h2 v-showfalse欢迎你的加入!/h2h2 v-showshow欢迎你的加入这是vue中定义变量true!/h2input typebutton value展示隐藏标签 clickshowmsg/div
!--引入vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el:#app,data:{show:false,},methods:{//定义时间showmsg(){this.show !this.show;}}})
/script#总结 1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏 2.在v-show中可以通过boolean表达式控制标签的展示和隐藏
5.2 v-if v-if: 用来控制页面元素是否展示 div idapph2 v-iffalsehello/h2h2 v-ifshow欢迎你的加入/h2
/div
!--引入vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el:#app,data:{show:false},methods:{}});
/script5.3 v-bind v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性 div idappimg width300 v-bind:titlemsg v-bind:class{aa:showCss} srckgclogo.jpg alt
/div
!--引入vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el:#app,data:{msg:官方logo!!!!,showCss:true,},methods:{}})
/script5.4 v-bind 简化写法 vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名 div idappimg width300 :titlemsg :class{aa:showCss} :srcsrc altinput typebutton value动态控制加入样式 clickaddCssinput typebutton value改变图片 clickchangeSrc
/div
!--引入vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el:#app,data:{msg:kgc教育官方logo!!!!,showCss:true,src:https://timgsa.baidu.com/timg?imagequality80sizeb9999_10000sec1583490365568di52a82bd614cd4030f97ada9441bb2d0eimgtype0srchttp%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg},methods:{addCss(){this.showCss !this.showCss;},changeSrc(){this.src https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u1925088662,1336364220fm26gp0.jpg;}}})
/script6.v-for的使用 v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种) div idappspan{{ user.name }} {{ user.age }}/spanbr!--通过v-for遍历对象--span v-for(value,key,index) in user{{index}} : {{key}} : {{value}}/span!--通过v-for遍历数组--ulli v-fora,index in arr {{index}} {{a}}/li/ul!--通过v-for遍历数组中对象:key 便于vue内部做重用和排序--ulli v-foruser,index in users :keyuser.id{{index1}} {{ user.name }} {{ user.age }} {{ user.content }}/li/ul/div
!--引入vue--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {user:{name:小陈,age:23},arr:[北京校区, 天津校区, 河南校区],users:[{id:1,name:xiaochen,age:23,content:我曾经也是一个单纯的少年!},{id:2,name:小白,age:23,content:我曾经是一个邪恶的少年!},]},methods: {}});
/script#总结 1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key 7 .v-model 双向绑定 v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制 div idappinput typetext v-modelmessagespan{{message}}/spanhrinput typebutton value改变Data中值 clickchangeValue
/div
!--引入vue--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {message:},methods: {changeValue(){this.messagekgc教育!;}}});
/script#总结 1.使用v-model指令可以实现数据的双向绑定 2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
MVVM架构 双向绑定机制
Model: 数据 Vue实例中绑定数据VM: ViewModel 监听器View: 页面 页面展示的数据8. 事件修饰符 修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制 # 1.常用的事件修饰符.stop 停止.prevent 阻止.self 独自.once 一次8.1 stop事件修饰符 用来阻止事件冒泡 div idappdiv classaa clickdivClick!--用来阻止事件冒泡--input typebutton value按钮 click.stopbtnClick/div
/div
!--引入vue--
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {},methods: {btnClick(){alert(button被点击了);},divClick(){alert(div被点击了);}}});
/script8.2 prevent 事件修饰符 用来阻止标签的默认行为 !--用来阻止事件的默认行为--
a hrefhttp://www.kgcbest.com/ click.preventaClickkgc教育/a8.3 self 事件修饰符 用来针对于当前标签的事件触发 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡 !--只触发标签自身的事件--
div classaa click.selfdivClick!--用来阻止事件冒泡--input typebutton value按钮 click.stopbtnClickinput typebutton value按钮1 clickbtnClick1
/div8.4 once 事件修饰符 once 一次作用: 就是让指定事件只触发一次 !--.prevent : 用来阻止事件的默认行为.once : 用来只执行一次特定的事件--a hrefhttp://www.kgcbest.com/ click.prevent.onceaClickkgc教育/a9. 按键修饰符 作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符 # 按键修饰符.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right9.1 enter 回车键 用来在触发回车按键之后触发的事件 input typetext v-modelmsg keyup.enterkeyups9.2 tab 键 用来捕获到tab键执行到当前标签是才会触发 input typetext keyup.tabkeytabs综合案例
1.备忘录小案例
2.购物车案例
10. Axios 基本使用
10.1 引言 Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax 10.2 Axios 第一个程序
中文网站:https://www.kancloud.cn/yunye/axios/234845
安装: https://unpkg.com/axios/dist/axios.min.js
10.2.1 GET方式的请求 //发送GET方式请求axios.get(http://localhost:8989/user/findAll?namexiaochen).then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});10.2.2 POST方式请求 //发送POST方式请求axios.post(http://localhost:8989/user/save,{username:xiaochen,age:23,email:xiaochenzparkhr.com,phone:13260426185}).then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});10.2.3 axios并发请求 并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果 function getUserAccount() {return axios.get(/user/12345);
}function getUserPermissions() {return axios.get(/user/12345/permissions);
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成
}));10.2.4 拦截器 const instance axios.create({baseURL: http://localhost:8080/,timeout: 1000,headers: {token:123456}});instance.interceptors.request.use(function (config) {console.log(请求进入该方法)
},function (err) {// 请求异常做什么
})instance.interceptors.response.use(function (response) {return response;
},function (err) {//响应错误做什么
})11. Vue 生命周期 Vue 实例生命周期 java 对象生命周期(初始化阶段 运行阶段 销毁阶段) 生命周期钩子 生命周期函数 Vue实例从创建到销毁过程中自动触发一些列函数 Vue生命周期函数(钩子) # Vue生命周期总结
- 1.初始化阶段beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性console.log(beforeCreate: this.msg);},created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法console.log(created: this.msg);},beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译console.log(beforeMount: document.getElementById(sp).innerText);},mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面console.log(Mounted: document.getElementById(sp).innerText);}- 2.运行阶段beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据console.log(beforeUpdate:this.msg);console.log(beforeUpdate:document.getElementById(sp).innerText);},updated(){ //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致console.log(updated:this.msg);console.log(updated:document.getElementById(sp).innerText);},- 3.销毁阶段beforeDestroy(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁},destroyed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁} 码文不易本篇文章就介绍到这里如果想要学习更多Java系列知识点击关注博主博主带你零基础学习Java知识。与此同时对于日常生活有困扰的朋友欢迎阅读我的第四栏目《国学周更—心性养成之路》学习技术的同时我们也注重了心性的养成。
