【Vue3】2-13 : 章节总结

ladymorgana

已于 2024-01-15 17:04:08 修改

阅读量452

点赞数 8

分类专栏：架构师之路-java 文章标签： vue.js 前端 javascript Vue3核心概念选项式API

于 2024-01-14 23:24:05 首次发布

本文链接：https://blog.csdn.net/ladymorgana/article/details/135536682

版权

架构师之路-java 专栏收录该内容

210 篇文章 14 订阅

订阅专栏

本书目录：点击进入

一、总结内容

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

2.2 【编程题】以下Vue指令中，哪些指令具备简写方式？

＞效果

＞代码

一、总结内容

了解核心思想，例如：MVVM设计模式、选项式API优势
了解Vue3各个选项的用法，例如：data、methods、computed等
掌握常见的指令：v-bind、v-on、v-if、v-for等
掌握样式操作、表单操作等行为
了解Vue3的生命周期钩子函数，及如何使用

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

        A：v-if
        B：v-bind
        C：v-model
        D：v-on

参考答案： BD ( v-bind简写为 : v-on简写为 @ )

2.2 【编程题】要求如下：

        1. 输入框中内容根据顿号进行分割
        2. 复选项选中添加水果名称到输入框中
        3. 复选框取消选中从输入框中删除水果名称
        4. 输入框可直接输入内容来联动复选框

＞效果

＞代码

<body>
<div id="app">
  <input type="text" v-model="fruitsInput"><br>
  <input type="checkbox" v-model="fruits" value="西瓜">西瓜<br>
  <input type="checkbox" v-model="fruits" value="苹果">苹果<br>
  <input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br>
  <input type="checkbox" v-model="fruits" value="芒果">芒果<br>
</div>
<script>
  let vm = Vue.createApp({
    data() {
      return {
        fruits: ['苹果', '芒果']
      }
    },
    computed: {
      fruitsInput: {
        set(val){
          this.fruits = val.split('、');
        },
        get(){
          return this.fruits.join('、');
        }
      }
    }
  }).mount("#app")
</script>
</body>