Vue3第零篇：10分钟-语法速览

目录

一、声明式渲染

二、Attribute 绑定

三、事件监听

四、表单绑定

五、条件渲染

六、列表渲染

七、计算属性

八、生命周期和模板引用

九、侦听器

十、组件

十一、组件传参

十二、插槽

---

 

一、声明式渲染

reactive() ：只适用于对象 (包括数组和内置类型，如 Map 和 Set)。

ref()：可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

<script setup>
import { ref ,reactive } from 'vue'
  
// 定义用户信息
const user = reactive({
  name: 'Lucy',
  age: 18
})

// 定义学校
const school = ref('Berkeley Middle School!')

// 定义改变学校的方法
const changeSchool = function(){
  school.value= 'Stanford University!'
}

// 定义改变年龄的方法
const addAge = function(){
  user.age++
}

</script>

<template>
  <h1>My name is {{ user.name }},I'm {{ user.age }} years old</h1>
  <h1>I study at {{ school }} </h1>
  
  <button @click = changeSchool >切换学校</button>
  <button @click = addAge >增加一岁</button>
</template>

二、Attribute 绑定

v-bind 指令用于给attribute 绑定一个动态值

<div v-bind:id="dynamicId"></div>
<!-- 简写方式 -->
<div :id="dynamicId"></div>

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

const titleClass = ref('titleRed')

// 切换颜色方法
const changeColor =function(){
  
  if (titleClass.value=="titleRed"){
      titleClass.value="titleBlue"
      }else{
    	titleClass.value="titleRed"
  }
  
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
  <button @click=changeColor> 切换颜色 </button>
</template>

<style>
.titleRed {
  color: red;
}
.titleBlue {
  color: blue;
}
</style>

三、事件监听

我们可以使用 v-on 指令监听 DOM 事件：

<button v-on:click="increment">{{ count }}</button>
<!-- 简写形式 -->
<button @click="increment">{{ count }}</button>

四、表单绑定

我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：

<input :value="text" @input="onInput">

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

const text = ref('')

// 处理输入事件方法
const onInput=function(e){
  text.value=e.target.value
}

</script>

<template>
  <input v-bind:value="text" v-on:input="onInput">
  <p>{{ text }}</p>
</template>

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖：

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

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

五、条件渲染

<h1 v-if="awesome">Vue is awesome!</h1>

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

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

六、列表渲染

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

<script setup>
 import { ref } from 'vue'
  
 let id=0
  // 绑定输入框
 const text = ref("")
 
 // 数据容器
 const todos = ref([])
 
 const addTodo =function(){
   todos.value.push({'id':id++,'text':text.value})
   text.value=''
 }
 
 const delTodo =function(todo){
   todos.value=todos.value.filter(x=>x!=todo)
 }
 
</script>
<template>
	<ul>
    <li v-for="todo in todos" v-bind:key="todo.id">
      {{ todo.text }}
      <button @click=delTodo(todo)>删除</button>
    </li>
  </ul>
  <input v-model= text>
  <button @click=addTodo>添加</button>
</template>

七、计算属性

computed()。它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value：一般我们定义一个数值是直接赋值给一个变量【const scores=[1,2,3]】，计算属性允许我们将数值赋值给一个方法【const scores=computed(()=>{ return ......})】，这就是计算属性。

八、生命周期和模板引用

Vue 为我们处理了所有的 DOM 更新，这要归功于响应性和声明式渲染。然而，有时我们也会不可避免地需要手动操作 DOM。

这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的 ref attribute 来实现模板引用：

const p = ref(null)

<p ref="p">hello</p>

注意这个 ref 使用 null 值来初始化。这是因为当 <script setup> 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。我们可以使用 onMounted() 函数：

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

const p = ref(null)

onMounted(() => {
  p.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="p">hello</p>
</template>

九、侦听器

有时我们需要响应性地执行一些“副作用”——例如，当一个数字改变时将其输出到控制台。我们可以通过侦听器来实现它：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 没错，console.log() 是一个副作用
  console.log(`new count is: ${newCount}`)
})

watch() 可以直接侦听一个 ref，并且只要 count 的值改变就会触发回调。watch() 也可以侦听其他类型的数据源——更多详情请参阅指南 - 侦听器。

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

const count = ref(0)

const add =function(){
  count.value++
}

// 监听count的变化
watch(count, (newCount) => {
  console.log(`new count is: ${newCount}`)
})

</script>

<template>
  {{count}}
  <button @click="add">Fetch next todo</button>
</template>

十、组件

目前为止，我们只使用了单个组件。真正的 Vue 应用往往是由嵌套组件创建的。父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

<script setup>
import ChildComp from './ChildComp.vue'
</script>

然后我们就可以在模板中使用组件，就像这样： 

<template>
<ChildComp />
</template>

十一、组件传参

①Props：子组件可以通过 props 从父组件接受动态数据。

<!-- 子组件接收传参：ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg=greeting />
</template>

②Emits：子组件还可以向父组件触发事件。

emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

<!-- 子组件ChildComp.vue -->
<script setup>
// 声明触发的事件
const emit = defineEmits(['response'])

// 带参数触发
emit('response', 'hello from child')
</script>

父组件可以使用 v-on 监听子组件触发的事件——这里的处理函数接收了子组件触发事件时的额外参数并将它赋值给了本地状态：

<ChildComp @response="(msg) => childMsg = msg" />

十二、插槽

除了通过 props 传递数据外，父组件还可以通过插槽 (slots) 将模板片段传递给子组件：

<!-- 父组件 -->
<ChildComp>
  This is some slot content!
</ChildComp>

<!-- 在子组件的模板中 -->
<template>
  <slot>Fallback content</slot>
</template>