随笔分类 -  vue2

1 2 3 4 下一页
vue-子向父传值-自定义事件
摘要：# 子组件向父组件共享数据 子组件向父组件共享数据使用`自定义事件`。 阅读全文
posted @ 2023-08-06 18:13 Young_Yang_Yang 阅读(6) 评论(0) 推荐(0) 编辑
vue-父向子传值-使用自定义属性
摘要：# 1.组件之间的关系 在项目开发中，组件之间的`最常见的关系`分为如下两种： - `父子关系` - `兄弟关系` # 2.父子组件之间的数据共享 父子组件之间的数据共享又分为： 1. `父->子`共享数据 2. `子->父`共享数据 ## 2.1 父组件向子组件共享数据 父组件向子组件共享数据需要 阅读全文
posted @ 2023-08-02 22:21 Young_Yang_Yang 阅读(25) 评论(0) 推荐(0) 编辑
vue2-生命周期-初步了解组件创建的过程
摘要：# 生命周期图示 可以参考vue官方文档给出的”生命周期图示“，进一步理解组件生命周期执行的过程： 生命周期图示：https://v2.cn.vuejs.org/v2/guide/instance.html 阅读全文
posted @ 2023-07-12 23:54 Young_Yang_Yang 阅读(7) 评论(0) 推荐(0) 编辑
vue2-生命周期-了解生命周期和生命周期函数的概念
摘要：# 1.生命周期&生命周期函数 `生命周期`（Life Cycle）是指一个组件从`创建`->`运行`->`销毁`的整个阶段，`强调的是一个时间段`。 `生命周期函数`：是由vue框架提供的`内置函数`，会伴随者组件的生命周期，`自动按次序执行`。 ![image](https://img2023. 阅读全文
posted @ 2023-07-12 23:12 Young_Yang_Yang 阅读(30) 评论(0) 推荐(0) 编辑
vue2-样式冲突-使用deep修改子组件中的样式
摘要：# `/deep/`样式穿透 ```JS Left 组件 ``` 阅读全文
posted @ 2023-07-04 23:41 Young_Yang_Yang 阅读(984) 评论(0) 推荐(0) 编辑
vue2-样式冲突-了解scoped的使用和底层实现原理
摘要：# 组件之间的样式冲突问题 默认情况下，`写在.vue组件中的样式会全局生效`，因此很容易`多个组件之间的样式冲突问题`。 导致组件之间样式冲突的根本原因是： 1. 单页面应用程序中，所有组件的DOM结构，都是基于`唯一的index.html页面`进行呈现的。 1. 每个组件中的样式，都会`影响整个 阅读全文
posted @ 2023-07-03 00:32 Young_Yang_Yang 阅读(33) 评论(0) 推荐(0) 编辑
vue2-props-required必填项
摘要：# props的`required`必填项 ```JS Count 组件 count的值是:{{ count }} +1 ``` 阅读全文
posted @ 2023-07-02 23:12 Young_Yang_Yang 阅读(346) 评论(0) 推荐(0) 编辑
vue2-props-type值类型
摘要：在声明自定义属性时，可以通过`type`来`定义属性的值类型`。示例代码如下： ```JS Count 组件 count的值是:{{ count }} +1 ``` 阅读全文
posted @ 2023-07-02 22:47 Young_Yang_Yang 阅读(60) 评论(0) 推荐(0) 编辑
vue2-props-default默认值
摘要：# props的`default`默认值 在声明自定义属性时，可以通过`default`来`定义属性的默认值`。示例代码如下： ```JS Count 组件 count的值是:{{ count }} +1 ``` 阅读全文
posted @ 2023-07-02 22:36 Young_Yang_Yang 阅读(1066) 评论(0) 推荐(0) 编辑
vue-props-props是只读的
摘要：# props是只读的 vue规定：组件中封装的自定义属性是`只读的`，程序员`不能直接修改`props的值。否则会报错 ```JS Count 组件 count的值是:{{ count }} +1 ``` 要想修改props的值，可以`把props的值转存到data中`，因为data中的数据都是可 阅读全文
posted @ 2023-06-29 00:21 Young_Yang_Yang 阅读(210) 评论(0) 推荐(0) 编辑
vue-props-为count组件声明props自定义属性
摘要：# 组件的`props` props时组件的`自定义属性`，在`封装通用组件`的时候，合理地使用props可以极大的`提高组件的复用性`！ ```JS Count 组件 count的值是:{{init}} +1 ``` 阅读全文
posted @ 2023-06-29 00:05 Young_Yang_Yang 阅读(13) 评论(0) 推荐(0) 编辑
vue组件-使用Vue.component全局注册组件
摘要：# 通过components注册的时`私有子组件` 例如： 在`组件A`的components节点下，注册了`组件F`。 则组件F只能用在组件A中；不能被用在`组件C`中。 # 注册`全局组件` 在vue项目的`main.js`入口文件中，通过`Vue.component()`方法，可以注册全局组件 阅读全文
posted @ 2023-06-27 23:46 Young_Yang_Yang 阅读(115) 评论(0) 推荐(0) 编辑
vue-组件-使用组件的三个步骤
摘要：# 组件之间的`父子关系` ![image](https://img2023.cnblogs.com/blog/1069029/202306/1069029-20230627222336229-924412005.png) # 使用组件的`三个步骤` ![image](https://img2023 阅读全文
posted @ 2023-06-27 23:14 Young_Yang_Yang 阅读(14) 评论(0) 推荐(0) 编辑
vue组件-启用less语法以及唯一根节点
摘要：```js 这是用户自定义的Test.vue {{ username }} 修改用户名 123 ``` 阅读全文
posted @ 2023-06-27 21:58 Young_Yang_Yang 阅读(21) 评论(0) 推荐(0) 编辑
vue组件-在组件中定义methods方法
摘要：```html 这是用户自定义的Test.vue {{ username }} 修改用户名 ``` 阅读全文
posted @ 2023-06-21 00:07 Young_Yang_Yang 阅读(18) 评论(0) 推荐(0) 编辑
vue-cli-组件的三个组成部分
摘要：# vue组件的三个组成部分 每个.vue组件都由3部分构成，分别是： - `template`->组件的`模块结构` - `script`->组件的`JavaScript行为` - `style`->组件的`样式` ```vue 这是用户自定义的Test.vue {{ title }} ``` 阅读全文
posted @ 2023-06-20 23:57 Young_Yang_Yang 阅读(41) 评论(0) 推荐(0) 编辑
vue-cli-了解vue项目运行的过程
摘要：# vue项目的运行流程 在工程化的项目中，vue要做的事情很简单：通过`main.js`把`App.vue`渲染到`index.html`的指定区域中。 ```JS // 导入vue这个包，得到Vue构造函数 import Vue from 'vue' // 导入App.vue根组件，将来要把Ap 阅读全文
posted @ 2023-06-20 23:15 Young_Yang_Yang 阅读(32) 评论(0) 推荐(0) 编辑
vue-cli-了解src目录
摘要：![image](https://img2023.cnblogs.com/blog/1069029/202306/1069029-20230615234501637-1359333858.png) ``` assets文件夹：存放项目中用到的静态资源文件，例如：css样式表、图片资源 compone 阅读全文
posted @ 2023-06-16 00:03 Young_Yang_Yang 阅读(47) 评论(0) 推荐(0) 编辑
vue-cli-演示如何基于vue-cli创建vue项目
摘要：# 1.安装和使用 vue-cli是npm上的一个`全局包`，`使用npm install`命令，即可方便的把它安装到自己的电脑上： ``` npm install -g @vue/cli ``` 基于vue-cli快速生成工程化的Vue项目： `vue create`**项目的名称** ![ima 阅读全文
posted @ 2023-06-14 23:44 Young_Yang_Yang 阅读(7) 评论(0) 推荐(0) 编辑
vue-cli-介绍并安装vue-cli
摘要：#1.什么是vue-cli `vue-cli是Vue.js开发的标准工具`。它简化了程序员基于webpack创建工程化的Vue项目的过程。 #2.安装和使用 vue-cli是npm上的一个`全局包`，`使用npm install`命令，即可方便的把它安装到自己的电脑上： ``` npm instal 阅读全文
posted @ 2023-06-14 22:51 Young_Yang_Yang 阅读(30) 评论(0) 推荐(0) 编辑

1 2 3 4 下一页
点击右上角即可分享
微信分享提示