vue3基础语法(一)

1.声明式呈现

xml 复制代码
<script setup>
import { reactive, ref } from 'vue'
const counter = reactive({ count: 0,number:10 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
  <p>
    number is :{{counter.number}}
  </p>
</template>

ref : 用于定义一个响应式的数据引用。ref 接受一个内部值并返回一个响应式且可变的对象,该对象具有一个 .value 属性指向内部值。当你在模板中直接使用 ref 创建的变量时,Vue 会自动解包 .value,也就是说你在输入count时,vue会默认为vue.value。

reactive: 接受一个普通对象并返回该对象的响应式代理。可以用来创建一个响应式的对象。当你修改对象的属性时,视图会自动更新。它对嵌套对象也起作用。

2.属性绑定

复制代码
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

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

我们一般使用v-bind来绑定属性,但是因为使用频率很高,所以也可以直接缩写为':'

3.事件监听器

复制代码
import { ref } from 'vue'

const count = ref(0)

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

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

一般使用v-on:click来实现,但是频率很高,所以也可以缩写为 @click

4.表单绑定

复制代码
import { ref } from 'vue'

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

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

原理是通过v-bind,v-on来实现双向绑定,但是我们为了简化,可以直接使用v-model来实现

也可以用上面的这个代码

5.条件渲染

复制代码
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>

仅当 传入的值为 true 时,才会呈现此值。如果更改为虚假值,则会将其从 DOM 中删除。 除了v-if还有v-else来表示这些条件,这样我们在点击按钮的时候就会进行切换了

6.列表呈现 用v-for函数来实现

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

这是一段综合代码

复制代码
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}


function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

在这里有两种方法更新数组 1.push 2.filter 在这里讲一下filter的用法

const 复制代码
const filteredNumbers = numbers.filter(number => number > 10);

console.log(filteredNumbers); // 输出: [12, 23, 18]

在这个例子中,filter方法接受了一个箭头函数作为回调。这个箭头函数接受number作为参数,并返回一个布尔值,表示number是否大于10。filter方法遍历numbers数组中的每个元素,并使用这个箭头函数来检查每个元素。最后,它返回一个新数组filteredNumbers,包含所有通过测试的元素。

7.conputed属性

复制代码
import { ref, computed } from 'vue';

const apples = ref(3); // 苹果的数量
const oranges = ref(5); // 橘子的数量

// 使用 computed 创建一个计算属性
const totalFruits = computed(() => apples.value + oranges.value);
</script>

<template>
  <div>苹果的数量: {{ apples }}</div>
  <div>橘子的数量: {{ oranges }}</div>
  <div>水果总数: {{ totalFruits }}</div>
</template>

可以理解为,这样我修改一个水果数量的值,总数值会跟着改变

相关推荐
Gracemark3 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼4 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_5 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing6 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工8 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码11 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199411 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光12 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥12 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司12 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js