Vue 基础学习笔记

Vue 基础语法学习笔记

学习目录

vue 基础
vue-cli
vue-router
vuex
element-ui
vue3

一、基础语法

插值

v-bind:
简写为冒号: ’ : "

Vue 基础学习笔记_第1张图片

数据绑定

v-bind: 单向绑定

v-model:双向绑定
应用场景:
Vue 基础学习笔记_第2张图片

el 和data的两种写法:

Vue 基础学习笔记_第3张图片
例子:
Vue 基础学习笔记_第4张图片

MVVM模型

Vue 基础学习笔记_第5张图片

Vue 基础学习笔记_第6张图片

数据代理

Vue 基础学习笔记_第7张图片

Vue 基础学习笔记_第8张图片

事件处理

Vue 基础学习笔记_第9张图片

事件修饰符

Vue 基础学习笔记_第10张图片

例子:
Vue 基础学习笔记_第11张图片

键盘事件

Vue 基础学习笔记_第12张图片

计算属性

Vue 基础学习笔记_第13张图片

例子:

Vue 基础学习笔记_第14张图片

完整写法:
Vue 基础学习笔记_第15张图片

简写:
注意:当只考虑读取,不考虑修改的时候才能简介
Vue 基础学习笔记_第16张图片

监视属性

Vue 基础学习笔记_第17张图片

例子:
Vue 基础学习笔记_第18张图片

Vue 基础学习笔记_第19张图片

收集表单数据

Vue 基础学习笔记_第20张图片

例子:
Vue 基础学习笔记_第21张图片

Vue 基础学习笔记_第22张图片
Vue 基础学习笔记_第23张图片

二、内置指令

回顾指令

Vue 基础学习笔记_第24张图片

v-text

Vue 基础学习笔记_第25张图片

v-html

Vue 基础学习笔记_第26张图片

例子 :
在这里插入图片描述

v-clock

v-once

在这里插入图片描述

例子:
Vue 基础学习笔记_第27张图片

v-pre

Vue 基础学习笔记_第28张图片

例子:
Vue 基础学习笔记_第29张图片

三、自定义指令

Vue 基础学习笔记_第30张图片

Vue 基础学习笔记_第31张图片

四、生命周期

mounted

Vue 基础学习笔记_第32张图片

Vue 基础学习笔记_第33张图片

Vue 基础学习笔记_第34张图片

挂载流程

Vue 基础学习笔记_第35张图片

Vue 基础学习笔记_第36张图片

总结

Vue 基础学习笔记_第37张图片

五、Vue插件

Vue 基础学习笔记_第38张图片

关注林哥,持续更新哦!!!★,°:.☆( ̄▽ ̄)/$:.°★ 。

你可能感兴趣的:(Vue笔记,vue.js,vue)