一、快速创建一个vue项目
-
确保你的机器已经安装了Node.js和npm（npm通常随Node.js一起安装）。
-
打开终端或命令行界面，并导航到你想要创建项目的目录。
-
运行以下命令安装Vue CLI（命令行界面工具）：
npm install -g @vue/cli这将在全局范围内安装Vue CLI，使你可以使用它来快速构建Vue项目。
-
运行以下命令创建一个基于Vue 2的新项目：
vue create my-vue-project将
my-vue-project替换为你想要的项目名称。然后，Vue CLI将向你提供一些选项，让你选择所需的特性和配置。你可以根据项目的需要进行选择，或者使用默认配置。 -
进入项目目录：
cd my-vue-project**
-
运行以下命令启动开发服务器：
npm run serve这将启动一个本地开发服务器，你可以在浏览器中查看和调试你的Vue项目。
二、组件传值：
1.父传子
使用props进行父组件向子组件的数据传递：
父组件可以通过在子组件上绑定属性并传递数据，子组件可以通过props属性接收来自父组件的数据。例如，父组件可以这样传递数据给子组件：
<template>
<div>
<child-component :message="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
data: 'Hello from parent'
};
}
};
</script>
子组件可以通过props接收来自父组件的数据：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
2，子传父
使用事件进行子组件向父组件的数据传递：
子组件可以通过$emit方法触发一个自定义事件，并传递数据给父组件。父组件可以通过在子组件上监听该事件来接收数据。例如，子组件可以这样触发事件：
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('messageSent', 'Hello from child');
}
}
};
</script>
父组件可以在子组件上监听该事件并接收数据：
<template>
<div>
<child-component @messageSent="handleMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
console.log(message); // 输出：Hello from child
}
}
};
</script>
2，子传父数据同步（搭配v-model） watch加v-model做到数据即时传输
<template>
<div>
<input v-model="data">
</div>
</template>
<script>
export default {
data () {
return {
data: ''
};
},
watch: {
data (newValue) {
this.$emit('messageSent', newValue);
}
}
};
</script>
父组件可以在子组件上监听该事件并接收数据：
<template>
<div>
<Son @messageSent="handleMessage"></Son>
<p>{{ message }}</p>
</div>
</template>
<script>
import Son from './SonCom.vue';
export default {
data () {
return {
message: 'Hello'
};
},
components: {
Son
},
methods: {
handleMessage (msg) {
this.message = msg
}
}
};
</script>
