VUE快速入门

一、简介

VUE是一个JavaScript框架，目的是为了简化DOM操作，响应式数据驱动。

二、开发

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

三、语法

el：挂载点

• 用来设置Vue实例挂载的元素
• 建议使用ID选择器
• 也可以使用除Html和Body之外的双标签

data：数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据

v-text

• 设置标签的内容
• 无论内容是什么，只会解析为文本
• 默认写法会替换全部内容，使用 插值表达式{{}} 可以替换指定内容

v-html

• 设置元素的innerHTML
• 内容中有html结构则会被解析为标签

v-on

• 为元素绑定事件
• 事件名不需要写on，例如onclick事件只需要写click
• 指令可以简写为@
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据
• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 事件后面加 .修饰符 可以对事件进行限制，例如.enter限制触发的按键为回车

v-show

• 根据真假切换元素的显示状态
• 原理是通过修改元素的display来实现
• 指令后面的内容，最终都会解析为布尔值
• 适用于频繁切换场景

v-if

• 根据表达式的真假切换元素的显示状态
• 原理是通过操纵DOM元素来切换状态
• 表达式为talse则从DOM树中移除元素
• 适用于偶尔切换场景

v-bind

• 为元素绑定属性
• 语法：v-bind:属性名
• 简写：:属性名

v-for

• 根据数据生成列表结构
• 语法：(item，index) in 列表
• item保存列表的数据，index保存列表数据对应的索引

v-model

• 设置和获取表单元素的值
• 绑定的数据与表单元素值是相互影响的

四、axios

简介

axios是一个功能强大的网络请求库

<srcipt src="https://unpkg.com/axios/dist/axios.min.js"></script>

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发