认识 VUE
2020-03-14 本文已影响0人
iCherries
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)
