vue前端框架基础学习

最新推荐文章于 2023-09-22 15:59:07 发布

每个人都有一段故事

最新推荐文章于 2023-09-22 15:59:07 发布

阅读量247

点赞数 1

分类专栏： vue框架

本文链接：https://blog.csdn.net/qq_40272613/article/details/87114205

版权

vue框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.创建vue项目的两种方式

1.CDN方式，直接下载并用

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

2.NPM方式
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
在这里插入图片描述
搭建脚手架的步骤：
1.安装node.js

2.安装cli脚手架

3.利用脚手架创建一个vue项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019021116353380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shad
4.运行vue项目

2.项目结构分析

在这里插入图片描述

3.组件注册

1.注册全局组件
在这里插入图片描述
2.注册局部组件
这里的components里面的users要加上“ ”号

4.css样式作用域

在这里插入图片描述

5.属性传值

1.父组件向子组件传值
在这里插入图片描述

2.传值和传引用
传引用，一个地方发生改变所有的地方都会发生改变，传值的话一个地方发生改变别的地方不会发生改变

3.子组件向父组件传值
在这里插入图片描述

6.生命周期（钩子函数）

	beforeCreate:function () {
      alert("组件实例化之前执行的函数");
    },
    created:function(){
      alert("组件实例化完毕，但是页面还未显示");
    },
    beforeMount:function () {
      alert("组件挂载前，页面仍未展示，但虚拟Dom已经配置");
    },
    mounted:function () {
      alert("组件挂载后，此方法执行后，页面显示")
    },
    beforeUpdate:function () {
      alert("组件更新前，页面仍未更新，但虚拟Dom已经配置");
    },
    updated:function () {
      alert("组件更新后，此方法执行后，页面显示")
    },
    beforeDestroy:function () {
      alert("组件销毁前")
    },
    destroyed:function () {
      alert("组件销毁后")
    }