转载声明：文章来源：https://blog.csdn.net/qq_52475404/article/details/122440353

Vue简介：1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动

第一个Vue程序
1.导入开发版本的Vue.js
2.创建Vue实例对象，设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上

el:挂载点：是用来设置Vue实例挂载（管理）的元素

<div id = "app">
	{{message}}
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"牛奶小柒"
	}
})

①Vue会管理el选项命中元素及其内部的后代元素
②可以使用其他的选择器，但是建议使用ID选择器
③可以使用其他的双标签，不能使用HTML和BODY

data:数据对象

Vue中用到的数据定义在data中.
data中可以写复杂类型的数据.
渲染复杂类型数据时，遵守js的语法即可.
本地应用：
①v-text：设置标签的文本值
②v-html：设置标签的innerHTML，标签解析
③v-on：为元素绑定事件 v-on:click=@click
④计数器
⑤v-show：根据表达值的真假切换元素的显示和隐藏
   原理：修改元素的display，实现显示隐藏
⑥v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
⑦v-bind：设置元素的属性（比如src，title，class）
⑧图片切换：1.列表数据使用数组保存 2.v-blind指令可以设置元素属性，比如src 3.v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
⑨v-for：根据数据生成列表结构
⑩v-on补充：传递自定义参数，事件修饰符 v-model指令：1.v-model指令的作用是便捷的设置和获取表单元素的值 2.绑定的数据会和表单元素值相关联 3.绑定的数据<–>表单元素的值

网络应用：
Vue结合网络数据开发应用

axios：网络请求库

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容或错误信息
axios+Vue

axios回调函数中的this已经改变，无法访问到data中的数据
把this保存起来，回调函数中直接使用保存的this即可