认识 VUE

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="你好"	输出 html
v-for		循环遍历,遍历的每个元素需要添加一个唯一的 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		优化显示, 遮蔽 vue 编译时的显示
v-once		vue 只编译一次, 提高性能
v-pre		预编译, vue 不编译里面的内容, 提高性能
v-solt	(#header)	具名插槽

事件修饰符----------给事件添加功能(常用)

• .stop 停止冒泡
• .prevent 阻止默认事件
• .self 不接收冒泡事件
• .once 单次事件

视图不更新的问题----------可使用 vm.$set(obj, key, value) vm.$delete(obj, key)

• 对象添加、删除
• 数组不能通过长度修改 也不能通过数组的索引进行修改
• Object.assign(obj1, obj2)