vue 主要是用来干什么的?
数据和视图的双向绑定.
vue 全家桶(常用)
- vue.js
- vue-cli 快速构建 vue 项目
- vue-devtools 开发调试
- vue-router 路由管理
- vuex 状态管理
- vue-server-renderer 服务端渲染
- element-UI UI 库
vue 基本使用
// vue 表达式 {{}}
const vm = new Vue({
el: "#root", // 挂载的元素
data: {
// 数据
name: "cherries"
},
methods: {
// 方法
add(n1, n2) {
return n1 + n2;
}
}
});
vue 指令
| 指令名称 |
用法(简写) |
解释 |
| v-bind |
v-bind:title(:title) |
单向绑定数据 数据 -> 视图 |
| v-model |
v-model="name" |
双向绑定数据 数据 <=> 视图 |
| v-text |
v-text="name" |
输出文字 |
| v-html |
v-html="<span>你好</span>" |
输出 html |
| v-for |
<div v-for="(item, index) in arr" :key="item.id"></div> |
循环遍历,遍历的每个元素需要添加一个唯一的 key |
| v-if v-else-if v-else |
v-if="isShow" |
是否渲染 dom 是否渲染 |
| v-show |
v-show="isShow" |
是否显示 样式 |
| v-on |
v-on:click="fn"(@click="fn") |
用来调用方法 |
| v-cloak |
<div v-cloak></div> |
优化显示, 遮蔽 vue 编译时的显示 |
| v-once |
<div v-once></div> |
vue 只编译一次, 提高性能 |
| v-pre |
<div v-pre></div> |
预编译, vue 不编译里面的内容, 提高性能 |
| v-solt |
<template v-solt="header"></template>(#header) |
具名插槽 |
事件修饰符----------给事件添加功能(常用)
- .stop 停止冒泡
- .prevent 阻止默认事件
- .self 不接收冒泡事件
- .once 单次事件
视图不更新的问题----------可使用 vm.$set(obj, key, value) vm.$delete(obj, key)
- 对象添加、删除
- 数组不能通过长度修改 也不能通过数组的索引进行修改
- Object.assign(obj1, obj2)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
