vue基础指令

vue基础指令

文章目录

• 前言
• 一、vue是什么？
• 二.Vue 快速上手        
• 2.1Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 / 开发者工具

一、vue是什么？

概念：Vue 是一个用于 构建用户界面    的 渐进式    框架 

优点：大大提升开发效率 (70%↑)

缺点：需要理解记忆规则 → 官网

二、使用方式

Vue 的两种使用方式：     ① Vue 核心包开发      场景：局部 模块改造 ② Vue 核心包 & Vue 插件 工程化开发      场景：整站 开发

---

三.使用步骤

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

四.插值表达式

vue特性 

 五.Vue 指令

 Vue 指令 v-show vs v-if

 Vue 指令 v-else v-else-if

 Vue 指令 v-on

 注意：简写：@事件名

methods函数内的 this 指向 Vue 实例

Vue 指令 v-bind

Vue 指令 v-for

 v-for 中的 key

 

Vue 指令 v-model