vue2基础知识-2

不点外卖

已于 2022-11-02 21:50:59 修改

阅读量269

点赞数

分类专栏： vue知识文章标签： vue.js webpack javascript

于 2022-11-02 21:49:28 首次发布

本文链接：https://blog.csdn.net/weixin_43484007/article/details/127621429

版权

Vue CLI 安装和使用

安装Vue CLI脚手架

npm install @vue/cli -g

查看Vue CLI版本

vue --version

用Vue CLI创建项目

vue create entry_name

运行原理：
在这里插入图片描述

Vue.config.js配置

官方文档

Vue Cli已经集成了webpack的配置，想要增加一些其他的webpack配置的话，可以通过configureWebpack属性进行更改。
在这里插入图片描述
当我们配置了上述的路径别名后，在引用路径的时候vue可能不会给我们一些提示，此时我们可以更改jsconfig.json文件来实现提示。

组件嵌套

在这里插入图片描述

组件通信

父传子 props

通过props属性传递：
App.vue
在这里插入图片描述
AppHeader.vue:

<template>
    <div>
        Header
        <h1>名字：{
  { name }}</h1>
        <h1>年龄：{
  { age }}</h1>
        <h1>朋友: {
  {friend.name}}</h1>
    </div>
</template>

<script>
    export default {
     
        // 1. pros数组语法
        // props: [
        //     "name",
        //     "age"
        // ]

        // 2.pros对象语法（推荐）
        props: {
     
            name: {
     
                type: String,
                default: "默认值"
            },
            age: Number,
            // 如果传过来的是一个函数，且需要设置默认值的话，必须使用函数的形式返回默认值
            friend: {
     
                type: Object,
                default: () => ({
     name: '李四', sex: '男'})
            }

        }
    }
</