vue日常学习,基本使用

<div id="app">    <!-- 模版语法：{{表达式}} -->    {{name}}    <!-- v-text:innerHtml 渲染文本-->    <div v-html="html"></div>    <!-- v-text:innerText -->    <div v-text="name"></div>    <!-- v-on：绑定点击事件 ，简写： @ -->    <button v-on:click="fun(123)">添加</button>    <button @click="fun">删除</button>    <!-- v-bind地址、什么的都一样的 -->    <img v-bind:src="url" alt="" />    <!-- 对于class的处理 -->    <div :class="bool?'active':''" > 我们不一样</div>    <!-- class简写，三元表达式，比较方便 -->    <div :class="{active:bool}" > 我们都一样</div>    <!-- 对于style的处理 -->    <div :style="bool? 'color:#ff0000' : ''">是不一样</div>    <div :style="{color:bool}? 'color:#ff0000' : ''">是不一样</div>    <!-- v-model 获取input的值，默认input事件，change的话加个.lazy, nmuber转换为数字，-->    <input type="text" v-model="name"/>    <!-- v-for循环渲染 item为循环的名 ， list为数组-->    <!-- <div v-for="item in list">{{item}}</div> -->    <!-- 添加了下标 -->    <!-- <div v-for="(item,index) in list">{{index}}{{item}}</div> -->    <!-- 加上id -->    <div v-for="(item,index) in list">{{index}}{{item.id}}</div>    <!-- key的作用,值唯一且不可变 ,推荐使用id，index仅在不在前面，中间修改时可用-->    <!-- <div v-for="(item,index) in list" :key="index">{{index}}{{item.id}}    <input type="text" />    </div> -->    <button @click="list.shift()">123456</button>    <!-- v-if v-else v-else-if -->    <!-- v-if 不经常用来切换 -->    <div v-if="bool">if</div>    <div v-else>eles</div>    <!-- v-show 用来经常切换，标签页，-->    <div v-show="bool">show</div>    <button @click="bool=!bool">变</button>    <!-- v-once 只加一次-->    <!-- <div v-once>{{count}}</div> -->    <div >{{count}}</div>    <button @click="count++">++</button>    <!-- v-pre 不解析花括号，是什么样就是什么样-->    <div v-pre>{{count}}</div>    <!-- v-cloak 页面加载时不见原始dom-->    <!-- 这个一般放在最大的div上，防止刷新页面出现未渲染的样子，看到原始DOM  -->    <div v-cloak></div>  </div>

const {    createApp,    ref    } = Vue;    createApp({    setup() {      // const count = ref(0)      const name = '王五'      console.log(name);      const fun = (i) => {      console.log(i);      }      const html = ref('<s>关闭</s>')      const url = ref('https://pic4.zhimg.com/80/v2-2bf48b6a57b45d129a0e2621c8049963_1440W.webp')      const bool = ref(true)      const list = ref([{id:1},{id:2},{id:3}])      const count = ref(0)      return {      count,      html,      fun,      name,      url,      bool,      list,      count      }    }    }).mount('#app')

<style>    .active{    color: red;    }  </style>