Vue的语法、属性及CSS渲染相关

1.模板语法

最基本的数据绑定形式为文本差值，用的是双大括号

<template>
  <p>{{ msg }}</p>
</template>
<script>
  export default {
    data(){
      return{
        msg:"神奇的魔法"
      }
    }
  }
</script>

另一种写法，Vue3特有

reactive 函数用于将普通的 JavaScript 对象转换为响应式对象，使其在 Vue 组件中可以实现数据的响应式更新。

<template>
  <p>{{ data.msg }}</p>
</template>
<script setup>
import { reactive } from 'vue';
​
const data = reactive({
  msg:'神奇的Vue'
});
</script>

2.属性绑定

前边要加一个冒号或者“v-bind:”

<template>
  <div v-bind:class="data.msg" :id="data.id">测试</div>
</template>
<script setup>
import {reactive} from "vue";
​
const data=reactive(
    {
      msg:"active",
      id:"123",
    }
)
​
​
</script>

3.条件渲染

<template>
  <h3>条件渲染</h3>
  <div v-if="data.flag">你能看见我吗？</div>
  <div v-else>你还是看看我吧</div>
</template>
<script setup>
import {reactive} from "vue";
​
const data=reactive(
    {
      msg:"active",
      id:"123",
      flag:false,
    }
)
​
</script>

4.列表渲染

<template>
  <h3>列表渲染</h3>
  <p v-for="item in data.name">{{ item }}</p>
</template>
​
<script setup>
import {reactive} from "vue";
​
const data = reactive({
  name: ['w', 'l', 'z']
})
</script>

5.事件处理器

1）内联事件处理器

<script setup>
import {reactive} from "vue";
​
const data = reactive({
  count: 1,
})
</script>

<template>
  <h3>内联时间处理</h3>
  <button type="button" @click="data.count++" >add</button>
  <p>{{ data.count }}</p>
</template>
​
<style scoped>
​
</style>

2）方法事件处理器

<script setup>
import {reactive} from "vue";
​
const data = reactive({
  count: 1,
})
​
const add=()=>{
  data.count++
}
</script>
​
<template>
  <h3>内联时间处理</h3>
  <button type="button" @click="add" >add2</button>
  <p>{{ data.count }}</p>
</template>
​
<style scoped>
​
</style>