Vue 实验

合集 - 其他实验(9)

1.JVM 调优实验2023-11-032.Linux 实验2023-11-033.类加载器实验2023-11-034.MySQL 实验2023-11-07

5.Vue 实验2023-11-12

6.GDB 实验2023-11-137.Tmux 实验2023-11-138.C 头文件实验2023-11-209.Redis 实验2024-03-18

收起

项目初始化

# 前提：包管理器安装 vue-cli
vue create 项目名称

Vue 2

实验目的

了解 Vue 2 的组件实现机制

• 数据绑定机制
  • 双向绑定：input
  • 单向绑定
    • 父组件 → 子组件：父组件传入的参数
    • 组件 → 用户：页面内部参数
• 属性监听机制：被监听的参数

实验内容

实现一个简单的组件，体现上述两种机制

示例代码

父组件

<template>
  <div id="app">
    <HelloWorld msg="父组件参数"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
</style>

子组件

<template>
  <div style="background-color: cornflowerblue">
    <h3>Hello World Component</h3>
    <div>父组件传入的参数：{{ msg }}</div>
    <div>页面内部参数：{{ inner_msg }}</div>
    <div @click="increaseMessage">被监听的参数：{{ watched_msg }}</div>
    <div>用户输入：<input v-model="user_input" @input="displayUserInput"/></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inner_msg: '页面内部参数',
      watched_msg: 0,
      user_input: '',
    }
  },
  props: {
    msg: String
  },
  methods: {
    increaseMessage() {
      this.watched_msg++;
    },
    
    displayUserInput() {
      console.log('用户输入：', this.user_input);
    }
  },
  watch: {
    watched_msg(newValue, oldValue) {
      console.log(`消息从 ${oldValue} 变成了 ${newValue}`);
      // alert(`消息从 ${oldValue} 变成了 ${newValue}`);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Vue 3

实验目的

了解 Vue 3 的组件实现机制，体会两种不同的 script 写法

• 数据绑定机制
  • 双向绑定：input
  • 单向绑定
    • 父组件 → 子组件：父组件传入的参数
    • 组件 → 用户：页面内部参数
• 属性监听机制：被监听的参数
• Vue 3 新增语法糖 <script setup>

实验内容

实现两个简单的组件，体现上述三种机制，对比有无 setup 的区别

示例代码

父组件

不带 setup 的实现

<template>
  <div id="app">
    <HelloWorld msg="父组件参数"/>
    <HelloWorldSetup msg="父组件参数"/>
  </div>
</template>

<script>
// 导入组件
import HelloWorld from './components/HelloWorld.vue'
import HelloWorldSetup from "@/components/HelloWorldSetup";
  
export default {
  name: 'App',
  // 注册组件
  components: {
    HelloWorldSetup,
    HelloWorld
  }
}
</script>

<style>
</style>

带 setup 的实现

• 不用写 export 语句 → 只需导入组件，无需注册组件

<template>
  <div id="app">
    <HelloWorld msg="父组件参数"/>
    <HelloWorldSetup msg="父组件参数"/>
  </div>
</template>

<script setup>
// 导入组件
import HelloWorld from './components/HelloWorld.vue'
import HelloWorldSetup from "@/components/HelloWorldSetup";
</script>

<style>
</style>

子组件

不带 setup 的实现

<template>
  <div style="background-color: cornflowerblue">
    <h3>Hello World Component</h3>
    <div>父组件传入的参数：{{ msg }}</div>
    <div>页面内部参数：{{ inner_msg }}</div>
    <div @click="increaseMessage">被监听的参数：{{ watched_msg }}</div>
    <div>用户输入：<input v-model="user_input" @input="displayUserInput"/></div>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  setup() {
    //region 数据监听
    //声明响应式数据
    const watched_msg = ref(0);

    // 定义点击按钮时的操作
    const increaseMessage = () => {
      watched_msg.value++;
    };

    // 响应式数据的改变监控
    watch(watched_msg, (newValue, oldValue) => {
      console.log(`消息从 ${oldValue} 变成了 ${newValue}`);
      // alert(`消息从 ${oldValue} 变成了 ${newValue}`);
    });
    //endregion

    //region 读取用户输入
    //声明响应式数据
    const user_input = ref('');
    // 显示用户输入
    const displayUserInput = () => {
      console.log('用户输入：', user_input.value);
    };
    //endregion

    return {
      inner_msg: '内部参数',
      watched_msg,
      increaseMessage,
      user_input,
      displayUserInput,
    }
  },

  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

带 setup 的实现

• 不用写 export 语句
• 不用套一层 setup()
  • → 不用写 return 语句
• 通过 defineProps 获取父组件传递的参数

<template>
  <div style="background-color: palevioletred">
    <h3>Hello World Component</h3>
    <div>父组件传入的参数：{{ props.msg }}</div>
    <div>页面内部参数：{{ inner_msg }}</div>
    <div @click="increaseMessage">被监听的参数：{{ watched_msg }}</div>
    <div>用户输入：<input v-model="user_input" @input="displayUserInput"/></div>
  </div>
</template>

<script setup>
import {ref, watch, defineProps} from "vue";
const inner_msg = ref('内部参数');
const props = defineProps({
  msg: String
})

//region 数据监听
//声明响应式数据
const watched_msg = ref(0);

// 定义点击按钮时的操作
const increaseMessage = () => {
  watched_msg.value++;
};

// 响应式数据的改变监控
watch(watched_msg, (newValue, oldValue) => {
  console.log(`消息从 ${oldValue} 变成了 ${newValue}`);
  // alert(`消息从 ${oldValue} 变成了 ${newValue}`);
});
//endregion

//region 读取用户输入
//声明响应式数据
const user_input = ref('');

// 显示用户输入
const displayUserInput = () => {
  console.log('用户输入：', user_input.value);
};
//endregion

</script>

<style scoped>
</style>

参考文档

vue3新语法糖——setup script