文章目录
该文章为入门篇个人业余学习总结,vue基础入门篇内容.
更适合后端开发人员的Vue教程,vue结合springboot开发,请看文章列表另一篇
进阶篇文章地址=> https://blog.csdn.net/qq_41157588/article/details/115092016
代码完整无水分,供学习参考,更多了解信息请看文末.
总结不易 点赞评论 支持 thank ~
1.Vue引言
Vue 是渐进式 JavaScript 框架
# 渐进式
易用 html css javascript
高效 开发前端页面 非常高效
灵活 开发灵活 多样性
# 总结
Vue是一个JavaScript框架
# 后端服务开发人员
Vue是渐进式Javascript框架：让我们通过操作很少的DOM，甚至不需要操作页面中的任何DOM元素，就很容易完成数据和视图绑定 双向绑定 MVVM
注意：在使用Vue过程中不要在引入jquery框架
Vue作者 => 尤雨溪(国内)
2.Vue入门
2.1 下载或引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 Vue第一个入门应用
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{msg}}<br>
{{name}}
<span>
{{pwd}}
</span>
</div>
<script>
const app = new Vue({
el: "#app", //ement 用来给vue实例定义一个作用范围
data: { //用来给Vue实例定义一些相关数据
msg: "study vue in March 19, 2021" ,
name:"Lemon",
pwd:"123456",
},
});
</script>
//定义对象 数组 其他数据类型
<div id="app">
<span>msg:{{msg.toUpperCase()}}</span><br>//取值时书写表达式
<span>名称：{{user.name}} 信息：{{user.msg}}</span><br>
<span>age:{{age}}</span><br>
<span>地址：{{lists[0]}} {{lists[2]}}</span><br>
<span>{{users[1]}}<br><hr> {{users[0].name}}</span>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"hello vue",
user:{name:"lemon",msg:"success"},
age:19,
lists:["河南郑州1","江苏苏州2","浙江杭州3"] ,//数组类型
users:[{name:"tizi",age:18},{name:"zxt",age:21}] //数组装对象
}
})
</script>
# 总结
1. vue实例（对象）中el属性：代表Vue的作用范围内都可以使用Vue语法
2. vue实例（对象）中data属性： 用来给Vue实例绑定一些相关数据，绑定的数据可以通过 {{变量名}}在vue作 用范围内取出
3. 在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式、运算符，调用相关方法，以及逻辑运算等
4. el 属性中可以书写任意的css选择器[jquery选择器]，在使用Vue开发是推荐 id选择器
3.v-text和v-html
3.1v-text
v-text：用来获取data中数据，将数据以文本的形式渲染到指定标签内部，类似JavaScript中innerText
<div id="app">
<span>{{ message }},测试中</span><br>
<span v-text="message"></span>,测试中
</div>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue 启动",
}
})
</script>
# 总结
{{zhi}} (插值表达式 ) 和 v-text 获取数据的区别在于
a. 使用v-text取值会将标签中原有的数据覆盖 使用插值表达式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现差值闪烁(谷歌浏览器清缓存 network/3Gslow可看到)
3.2v-html
v-html: 用来获取data数据中含有的html标签,先解析再渲染到指定标签的内部，类似JavaScript的innerHtml
<div id="app">
<span v-text="message">zhi</span><br>
<span v-html="message">zhi</span><br>
</div>
<!-- 引入在线cdn的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=\"\http://www.baidu.com\"\>点击去百度页面</a>"//链接可单斜杠
}
})
</script>
4.vue中事件绑定(v-on)
4.1 绑定事件语法 v-on
<!--
点击按钮 age值+1思路
1.页面中编写一个按钮
2.按钮绑定单击事件 如js的 onclick、onmouseover、onmove、onkeyup
3.在单击事件中修改年龄的值 同时渲染页面
-->
<div id="app">
<span>{{message}}</span><br>
<span v-text="message"></span><br>
<h2>age:{{age}}</h2><br>
<input type="button" value="点击age+1" v-on:click="alterage" />
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "study vue",
age: 15
},
methods: { //用来定义vue中的事件
alterage: function() {
// 在函数中获取vue实例中data的数据,在事件函数中this就是vue实例
// console.log(this);
// this.age = this.age + 1;
this.age++;
}
}
})
</script>
# 总结
事件源：发生事件dom元素 事件：发生特定的动作 监听器：发生特定动作之后的事件处理程序 通常是js函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如：v-on:click
2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
3.在vue中事件的函数统一定义在vue实例的methods属性中
4.在vue定义的事件中this指的就是当前vue的实例，以后可以在事件中通过this获取vue实例中相关数据
4.2 Vue2中事件的简化写法
<div id="app">
<h3>age:{{age}}</h3><br>
<input type="button" value="v-on 事件年龄+1" v-on:click="alterage()"/><br>
<input type="button" value="@简化v-on年龄-1" @click="editage()"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
age:18
},
methods: { //methods：用来定义vue事件处理函数
alterage:function(){
this.age++;
},
editage:function(){
this.age--;
}
}
})
</script>
**总结 ** 以后在vue中绑定事件时可以通过@符号形式 简化v-on的事件绑定
4.3 Vue事件函数的两种写法
<div id="app">
<h3>{{count}}</h3><br>
<input type="button" value="count+1" @click="changeCount()"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
count:1
},
methods: { //methods：用来定义vue事件处理函数
//两种函数写法
// changeCount:function(){//写法1
// this.count++;
// },
changeCount(){//写法2
this.count++;
}
}
})
</script>
总结 在Vue中事件定义存在两种写法，推荐第二种 1、函数名:function( ){ } 2、函数型( ){ }
4.4 Vue事件的参数传递绑定
<div id="app">
<h3>{{count}}</h3><br>
<input type="button" value="改变count为指定值" @click="changeCount(66,'柠檬')"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
count:1
},
methods: { //methods：用来定义vue事件处理函数
changeCount(count,name){ //定义参数
this.count= count;
this.name = name;
alert(name);
}
}
})
</script>
总结 在使用事件时，可以直接在事件调用出事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数
4.5事件小案例
<div id="app">
<input type="button" value="-" @click="subtract()"/>
<h2>{{count}}</h2>
<input type="button" value="+" v-on:click="addition()"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
count:1
},
methods: { //methods：用来定义vue事件处理函数
addition:function(){
if(this.count<10){
this.count++;
}else{
alert("不能在增加啦");
}
},
subtract(){
if(this.count>1){
this.count--;
}else{
alert("不能在减少啦");
}
}
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUj6K4c2-1616403233407)(D:/typora/Typora/img/vue/1616223442873.png)]](https://i-blog.csdnimg.cn/blog_migrate/70e7cdaa891c3df40bafb58da507f34a.png)
5.v-show v-if v-bind 指令
5.1 v-show
v-show: 用来控制页面中某个元素是否展示 底层控制标签是 display
v-show=“true” 值为true标签展示，false为不展示状态
<div id="app">
<!-- v-show="true" 值为true标签展示，false为不展示状态 -->
<h3 v-show="false">"提先森" 微信公众号期望你的关注 值false"</h3>
<h3 v-show="show">"提先森" 微信公众号期望你的关注 值true</h3>
<input type="button" value="展示隐藏标签" @click="showmsg"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
show:false
},
methods: { //methods：用来定义vue事件处理函数
//定义事件
showmsg(){
this.show = !this.show;
}
}
})
</script>
<div id="app">
<h2 v-show="count>19">提先森公众号</h2>
<input type="button" value="修改count 15->20值控制标签展示" @click="showCount"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
count:15
},
methods: { //methods：用来定义vue事件处理函数
//定义事件
showCount(){
this.count++;
console.log(this.count);
}
}
})
</script>
总结 1.在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏
5.2 v-if
v-if: 用来逻辑控制判断，如为true执行xxx ，可控制页面元素是否展示 底层控制是操作DOM元素
<div id="app">
<h2 v-if="false">提先森 微信公众号 false</h2>
<h2 v-if="show">提先森 微信公众号 true</h2>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
show:true
}
})
</script>
5.3 v-bind
v-bind: 用来给标签绑定相应属性
<style type="text/css">
.icss{
border:2px pink solid;
}
</style>
<div id="app">
<img class="img" v-bind:title="msg" v-bind:class="{icss:showCss}" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2628255422,2996456624&fm=11&gp=0.jpg" >
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
msg:"girl头像",
showCss:true
},
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1iiyCcl-1616403233409)(D:/typora/Typora/img/vue/1616223358768.png)]](https://i-blog.csdnimg.cn/blog_migrate/3c0324126b84baeafa7d29c2022341bd.png)
5.4 v-bind简化写法
vue为了方便我们绑定标签的属性提供了对属性绑定的简化写法 如 v-bind:属性名
简化之后->:属性名
<style type="text/css">
.icss{
border:2px blue solid;
}
</style>
<div id="app">
<img :title="msg" :class="{icss:showCss}" :src="src" >
<br>
<input type="button" value="动态控制加入样式" @click="addCss"/>
<input type="button" value="改变图片" @click="alterImg"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
msg:"girl头像",
showCss:true, src:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2628255422,2996456624&fm=11&gp=0.jpg"
},
methods:{
addCss(){
this.showCss = !this.showCss;
},
alterImg(){
this.src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=625539366,953418167&fm=11&gp=0.jpg";
}
}
})
</script>
6.v-for的使用
v-for :用来对 对象 进行遍历的 (数组也是对象的一种)
<div id="app">
<span v-if="false">{{user.name}} {{user.age}}</span>
<!-- v-for遍历 -->
<span v-for="u in user">
{{u}}
<br>
<!-- v-for遍历对象 -->
<span v-for="(value,key,index) in user">
{{index}} : {{key}} : {{value}}
</span>
<!-- v-for遍历数组 -->
<ul v-for="a,index in arr">
<li>{{index}} {{a}}</li>
</ul>
<br>
<!-- v-for遍历数组中的对象 -->
<ul v-for="user,index in users" :key=user.age style="list-style-type: none;">
<li>{{index+1}} {{user}}</li>
</ul>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
user:{name:"zxt",age:21},
arr:[
"河南",
"江苏",
"上海"
],
users:[
{name:"lemon1",age:21,msg:"背起了行囊 远离family"},
{name:"lemon2",age:22,msg:"踏上路途的这一刻，我知道终将不平凡"}
]
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bgSRsye-1616403233417)(D:/typora/Typora/img/vue/1616297656774.png)]](https://i-blog.csdnimg.cn/blog_migrate/7538e45e5f3455c79f99e728a7b1f1d5.png)
总结 在使用 v-for的时候一定要注意加入 :key 用来绑定给vue内部提供重用和排序的唯一key
7.v-model 双向绑定
v-model： 用来绑定标签元素的值与Vue实例对象中data数据保持一致，从而实现双向数据绑定
<div id="app">
<input type="text" v-model="message" placeholder="数据双向绑定"/><br>
<span>{{message}}</span>
<hr >
<input type="button" value="改变text的值" @click="changeValue"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
message:"",
},
methods: { //methods：用来定义vue事件处理函数
changeValue(){
this.message="changeValue";
}
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkeIUxY2-1616403233422)(D:/typora/Typora/img/vue/1616376629794.png)]](https://i-blog.csdnimg.cn/blog_migrate/dbdb7f7f732bfb0dafb913ad0ab7456a.png)
# v-model总结
1、使用v-model指令可以实现数据的双向绑定
2、所谓双向绑定，表单中数据变化导致vue实例data数据变化，vue实例中data数据的变化导致表单中的数据变化，称之为双向绑定
# MVVM架构 双向绑定机制
Model： 数据 Vue实例中绑定数据
VM ： ViewModel 监听器
View： 页面 页面展示的数据
Vue 记事本综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本综合案例</title>
</head>
<body>
<!-- 实现思路
1.完成记查询所有思路：①酱所有的数据绑定为vue实例 ②遍历vue实例中数据到页面
2.添加 ①添加按钮绑定事件 ②在事件中获取输入框中的数据 ③将获取到的数据放入到arrs中
3.删除 删除所有 总数量
-->
<div id="app">
<input type="text" v-model="msg" placeholder="请输入添加内容"/><input type="button" value="添加记事" @click="save"/>
<ul>
<li v-for="item,index in arrs">
{{index+1}}- {{item}} <a href="javascript:;" @click="delRow">删除</a>
</li>
</ul>
<br>
<span>总记录： {{arrs.length}} 条</span> <input type="button" v-show="arrs.length!=0" value="删除所有" @click="delAll"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
arrs:["踏上路途的那一刻","我知道终将不平凡"],
msg:"",
},
methods: { //methods：用来定义vue事件处理函数
save(){//添加记事本
console.log(this.msg);//log文本框的数据
this.arrs.push(this.msg); //向列表中添加当前双向绑定的值
this.msg='';//添加值后清空文本框的值
},
delRow(index){//删除一条记录
//根据下标删除数组的某个元素
this.arrs.splice(index,1); //参数1：从哪个下标开始删 参数2：删除几个元素
},
delAll(){//删除所有数据
this.arrs=[];
}
}
})
</script>
</body>
</html>
效果图如下
8. 事件修饰符
修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制
# 常用事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
8.1 stop事件修饰符
stop修饰符 用来阻止事件冒泡(详情可复制代码去掉.stop查看)
<style type="text/css">
.sty{
background-color: pink;
width: 300px;
height: 300px;
}
</style>
<div id="app" @click="divClick()">
<div class="sty">
<button type="button" @click.stop="btnClick">按钮</button>
</div>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
},
methods: { //methods：用来定义vue事件处理函数
btnClick(){
alert("button被点击");
},
divClick(){
alert("div被点击");
}
}
})
</script>
8.2 prevent事件修饰符
prevent 用来阻止标签的默认行为
<div id="app">
<!-- .prevent用来阻止事件的默认行为 -->
<a href="http://www.baidu.com" @click.prevent="aClick">去百度</a>
</div>
8.3 self事件修饰符
self 用来针对当前标签的事件触发 只触发自己标签上特定动作的事件 只关心自己标签上触发的事件
<!-- .self 只触发标签自身的事件 -->
<div class="sty" @click.self="divClick()">
<!-- .stop用来阻止事件的冒泡 -->
<button type="button" @click.stop="btnClick">按钮</button>
<button type="button" @click="btnClick1">按钮1</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
},
methods: { //methods：用来定义vue事件处理函数
btnClick(){
alert("button被点击");
},
divClick(){
alert("div被点击");
},
btnClick1(){
alert("btnClick1点击");
}
}
})
</script>
8.4 once 事件修饰符
once 让事件只触发一次，第二次则失效会执行事件或标签的默认方法
<!-- .prevent :用来阻止事件的默认行为
.once :用来只执行一次的特定事件，设置后click只生效一次，第二次直接会触发a标签
-->
<a href="http://www.baidu.com" @click.prevent.once="aClick">去百度</a>
9.按键修饰符
用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
9.1 enter回车键
用来在触发回车键之后的事件 ↓
<div id="app">
<input type="text" v-model="msg" @keyup.enter="keyups"/>
<hr >
<input type="text" v-model="msg" @keyup.delete="keydelete"/>
</div>
<!-- 引入在线cdn的vue.js地址-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element：用来指定vue作用范围
data: { //data：用来定义vue实例相关数据
msg:[],
},
methods: { //methods：用来定义vue事件处理函数
keyups:function(){
alert(this.msg);
},
keydelete(){
alert("Delete键触发");
}
}
})
</script>
9.2 delete键
用来捕获到delete键执行到当前的标签才会触发 ↑
按键修饰符 需要什么键定义事件，可以自己设定
该文章是入门篇，进阶篇vue结合springboot开发，适用于后开编程人员的Vue实战教程,整合SpringBoot项目案例，请看另一篇文章.
进阶篇链接地址 https://blog.csdn.net/qq_41157588/article/details/115092016 ，代码很全 供学习参考,更直观了解vue+springboot结合开发
需要全套源码 及 pdf文件 请 评论留言 或 发送邮箱至 ti66666@vip.qq.com
vue基础入门篇总结到此基本结束，总结不易，点个赞收藏评论支持下，你的支持是我创造的动力，thank~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
