Vue 实验
项目初始化
# 前提：包管理器安装 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>
