vue3基础

js文本绑定

<template>

  <span>Message:{{ message }}</span>
  
</template>

<script>
export default{
  data() {
    return {
      message:"Hello"
    }
  },
}
</script>

属性绑定

v-bind/: ,不能使用双括号

<div :class="attr">属性绑定</div>

 attr:"red",

<style>
.red{
  color: red;
}

</style>

动态属性绑定,对象绑定,对象的key就是属性名,对象的value就是属性值

数组:

<div :class="[activeClass, errorClass]"></div>

activeClass为真显示属性,为假不显示属性

对象:

<template>
    <div v-bind="objAttr">动态绑定</div>
</template>

objAttr:{
        id:"container",
        class:"wrapper"
      }

#container{
  font-size:20px;
}
.wrapper{
  color: blue;
}

声明响应状态

ref()接收简单类型的参数,内部值包装在特殊对象中内部值包装在特殊对象中,在js中使用.value获取对象值,可以是数组或对象

<script setup>
import {ref} from "vue"
const count = ref(0)
console.log(count.value);
function addCount(){
  count.value++;
}
</script>

<div>count的值:{{ count }}</div>
<button @click="addCount">count++{{ count }}</button>

reactive():使对象本身具有响应性

import {reactive} from "vue"
const user = reactive({
    name:"李四",
    sex:"男"
})
function changeName(){
  user.name = "张三"
}

<div>{{ user.name }}</div>
<button @click="changeName">修改姓名</button>

reactive()的局限

1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失

3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接

setup:

方法一:

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

方法二:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

计算属性:计算属性值会基于其响应式依赖被缓存

import {ref,reactive,computed} from "vue"
const teacher = reactive({
  name:"lisa",
  classes:["class1","class2","class3"]
})

const classNum = computed(()=>{
  return teacher.classes.length
})

<button @click="changeName">修改姓名{{ user }}</button>
<div>{{ teacher.name }}教授班级数量{{ classNum }}</div>

计算属性默认是只读的。但可以用setter,getter成为可读可写

const change = computed(()=>{
    //getter
     get(){};
        
    //setter
    set(){};
})

条件渲染

v-if:

<div v-if="one">能看见1</div>
  <div v-else-if="two">能看见2</div>
  <div v-else>前面的内容无法看见</div>

const one = ref(false)
const two = ref(false)

v-show

<div v-show="three">使用show的方式</div>

const three = ref(true)

v-show不支持在<template>元素使用,不能和v-else搭配使用

v-if VS v-show:

v-show:无论条件如何,始终会被渲染

v-if:只有个条件为真时才会被渲染

列表渲染

  <div>
    <ul>
      <li v-for="item,index in items" :key="index">{{ item }}-----{{ index }}</li>
    </ul>
  </div>

const items = ref(["tea","cofe","milk"])

事件处理

v-on/@click

事件传参

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

事件修饰符

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

表单绑定

 <p>Message is: {{ text }}</p>
<input v-model="text" placeholder="edit me" />

const text = ref('')

v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。

修饰符:

.lazy input输入完之后显示

.number:将输入自动转化为数字

.trim:去字符串前后两端的空格

注意:v-model只能运用在<textarea>、<select><input>等元素中

侦听器(watch())

<template>
  <button @click="changeQ">改变question的值</button>
   <div>{{ question }}</div>
</template>t

<script setup>
  import {ref,watch} from 'vue'
  const question = ref('')
  const answer = ref('this is an answer.....')
  watch(question,(newValue,oldValue)=>{
    console.log('question的值发生了变化。。。。');
  })

  function changeQ(){
    question.value = '修改question后的值'
  }

</script>

深层监听：不能直接侦听响应式对象的属性值

{deep：true}

强制侦听器的回调立即执行

{immediate: true}

组件基础

<template>
    <h1>home界面</h1>
</template>

<template>
<home></home>
</template>

<script setup>

import Home from './components/Home.vue'
components:{
  Home
}
  
</script>

<style>

</style>

传递props

插槽

<template>

    <h1>home界面</h1>

    <slot></slot>

</template>

<template>

<home>home插槽</home>

</template>

动态组件