06 2023 档案

摘要:# props是只读的 vue规定:组件中封装的自定义属性是`只读的`,程序员`不能直接修改`props的值。否则会报错 ```JS Count 组件 count的值是:{{ count }} +1 ``` 要想修改props的值,可以`把props的值转存到data中`,因为data中的数据都是可 阅读全文
posted @ 2023-06-29 00:21 Young_Yang_Yang 阅读(210) 评论(0) 推荐(0) 编辑
摘要:# 组件的`props` props时组件的`自定义属性`,在`封装通用组件`的时候,合理地使用props可以极大的`提高组件的复用性`! ```JS Count 组件 count的值是:{{init}} +1 ``` 阅读全文
posted @ 2023-06-29 00:05 Young_Yang_Yang 阅读(13) 评论(0) 推荐(0) 编辑
摘要:# 通过components注册的时`私有子组件` 例如: 在`组件A`的components节点下,注册了`组件F`。 则组件F只能用在组件A中;不能被用在`组件C`中。 # 注册`全局组件` 在vue项目的`main.js`入口文件中,通过`Vue.component()`方法,可以注册全局组件 阅读全文
posted @ 2023-06-27 23:46 Young_Yang_Yang 阅读(115) 评论(0) 推荐(0) 编辑
摘要:# 组件之间的`父子关系` ![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) 编辑
摘要:```js 这是用户自定义的Test.vue {{ username }} 修改用户名 123 ``` 阅读全文
posted @ 2023-06-27 21:58 Young_Yang_Yang 阅读(21) 评论(0) 推荐(0) 编辑
摘要:```html 这是用户自定义的Test.vue {{ username }} 修改用户名 ``` 阅读全文
posted @ 2023-06-21 00:07 Young_Yang_Yang 阅读(18) 评论(0) 推荐(0) 编辑
摘要:# vue组件的三个组成部分 每个.vue组件都由3部分构成,分别是: - `template`->组件的`模块结构` - `script`->组件的`JavaScript行为` - `style`->组件的`样式` ```vue 这是用户自定义的Test.vue {{ title }} ``` 阅读全文
posted @ 2023-06-20 23:57 Young_Yang_Yang 阅读(41) 评论(0) 推荐(0) 编辑
摘要:# 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) 编辑
摘要:![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) 编辑
摘要:# 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) 编辑
摘要:#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) 编辑
摘要:```HTML 发起POST请求 发起GET请求 GET POST ``` 阅读全文
posted @ 2023-06-14 00:21 Young_Yang_Yang 阅读(22) 评论(0) 推荐(0) 编辑
摘要:```HTML 发起POST请求 发起GET请求 ``` 阅读全文
posted @ 2023-06-13 23:35 Young_Yang_Yang 阅读(56) 评论(0) 推荐(0) 编辑
摘要:```HTML 发起POST请求 ``` 阅读全文
posted @ 2023-06-13 22:58 Young_Yang_Yang 阅读(100) 评论(0) 推荐(0) 编辑
摘要:> axios是一个专注于网络请求的库! ```HTML ``` 阅读全文
posted @ 2023-06-12 23:23 Young_Yang_Yang 阅读(97) 评论(0) 推荐(0) 编辑
摘要:特点: 1. 定义的时候,要被定义为”方法“ 1. 在使用计算属性的时候,当普通的属性使用即可 好处: 1. 实现了代码的复用 1. 只要计算属性中依赖的数据源,则计算属性会自动重新求值 ```HTML Document R: G: B: {{ `rgb(${r}, ${g}, ${b})` }} 阅读全文
posted @ 2023-06-12 22:49 Young_Yang_Yang 阅读(50) 评论(0) 推荐(0) 编辑
摘要:# 1.什么是计算属性 计算属性指的是`通过一系列运算`之后,最终得到一个`属性值`。 `这个动态计算出来的属性值`可以被模板结构或methods方法使用。 ```HTML Document R: G: B: {{ `rgb(${r}, ${g}, ${b})` }} 按钮 ``` 阅读全文
posted @ 2023-06-12 22:43 Young_Yang_Yang 阅读(32) 评论(0) 推荐(0) 编辑
摘要:```HTML ``` 阅读全文
posted @ 2023-06-11 23:34 Young_Yang_Yang 阅读(16) 评论(0) 推荐(0) 编辑
摘要:```HTML ``` 阅读全文
posted @ 2023-06-11 00:33 Young_Yang_Yang 阅读(26) 评论(0) 推荐(0) 编辑
摘要:```HTML ``` 阅读全文
posted @ 2023-06-10 23:59 Young_Yang_Yang 阅读(12) 评论(0) 推荐(0) 编辑
摘要:# 什么是watch侦听器 `watch侦听器`允许开发者监视数据的变化,从而`针对数据的变化做特定的操作`。 1. 方法格式的侦听器 - 缺点1:无法在刚进入页面的时候,自动触发!!!! - 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!!! 1. 对象格式的侦听器 - 阅读全文
posted @ 2023-06-09 00:29 Young_Yang_Yang 阅读(11) 评论(0) 推荐(0) 编辑
摘要:# `私有过滤器`和`全局过滤器` 在filters节点下定义的过滤器,称为”`私有过滤器`“,因为它`它只能在当前VM实例所控制的el区域内使用`。如果希望`在多个vue实例之间共享过滤器`,则可以按照如下的格式定义`全局过滤器`: ```HTML message的值是:{{message | c 阅读全文
posted @ 2023-06-08 22:58 Young_Yang_Yang 阅读(80) 评论(0) 推荐(0) 编辑
摘要:# 过滤器 `过滤器`(`Filters`)是vue为开发者提供的功能,常用于`文本的格式化`。过滤器可以用在两个地方:`插值表达式`和`v-bind属性绑定`。 过滤器应该被添加在JavaScript表达式的`尾部`,由"`管道符`"进行调用,示例代码如下: ```HTML message的值是: 阅读全文
posted @ 2023-06-08 00:10 Young_Yang_Yang 阅读(14) 评论(0) 推荐(0) 编辑
摘要:# key的注意事项 1. key的值只能是`字符串`或`数字`类型 1. key的值`必须具有唯一性`(即:key的值不能重复) 1. 建议把`数据项id属性的值`作为key的值(因为id属性的值具有唯一性) 1. 使用`index的值`当作key的值`没有任何意义`(因为index的值不具有唯一 阅读全文
posted @ 2023-06-06 23:16 Young_Yang_Yang 阅读(85) 评论(0) 推荐(0) 编辑
摘要:# 列表渲染指令 vue提供了`v-for`列表渲染指令,用来辅助开发者`基于一个数组来循环渲染一个列表结构`。v-for指令需要使用`item in items`形式的特殊语法,其中: - items是`待循环的数组` - item是`被循环的每一项` v-for指令还支持一个`可选的`第二个参数 阅读全文
posted @ 2023-06-06 22:44 Young_Yang_Yang 阅读(153) 评论(0) 推荐(0) 编辑
摘要:# v-else v-if可以单独使用,或配合v-else指令一起使用: 注意:v-else指令`必须配合`v-if指令一起使用,否则它将不会被识别! # v-else-if v-else-if指令,顾名思义,充当v-if的”else-if块“,可以连续使用: 注意:v-else-if指令`必须配合 阅读全文
posted @ 2023-06-06 00:24 Young_Yang_Yang 阅读(33) 评论(0) 推荐(0) 编辑
摘要:#条件渲染指令 `条件渲染指令`用来辅助开发者`按需控制DOM的显示与隐藏`。条件渲染指令有如下两个,分别是: - v-if的原理是:每次动态创建或移除元素,实现元素的显示和隐藏 - 如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素也不需要被展示出来,此时v-if性能更好 - v-s 阅读全文
posted @ 2023-06-06 00:13 Young_Yang_Yang 阅读(27) 评论(0) 推荐(0) 编辑
摘要:# v-model指令的修饰符 `为了方便对用户输入的内容进行处理`,vue为v-model指令提供了3个修饰符,分别是 | 修饰符 | 作用 | 示例 | | | | | | .number | 自动将用户的输入值转为数值类型 | | | .trim | 自动过滤用户输入的首尾空白字符 | | | 阅读全文
posted @ 2023-06-05 23:15 Young_Yang_Yang 阅读(25) 评论(0) 推荐(0) 编辑
摘要:# 双向绑定指令 vue提供了`v-model双向数据绑定`指令,用来辅助开发者在`不操作DOM`的前提下,`快速获取表单的数据`。 input、textarea、select可以使用v-model指令 ```html 用户的名字是:{{username}} ``` 阅读全文
posted @ 2023-06-05 01:09 Young_Yang_Yang 阅读(25) 评论(0) 推荐(0) 编辑
摘要:# 按键修饰符 在监听`键盘事件`时,我们经常需要`判断详细的按键`。此时,可以为`键盘相关的事件`添加`按键修饰符`,例如: ```html ``` 阅读全文
posted @ 2023-06-05 00:52 Young_Yang_Yang 阅读(6) 评论(0) 推荐(0) 编辑
摘要:# 事件修饰符 在事件处理函数中调用`event.preventDefault()`或`event.stopPropagation()`是非常常见的需求。因此,vue提供了`事件修饰符`的概念,来辅助程序员更方便的`对事件的触发进行控制`。常用的5个事件修饰符如下: | 事件修饰符 | 说明 | | 阅读全文
posted @ 2023-06-04 23:20 Young_Yang_Yang 阅读(13) 评论(0) 推荐(0) 编辑
摘要:```HTML count的值是:{{count}} +N ``` 阅读全文
posted @ 2023-06-04 22:44 Young_Yang_Yang 阅读(63) 评论(0) 推荐(0) 编辑
摘要:```HTML count的值是{{count}} +1 -1 +1 -1 --> ``` 阅读全文
posted @ 2023-06-04 22:25 Young_Yang_Yang 阅读(13) 评论(0) 推荐(0) 编辑
摘要:```html count的值是{{count}} +1 -1 ``` 阅读全文
posted @ 2023-06-03 00:54 Young_Yang_Yang 阅读(5) 评论(0) 推荐(0) 编辑
摘要:```HTML count的值是{{count}} +1 -1 ``` 阅读全文
posted @ 2023-06-03 00:52 Young_Yang_Yang 阅读(6) 评论(0) 推荐(0) 编辑
摘要:```HTML count的值是{{count}} +1 -1 ``` 阅读全文
posted @ 2023-06-03 00:46 Young_Yang_Yang 阅读(3) 评论(0) 推荐(0) 编辑
摘要:# 事件绑定指令 vue提供了`v-on事件绑定`指令,用来辅助程序员为DOM元素绑定事件监听。语法格式如下: ```HTML count的值是{{count}} +1 ``` 阅读全文
posted @ 2023-06-03 00:25 Young_Yang_Yang 阅读(35) 评论(0) 推荐(0) 编辑
摘要:# 使用Javascript表达式 在vue提供的模板渲染语法中,除了支持`绑定简单的数据值`之外,还`支持Javascript表达式的运算`,例如: ```html 1+2的结果是:{{1+2}} {{tips}}反转的结果是:{{tips.split('').reverse().join('') 阅读全文
posted @ 2023-06-02 23:55 Young_Yang_Yang 阅读(31) 评论(0) 推荐(0) 编辑
摘要:# 属性绑定指令 注意:插值表达式只能用在元素的**内容节点**中,不能用在元素的**属性节点**中! 如果需要为`元素的属性`动态绑定`属性值`,则需要用到`v-bind`属性绑定指令。用法示例如下: 在vue中,可以使用 v-bind:指令,为元素的属性动态绑定值; 简写是英文的 `:` ``` 阅读全文
posted @ 2023-06-02 00:06 Young_Yang_Yang 阅读(176) 评论(0) 推荐(0) 编辑
摘要:# 1.指令的概念 `指令(Directives)`是vue为开发者提供的`模板语法`,用于`辅助开发者渲染页面的基本结构`。 vue中的指令`按照不同的用途`可以分为如下6大类: 1. `内容渲染`指令 1. `属性绑定`指令 1. `事件绑定`指令 1. `双向绑定`指令 1. `条件渲染`指令 阅读全文
posted @ 2023-06-01 23:48 Young_Yang_Yang 阅读(88) 评论(0) 推荐(0) 编辑
摘要:![image](https://img2023.cnblogs.com/blog/1069029/202305/1069029-20230531235559951-409566754.png) ![image](https://img2023.cnblogs.com/blog/1069029/20 阅读全文
posted @ 2023-06-01 00:02 Young_Yang_Yang 阅读(6) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示