✅作者简介：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第一个入门应用
<divid="app">
{{ msg }} {{username}} {{pwd}}
<br><span>
{{ username }}
<h1>{{ msg }}</h1></span></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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
<divid="app"class="aa"><span>{{ message }}</span><spanv-text="message"></span></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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
<divid="app"class="aa"><span>{{message}}</span><br><spanv-text="message"></span><br><spanv-html="message">xxxxxx</span></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
el:"#app",
data:{
message:"<a href=''>kgc欢迎您</a>"}})</script>
4.vue中事件绑定(v-on)
4.1 绑定事件基本语法
<divid="app"><h2>{{message}}</h2><h2v-text="message"></h2><h2>年龄:{{ age }}</h2><br><inputtype="button"value="点我改变年龄"v-on:click="changeage"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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中事件的简化语法
<divid="app"><h2>{{ age }}</h2><inputtype="button"value="通过v-on事件修改年龄每次+1"v-on:click="changeage"><inputtype="button"value="通过@绑定时间修改年龄每次-1"@click="editage"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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事件函数两种写法
<divid="app"><span>{{count}}</span><inputtype="button"value="改变count的值"@click="changecount"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
el:"#app",
data:{
count:1,},
methods:{/*changecount:function(){
this.count++;
}*/changecount(){this.count++;}}});</script>
在Vue中事件定义存在两种写法：
- 一种是 函数名:function(){}
- 一种是 函数名(){} 推荐
4.4 Vue事件参数传递
<divid="app"><span>{{count}}</span><inputtype="button"value="改变count为指定的值"@click="changecount(23,'xiaohei')"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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:用来控制页面中某个标签元素是否展示
<divid="app"><!--
v-show: 用来控制标签展示还是隐藏的
--><h2v-show="false">欢迎你的加入!</h2><h2v-show="show">欢迎你的加入这是vue中定义变量true!</h2><inputtype="button"value="展示隐藏标签"@click="showmsg"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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: 用来控制页面元素是否展示
<divid="app"><h2v-if="false">hello</h2><h2v-if="show">欢迎你的加入</h2></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
el:"#app",
data:{
show:false},
methods:{}});</script>
5.3 v-bind
v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性
<divid="app"><imgwidth="300"v-bind:title="msg"v-bind:class="{aa:showCss}"src="kgclogo.jpg"alt=""></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
el:"#app",
data:{
msg:"官方logo!!!!",
showCss:true,},
methods:{}})</script>
5.4 v-bind 简化写法
vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如
v-bind:属性名简化之后
:属性名
<divid="app"><imgwidth="300":title="msg":class="{aa:showCss}":src="src"alt=""><inputtype="button"value="动态控制加入样式"@click="addCss"><inputtype="button"value="改变图片"@click="changeSrc"></div><!--引入vue.js--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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 ="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";}}})</script>
6.v-for的使用
v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)
<divid="app"><span>{{ user.name }} {{ user.age }}</span><br><!--
通过v-for遍历对象
--><spanv-for="(value,key,index) in user">
{{index}} : {{key}} : {{value}}
</span><!--
通过v-for遍历数组
--><ul><liv-for="a,index in arr">
{{index}} {{a}}
</li></ul><!--
通过v-for遍历数组中对象
:key 便于vue内部做重用和排序
--><ul><liv-for="user,index in users":key="user.id">
{{index+1}} {{ user.name }} === {{ user.age }} ==== {{ user.content }}
</li></ul></div><!--引入vue--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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数据保持一致,从而实现双向的数据绑定机制
<divid="app"><inputtype="text"v-model="message"><span>{{message}}</span><hr><inputtype="button"value="改变Data中值"@click="changeValue"></div><!--引入vue--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
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事件修饰符
用来阻止事件冒泡
<divid="app"><divclass="aa"@click="divClick"><!--用来阻止事件冒泡--><inputtype="button"value="按钮"@click.stop="btnClick"></div></div><!--引入vue--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app =newVue({
el:"#app",
data:{},
methods:{btnClick(){alert('button被点击了');},divClick(){alert('div被点击了');}}});</script>
8.2 prevent 事件修饰符
用来阻止标签的默认行为
<!--用来阻止事件的默认行为--><ahref="http://www.kgcbest.com/"@click.prevent="aClick">kgc教育</a>
8.3 self 事件修饰符
用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡
<!--只触发标签自身的事件--><divclass="aa"@click.self="divClick"><!--用来阻止事件冒泡--><inputtype="button"value="按钮"@click.stop="btnClick"><inputtype="button"value="按钮1"@click="btnClick1"></div>
8.4 once 事件修饰符
once 一次作用: 就是让指定事件只触发一次
<!--
.prevent : 用来阻止事件的默认行为
.once : 用来只执行一次特定的事件
--><ahref="http://www.kgcbest.com/"@click.prevent.once="aClick">kgc教育</a>
9. 按键修饰符
作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符
# 按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
9.1 enter 回车键
用来在触发回车按键之后触发的事件
<inputtype="text"v-model="msg"@keyup.enter="keyups">
9.2 tab 键
用来捕获到tab键执行到当前标签是才会触发
<inputtype="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:"[email protected]",
phone:13260426185}).then(function(response){
console.log(response.data);}).catch(function(err){
console.log(err);});
10.2.3 axios并发请求
并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果
functiongetUserAccount(){return axios.get('/user/12345');}functiongetUserPermissions(){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知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。
本文转载自: https://blog.csdn.net/hh867308122/article/details/130739020
版权归原作者 Java Fans 所有， 如有侵权，请联系我们删除。
版权归原作者 Java Fans 所有， 如有侵权，请联系我们删除。