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>