# Vue 语法
# el 挂载点以及 data 数据项
el 挂载点
1 |
|
不能够把 el
挂载到 body
标签中
data 数据对象
1 |
|
# 相关基本语法
# v-text
设置标签的文本值 (textContent)
1 |
|
v-text
是有替换作用的
# v-html
设置标签的 innerHtml
1 |
|
效果:
# v-on
为元素绑定事件
1 | <!-- 完整语法 --> |
实例:
1 |
|
# v-on
补充
主要是事件修饰符
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用capture
模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
1 | <!-- 方法处理器 --> |
# v-show
根据表达值的真假,切换元素的显示和隐藏
1 |
|
# v-if
根据表达值的真假,切换元素的显示和隐藏
1 |
|
# v-bind
设置元素的属性
动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
1 | <!-- 绑定一个 attribute --> |
# v-for
根据数据生成列表结构
我们可以用
v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用item in items
形式的特殊语法,其中items
是源数据数组,而item
则是被迭代的数组元素的别名。
1 | <ul id="example-1"> |
在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。
1 | <ul id="example-2"> |
你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:
1 | <div v-for="item of items"></div> |
# v-for
使用对象
你也可以用
v-for
来遍历一个对象的property
。
1 | <ul id="v-for-object" class="demo"> |
你也可以提供第二个的参数为 property 名称 (也就是键名):
1 | <div v-for="(value, name) in object"> |
还可以用第三个参数作为索引:
1 | <div v-for="(value, name, index) in object"> |
# v-model
获取和设置表单元素的值 (双向数据绑定)
1 |
|
-
v-model
指令的作用是便捷的设置和获取表单元素的值 - 绑定的数据会和表单元素值相关联
- 绑定的数据 <-> 表达元素的值
# axios
# 关于使用
1 | //使用npm 安装 |
# 关于请求
发送 Get
请求
1 | //发送Get请求 |
发送 POST
请求
1 | axios.post('/user', { |
执行多个并发请求
1 | function getUserAccount() { |
# axios API
可以通过向 axios
传递相关配置来创建请求
axios(config)
1 | // 发送 POST 请求 |
axios(url[, config])
1 | // 发送 GET 请求(默认的方法) |
# 别名
1 | //请求方法别名 |
创建实例
axios.create([config])
1 | const instance = axios.create({ |
实例方法
1 | axios#request(config) |
# 请求配置
1 | { |
# 响应结构
某个请求的响应包含以下信息
1 | { |
使用 then
时,你将接收下面这样的响应 :
1 | axios.get('/user/12345') |