✅作者简介：2022年博客新星 第八

    
    
    
。热爱国学的Java后端开发者    
    
  ，修心和技术同步精进


     


     


  。

🍎个人主页：Java Fans的博客

🍊个人信条：不迁怒     


     


     
，不贰过
 




 




 
。小知识




 




 




，大智慧   

   

   

。

💞当前专栏：前端案例分享专栏

✨特色专栏：国学周更-心性养成之路

🥭本文内容：一文吃透 Vue 框架教程（上）

1. Vue 引言

渐进式 JavaScript 框架 --摘自官网

# 渐进式 1. 易用 html css javascript 2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性 # 总结 Vue 是一个javascript 框架 js 简化页面js操作 bootstrap 是一个css框架 封装css # 后端服务端开发人员: Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM # Vue 作者 尤雨溪 国内的

2. Vue入门

2.1 下载Vue.js

//开发版本: <!-- 开发环境版本
   

   

 ，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //生产版本: <!-- 生产环境版本     

     

     ，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

<div id="app"> {{ msg }} {{username}} {{pwd}} <br> <span> {{ username }} <h1>{{ msg }}</h1> </span> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app" class="aa"> <span >{{ message }}</span> <span v-text="message"></span> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app" class="aa"> <span>{{message}}</span> <br> <span v-text="message"></span> <br> <span v-html="message">xxxxxx</span> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ message:"<a href=>kgc欢迎您</a>" } }) </script>

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

<div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2> <h2>年龄:{{ age }}</h2> <br> <input type="button" value="点我改变年龄" v-on:click="changeage"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app"> <h2>{{ age }}</h2> <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage"> <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app"> <span>{{count}}</span> <input type="button" value="改变count的值" @click="changecount"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ count:1, }, methods:{ /*changecount:function(){ this.count++; }*/ changecount(){ this.count++; } } }); </script>

在Vue中事件定义存在两种写法：

一种是 函数名:function(){} 一种是 函数名(){} 推荐

4.4 Vue事件参数传递

<div id="app"> <span>{{count}}</span> <input type="button" value="改变count为指定的值" @click="changecount(23,xiaohei)"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ count:1, }, methods:{ //定义changecount changecount(count,name){ this.count = count; alert(name); } } }); </script>

#总结: 1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

5.v-show v-if v-bind

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示

<div id="app"> <!-- v-show: 用来控制标签展示还是隐藏的 --> <h2 v-show="false">欢迎你的加入!</h2> <h2 v-show="show">欢迎你的加入这是vue中定义变量true!</h2> <input type="button" value="展示隐藏标签" @click="showmsg"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app"> <h2 v-if="false">hello</h2> <h2 v-if="show">欢迎你的加入</h2> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ show:false }, methods:{ } }); </script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

<div id="app"> <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="kgclogo.jpg" alt=""> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"官方logo!!!!", showCss:true, }, methods:{ } }) </script>

5.4 v-bind 简化写法

​ vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<div id="app"> <img width="300" :title="msg" :class="{aa:showCss}" :src="src" alt=""> <input type="button" value="动态控制加入样式" @click="addCss"> <input type="button" value="改变图片" @click="changeSrc"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"kgc教育官方logo!!!!", showCss:true, src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg" }, methods:{ addCss(){ this.showCss= !this.showCss; }, changeSrc(){ this.src = ""; } } }) </script>

6.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app"> <span>{{ user.name }} {{ user.age }}</span> <br> <!-- 通过v-for遍历对象 --> <span v-for="(value,key,index) in user"> {{index}} : {{key}} : {{value}} </span> <!-- 通过v-for遍历数组 --> <ul> <li v-for="a,index in arr" > {{index}} {{a}} </li> </ul> <!-- 通过v-for遍历数组中对象 :key 便于vue内部做重用和排序 --> <ul> <li v-for="user,index in users" :key="user.id"> {{index+1}} {{ user.name }} === {{ user.age }} ==== {{ user.content }} </li> </ul> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const 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 id="app"> <input type="text" v-model="message"> <span>{{message}}</span> <hr> <input type="button" value="改变Data中值" @click="changeValue"> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:"" }, methods: { changeValue(){ this.message=kgc教育!; } } }); </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 id="app"> <div class="aa" @click="divClick"> <!--用来阻止事件冒泡--> <input type="button" value="按钮" @click.stop="btnClick"> </div> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: {}, methods: { btnClick(){ alert(button被点击了); }, divClick(){ alert(div被点击了); } } }); </script>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

<!--用来阻止事件的默认行为--> <a href="http://www.kgcbest.com/" @click.prevent="aClick">kgc教育</a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

<!--只触发标签自身的事件--> <div class="aa" @click.self="divClick"> <!--用来阻止事件冒泡--> <input type="button" value="按钮" @click.stop="btnClick"> <input type="button" value="按钮1" @click="btnClick1"> </div>

8.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

<!-- .prevent : 用来阻止事件的默认行为 .once : 用来只执行一次特定的事件 --> <a href="http://www.kgcbest.com/" @click.prevent.once="aClick">kgc教育</a>

9. 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符 .enter .tab .delete (捕获“删除    
    
  ”和“退格     


     


     
”键) .esc .space .up .down .left .right

9.1 enter 回车键

用来在触发回车按键之后触发的事件

<input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

综合案例：

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?name=xiaochen").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:"xiaochen@zparkhr.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知识 

     

     

 。与此同时


 



 



，对于日常生活有困扰的朋友              ，欢迎阅读我的第四栏目：《国学周更—心性养成之路》   




    




    


，学习技术的同时













，我们也注重了心性的养成

  




  




  。