当前位置：首页 > article >正文

Django+Vue全栈开发项目入门（二）

article 2024/10/26 9:15:46

Vue是一款用于构建用户界面的JavaScript渐进式框架，它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、响应式的、组件化的编程模型，有助于高效地开发用户界面。

环境准备

安装Node.js：Vue项目的构建和运行依赖于Node.js环境。可以从Node.js官网下载并安装Node.js，建议安装LTS版本以获得长期支持和稳定性。

验证Node.js安装：在命令行中输入node -v和npm -v，如果正确输出版本号，则表示Node.js和npm安装成功。

父子传递

在Vue.js中，父子组件之间的数据传递是开发过程中常见的需求。Vue提供了一套清晰的机制来实现这一功能，包括父组件向子组件传递数据（props）和子组件向父组件发送消息（事件）。

父组件向子组件传递数据（props）

在Vue中，父组件可以通过在子组件标签上使用自定义属性（即props）来传递数据给子组件。子组件通过props选项来声明它期望接收的数据。

<!-- 父组件 -->  
<template>  
  <div>  
    <ChildComponent :message="parentMessage" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent!'  
    };  
  }  
};  
</script>

<!-- 子组件 -->  
<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: {  
      type: String,  
      required: true  
    }  
  }  
};  
</script>

在这个例子中，父组件通过message prop将parentMessage数据传递给子组件，子组件在模板中通过插值表达式{{ message }}来显示这个数据。

子组件向父组件发送消息（事件）

子组件可以通过触发自定义事件来向父组件发送消息。父组件可以在子组件标签上使用v-on指令（或简写形式@）来监听这些事件，并在事件触发时执行相应的处理函数。

<!-- 父组件 -->  
<template>  
  <div>  
    <ChildComponent @notify="handleNotify" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleNotify(payload) {  
      console.log('Received from child:', payload);  
    }  
  }  
};  
</script>

<!-- 子组件 -->  
<template>  
  <div>  
    <button @click="notifyParent">Notify Parent</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    notifyParent() {  
      this.$emit('notify', 'Hello from Child!');  
    }  
  }  
};  
</script>

在这个例子中，子组件有一个按钮，当点击按钮时，会调用notifyParent方法，该方法通过$emit触发一个名为notify的自定义事件，并传递一个字符串作为参数。父组件监听了这个事件，并在事件触发时执行handleNotify方法，打印出接收到的消息。