携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主
📌 擅长领域：全栈工程师、爬虫、ACM算法
💒 公众号：知识浅谈
🔥 联系方式vx：zsqtcc
1. Vue 引言
渐进式javascript框架
#渐进式
1.易用 html css JavaScript
2.高效 开发前端页面非常高效
3.灵活 开发灵活，多样性
#总结： 是一种javascript框架
#后端开发人员
Vue渐进式 javascript框架：让我们通过操作很少的DOM，甚至不需要操作页面中任何D0M元素，就很容易的完成数据和视图绑定 双向绑定MVM。
日后在使用vue的过程中不要引入Jquery框架
2. Vue入门
2.1 下载vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.2Vue的第一个入门应用
插值表达式只能使用在作用范围内的。
<div id="divapp">
{{ msg.toUpperCase() }} <!--可以在这两个大括号中进行操作-->
<br>
<span>
{{ user.name }} <br>
{{ lists[0] }} <br>
{{ users[1].name }}
</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
msg:"Fuck you！", //定义变量字符串
username:"c",
user:{name:"名字",msg:"信息"},//这是定义一个对象
lists:["param1","param2"], //这是定义一个数组
users:[{name:"名字",msg:"信息"},{name:"还是名字",msg:"还是信息"}], //定义一个对象数组
},//用来给vue定义一些简单的数据
});
</script>
#总结：
1.vue实例（对象）中el属性：代表Vue的作用范围日后在vue的作用范围内都可以使用vue的语法
2.Vue实例（对象）中data属性：用来给vue实例绑定一些相关数据，绑定的数据可以通过{{ 变量名 }}在Vue作用范围内取出
3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用相关方法，以及逻辑运算等
4.el属性中可以书写任意的CSS选持择器[ jquery选择器],但是在使用vue开发是推荐使用1d选择器
3. v-text和v-html
3.1 v-text
v-text：用来获取data中数据将数据以文本的形式渲染到指定标签内部类似于 javascript中 innerText
<div id="divapp">
{{ msg.toUpperCase() }} <!--可以在这两个大括号中进行操作-->
<span v-text="msg"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
msg:"Fuck you！", //定义变量字符串
},//用来给vue定义一些简单的数据
});
</script>
1.{{ 插值表达式 }}和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁（因为页面是显示显示的{{ 表达式 }} ，之后再加载的所以就是，当网络较慢的时候，会先显示{{ 表达式 }}，之后再加载数据）
3.2 v-html
v-html:用来获取data中数据将数据中含有的htm标签先解析再渲染到指定标签的内部类似于 javascript中 innerHTML
<div id="divapp">
<span v-html="ht"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
ht:"<a href=''>test连接</a>",
},//用来给vue定义一些简单的数据
});
</script>
4. vue中时间绑定(v-on)
4.1 事件的使用
<div id="divapp">
<span>{{ age }}</span> <br>
<input type="button" value="点我改变年龄" v-on:click="changeage" /> <!--v-on:事件名="触发函数"-->
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
age:12,
},//用来给vue定义一些简单的数据
methods:{
changeage:function (){ //v-on时间的一个绑定 在函数中this就是vue的实例
this.age++;
}
},
});
</script>
# 总结：
事件 事件源：发生事件dom元素事件：发生特定的动作 click.....监听器 发生特定动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的v-on：事件名如v-on:click
在v-on：事件名的值语句中是当前时间触发调用的函数名
在vue中事件的函数統一定义在Vue实例的 methods属性中
4.在vue定义的事件中this指的就是当前的vue实例，日后可以在事件中通过使用this获取Vue实例中相关数据
4.2 Vue事件的简化写法
就是把v-on: 替换成了 @ 这个符号
<div id="divapp">
<span>{{ age }}</span> <br>
<input type="button" value="点我改变年龄" v-on:click="changeage" /> <!--v-on:事件名="触发函数"-->
<input type="button" value="点我减去值" @click="subage"/> <!--@click 是vue2中提供的一组简化写法-->
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
age:12,
},//用来给vue定义一些简单的数据
methods:{
changeage:function (){ //v-on时间的一个绑定 在函数中this就是vue的实例
this.age++;
},
subage:function () {
this.age--;
}
},
});
# 总结：
1.日后在vue中绑定事件的时候可以通过@符号形式 简化 v-on 的事件绑定
4.3 时间函数的两种写法
<div id="divapp">
<span>{{ age }}</span> <br>
<input type="button" value="点我改变年龄" v-on:click="changeage" /> <!--v-on:事件名="触发函数"-->
<input type="button" value="点我减去值" @click="subage"/> <!--@click 是vue2中提供的一组简化写法-->
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
age:12,
},//用来给vue定义一些简单的数据
methods:{
changeage:function (){ //v-on时间的一个绑定 在函数中this就是vue的实例
this.age++;
},
subage () { //简化的函数
this.age--;
}
},
});
</script>
# 总结：
函数的两个写法一个是 函数名:function(){} 另一个是 函数名(){}
4.4 事件的参数传递
<div id="divapp">
<span>{{ age }}</span> <br>
<input type="button" value="点我改变年龄" v-on:click="changeage" /> <!--v-on:事件名="触发函数"-->
<input type="button" value="点我减去值" @click="subage(1234,'baby')"/> <!--@click 是vue2中提供的一组简化写法-->
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//如果使用类选择器，则 el:".类名"
el:"#divapp", //el代表的是element元素用来给vue定义一个作用的范围 ，代表的是作用域页面中的哪一个元素
data:{
age:12,
},//用来给vue定义一些简单的数据
methods:{
changeage:function (){ //v-on时间的一个绑定 在函数中this就是vue的实例
this.age++;
},
subage (age,name) {//带有参数的函数
alert(name)
this.age=age;
}
},
});
</script>
# 总结
1.在使用事件的时候，可以直接在事件调用出给时间进行参数传递，在时间定义出通过定义出对应变量几首传递的参数
