vue3基础

所有vue3应用 需要挂载到dom元素上

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

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

<script>
  const { createApp, ref } = Vue

  createApp({    // 创建了一个 应用
    setup() {     // 内置函数 
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')        // 挂载到 id 为 app的dom 元素
</script>

创建了一个 应用 . 挂载到 id 为 app的dom 元素
调用

数据渲染

插值 只能显示文本
{{}}
v-html 会渲染数据中的html
:xx 绑定
:[属性名] 属性名绑定 不能大写

事件绑定 @

条件渲染 v-if="表达式变量" 为true 的时候 标签内容失效
整块条件渲染

<template v-if=>
<h1></h1>
<h2></h2>
</template>

隐藏部分内容

v-show

遍历

<div v-for="item in 10" :key=n >{{item}}
<div v-for="(item,index) in 10" :key=n >{{item}}

<div v-for="(value,key,index) in items" :key=n > {{key}}

事件

@clike="计算表达式"
@clike="方法名字"   
method

按键监听

@keyup.xxx=""
@keydown.tab=""

取反

!ss    //!用在 点击 显示  再点 隐藏 效果非常好

单选框 基本类型
复选框 数组存放

computed()计算属性

watch 监听