Vue组件与Vue cli脚手架安装方法超详细讲解

目录

• 计算属性
• 监听属性
• 组件介绍和定义
• 父子通信
• 父传子
• 子传父
• ref属性
• 动态组件
• 插槽
• vue-cli

计算属性

计算属性关键字：computed

每次页面刷新都会重新加载数据，而我们有时候退出页面再返回页面后希望保持原来选择商品的价格总价，这是就可以运用到计算属性：只有涉及到计算属性中使用的变量发生变化它才会重新运算

     ---》》 {{handleUpper()}}
    

    --->{{upper}}

监听属性

监听属性关键字：watch

当监听的属性发生变化时，会自动调用回调函数执行相关操作

     人文|社科|地理
    

    {{type}}

组件介绍和定义

组件的介绍

为了提高代码的可重用性，减少代码的重复开发，我们可以把代码封装到一个自定义标签内。以.vue结尾的文件一般由三部分组成：template、script、style

- 组件导出：export default{}

- 组件导入：import Hello World from“./components/HelloWorld.vue”

组件定义

- 全局组件：全局可以使用，可以用在任意其它组件中

    
全局组件
    

- 局部组件：局部组件只能在定义的位置(组件中)使用

    
局部组件
    
    

父子通信

父传子

父子组件可以理解为组件中再嵌套一个组件，他们的定义和普通组件是一样的只是多了一个嵌套；父组件中需要声明子组件，引入子组件对象

ps：无论是哪种类型的组件每个组件都相当于一个完整的vue实例，组件与组件之间的数据是不互通的

- 子组件使用父组件数据关键字：props

    
自定义事件实现父子通信之子传父
    父组件中的name值为：{{name}}
    

    
    

子传父

- 子组件向父组件传递必须通过自定义事件来完成

ref属性

可以放在普通标签上，通过this.$refs.自定义的名字取到的是 原生的dom对象

- 使用原生dom操作了(不推荐)

可以放在组件上：通过this.$refs.自定义的名字取到的是 vc对象(组件对象)，

可以之间使用组件对象上的方法和属性---》子的数据给了父亲

- 父组件有个方法执行，需要传参数，传入子组件的数据---》子的数据给了父亲

- 拿到子对象之间使用父中的数据修改----》父传子

    
ref属性放在普通标签上
    ====>{{name}}
    

    点我，打印点东西
    

动态组件

点击不同的标签展示不同的组件

    

        首页|
        商品|
        订单
    
    

        
    

插槽

简单理解就是组件内部留一个或多个的插槽位置，可供组件传对应的模板代码进去。插槽的出现，让组件变的更加灵活

    
插槽的使用
    
        
    
    

    
        
我是div
    
    

    
        

            我是底部
        
        点我看美女
    

vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架，能快速的帮我们创建出vue2和vue3项目------->>>目前新一代构建工具：Vite创建vue3项目推荐使用ts写

第一步先安装nodejs后端语言

- 官网：https://nodejs.org/zh-cn/download/

- 安装完释放两个命令：node、npm等同于python3和pip

- npm下载得去国外速度慢可以直接取淘宝镜像站下载cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步安装vue-cli

- 安装成功会多出一个可执行文件 vue

cnpm install -g @vue/cli

- 创建vue项目

vue create 项目名

第三步ide的选择

- vscode、webstorm：跟pycharm同公司使用比较友好

第四步安装axios

- 选择自定义：Manually select features

- 通过上下键选择空格选中或取消：Babel、Router、Vuex其它都不要选

- 选择版本号：3.x、2.x

- 选择In package.json来做包管理 

到此这篇关于Vue组件与Vue cli脚手架安装方法超详细讲解的文章就介绍到这了,更多相关Vue组件 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！