![](https://img-blog.csdnimg.cn/990f3f390cec433d93df3c1772550d73.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
② vue
文章平均质量分 59
vue
悠闲的线程池
纸上得来终觉浅,绝知此事要躬行!半山腰人太多,所以我们顶峰相见吧!!!
展开
-
atguigu----脚手架--02-使用脚手架(2)
props配置项功能:让组件接收外部传过来的数据传递数据:接收数据:第一种方式(只接收):第二种方式(限制类型):第三种方式(限制类型、限制必要性、指定默认值):mixin(混入)功能:可以把多个组件共用的配置提取成一个混入对象使用方式:第一步定义混合:第二步使用混入:全局混入:局部混入:插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。定义插件:使用插件:main.js原创 2022-06-30 20:42:05 · 47 阅读 · 0 评论 -
atguigu----脚手架--01-初始化脚手架
\1. Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。\2. 最新的版本是 4.x。\3. 文档: https://cli.vuejs.org/zh/。第一步(仅第一次执行):全局安装@vue/cli。第二步:切换到你要创建项目的目录,然后使用命令创建项目第三步:启动项目备注:\1. 如出现下载缓慢请配置 npm 淘宝镜像:\2. Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置, 请执行:...原创 2022-06-25 00:00:13 · 1500 阅读 · 0 评论 -
atguigu----18-组件
vue组件原创 2022-06-24 23:57:41 · 97 阅读 · 0 评论 -
atguigu----17-生命周期
生命周期图解[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wglqSVgl-1656084744893)(images/生命周期.png)]分析生命周期原创 2022-06-24 23:32:52 · 41 阅读 · 0 评论 -
atguigu----16-自定义指令
(1).局部指令: new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} })原创 2022-06-24 00:43:18 · 64 阅读 · 0 评论 -
atguigu----15-内置指令
v-text指令:1.作用:向其所在的节点中渲染文本内容。2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。v-htmlv-html指令:1.作用:向指定节点中渲染包含html结构的内容。2.与插值语法的区别:(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意:v-html有安全性问题!!!!(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。(2).一定要在可信的内容上使原创 2022-06-23 23:52:02 · 44 阅读 · 0 评论 -
atguigu----过滤器
vue过滤器原创 2022-06-21 17:46:42 · 35 阅读 · 0 评论 -
atguigu----收集表单数据
vue收集表单数据原创 2022-06-21 17:25:56 · 43 阅读 · 0 评论 -
atguigu----列表渲染
key原理列表过滤计算属性(推荐)列表排序vue监视原理更新时的一个问题vue没有检测到这次修改vue.set该api不是万能的vue.set方法也可以触发原创 2022-06-21 11:02:58 · 56 阅读 · 0 评论 -
atguigu----条件渲染
vue条件渲染原创 2022-06-21 09:25:27 · 39 阅读 · 0 评论 -
atguigu----绑定样式
三种方式原创 2022-06-20 15:19:00 · 130 阅读 · 1 评论 -
atguigu----监视属性
vue监听属性原创 2022-06-20 13:51:19 · 64 阅读 · 0 评论 -
atguigu----计算属性
计算属性原创 2022-06-20 11:23:08 · 55 阅读 · 0 评论 -
atguigu----事件处理
vue事件处理原创 2022-06-20 11:22:37 · 106 阅读 · 0 评论 -
atguigu----数据代理
vue数据代理原创 2022-06-20 09:58:17 · 45 阅读 · 0 评论 -
atguigu----理解MVVM
vueMVVM原创 2022-06-20 09:13:07 · 86 阅读 · 0 评论 -
atguigu----el与data的两种写法
vue的el与data的两种写法的原创 2022-06-20 08:57:31 · 69 阅读 · 0 评论 -
atguigu----数据绑定
vue数据绑定原创 2022-06-20 08:33:44 · 45 阅读 · 0 评论 -
atguigu----模板语法
vue模板语法原创 2022-06-20 08:26:55 · 60 阅读 · 0 评论 -
atguigu----初识vue (Hello world)
vue初识原创 2022-06-20 08:11:05 · 55 阅读 · 0 评论 -
js ---- 数组操作
JS获取对象数组的某个属性集合var data = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }];// 使用了 ES6 语法data.map(item => item.a)// 兼容的写法data.map(f原创 2021-12-03 14:54:30 · 68 阅读 · 0 评论 -
js ---- 对象转JSON,JSON转对象
对象转JSONJSON.stringify(obj)JOSN 字符串转对象JSON.parse(jsonString)判断对象是否为空对象var data = {};var b = JSON.stringify(data) == "{}";alert(b); //trueObject.keys(obj)返回不包括原型上的可枚举属性,即自身的可枚举属性var data = {};var b = Object.keys(data).length === 0;Objcet.getOw原创 2021-12-02 14:17:19 · 550 阅读 · 0 评论 -
vue ---- 插槽
插槽的概念如果在使用组件的时候,在组件的内部放入一些内容,组件如果没有定义插槽的话,组件是不知道要放在那里的,所以就不会被显示。如果组件内部定义了这个区域,哪个这个组件中放的内容就会被渲染到指定的位置上入门案例Left组件定义:<template> <div class="left-container"> <h3>Left 组件</h3> <hr /> <!-- 声明一个插槽区域 --> <slot&原创 2021-11-22 14:55:50 · 381 阅读 · 0 评论 -
vue ---- 动态组件
动态切换组件的显示隐藏component如何实现动态组件渲染vue提供了一个内置的<component>,专门用来实现动态组件的渲染。这个标签就相当于一个占位符,需要使用is属性指定绑定的组件<button @click="comName = 'Left'">展示Left</button><button @click="comName = 'Right'">展示Right</button><div class="box">原创 2021-11-22 11:15:56 · 1950 阅读 · 0 评论 -
vue ---- 组件综合案例(购物车案例)
获取数据装包npm i axios -S,在app.vue中导入axiosAPP组件中获取数据的方法,和 生命周期函数 methods: { //封装请求列表数据的方法 async initCarList(){ //调用 axios 的get方法,请求列表数据 const {data:res} = await axios.get('https://www.escook.cn/api/cart')原创 2021-11-16 19:09:13 · 690 阅读 · 0 评论 -
vue ---- 数组的常用方法
forEach 一旦开始,无法在中间停止const arr = ['a','b','c','d']arr.forEach((item,index) => { if(item === 'b'){ console.log(index); }})如果要找到某个列数据建议使用somearr.some((item,index) => { if(item === 'b'){ console.log(index) return true//可以终止循环 }})判断是否全原创 2021-11-07 01:36:55 · 176 阅读 · 0 评论 -
vue ---- ref
ref的使用获取HTML的dom元素① 添加ref属性<h1 ref="zs1">App 根组件 {{books.length}}</h1>②从vue对象中获取 this.$refs.zs1<h1 ref="zs1">App 根组件 {{books.length}}</h1><button @click="changeColor">点击变红</button>changeColor(){ console.log(this原创 2021-11-06 18:27:14 · 351 阅读 · 0 评论 -
vue ----组件数据共享
组件之间的关系对于直接的父子关系看成父子关系,其他的不直接的都看作兄弟关系父子关系父传子(自定义属性)使用自定义属性注意: 对于简单类型,是复制一份传到子组件中对于对象类型,是传递的对象的引用,子组件修改会影响父组件内容子传父(自定义事件)兄弟(EventBus)...原创 2021-11-06 01:08:55 · 89 阅读 · 0 评论 -
vue ---- 生命周期
生命周期生命周期:创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段。生命周期函数: 是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行注意: 生命周期 是时间段,生命周期函数 是时间点使用组件的时候就会创建一个实例对象,接下来会初始化事件和生命周期函数beforeCreate : 该阶段什么都做不了初始化props,data,methodscreated : 数据可用了,但组件的模板结构未生成,不能操作dom该阶段可以用于发起ajax请求获取原创 2021-11-06 00:10:20 · 92 阅读 · 0 评论 -
vue ---- 组件
组件: 对UI解构的封装组件的三个组成部分templatescriptstyle<template> <h3>{{ username }}</h3></template><script>//默认导出,固定写法export default { //组件中的data不能是个对象 data(){ //这个return出去的{}中,可以定义数据 return{ username: 'GaiGai原创 2021-11-04 14:30:59 · 183 阅读 · 0 评论 -
vue ----vue-cli
vue-cli简化了webpack创建工程化的vue项目的过程vue-cli 是 npm 上的一个全局包,使用npm installnpm install -g @vue/cli基于 vue-cli 快速生成工程化的 vue 项目:vue create 项目名称查看是否安装成功vue -V创建项目1、cd 到指定项目创建位置的目录2、vue create xxx初学手动选择最后一项插件的配置项放到自己独立的配置文件中是否存预设npm run serve目录原创 2021-11-04 14:04:31 · 91 阅读 · 0 评论 -
vue ----axios
axios 只负责发送网络请求基本使用① 导入库文件,可以在window全局使用axios()②发送请求axios({ method: '请求的类型', //GET url: '请求的 URL 地址'}).then((result) => { //.then 用来指定请求后的回调 //形参中result是请求后的结果})<body> <script src="./lib/axios.js"></script> <scr原创 2021-11-04 11:40:08 · 164 阅读 · 0 评论 -
vue ---- 计算属性
RGB案例使用v-model + v-bind 属性绑定 + 模板字符串实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co原创 2021-11-04 11:06:01 · 79 阅读 · 0 评论 -
vue ---- 监听器
watch 监听器 允许开发者监视数据的变化,从而针对数据的变化做特定的操作。 const vm = new Vue({ el: '#app', data: { username: '' }, //监听器需要定义在watch节点下 watch: { //监听 username 值的变化,要监听哪个值,就做为方法名 username(newVal,oldVal){ console.log(newVal,oldVal) }原创 2021-11-04 10:42:30 · 125 阅读 · 0 评论 -
vue ---- filter(vue2才有)
{{ message | capi }}私有过滤器的使用: 定义到vue实例中的过滤器都是私有过滤器 <div id="app"> <!-- 通过 | 可以获取到待处理的参数值 --> {{ message | capi }} </div> const vm = new Vue({ el: '#app', data: { message: 'hello vue' },原创 2021-11-04 10:04:36 · 93 阅读 · 0 评论 -
vue ---- 指令综合案例
代码地址: https://codechina.csdn.net/weixin_44235759/vue-brand-list-demo案例分析:列表如何渲染数据源list: [ { id: 1, name: '宝马', status: true, now: Date() }, { id: 2, name: '奔驰', status: false, now: Date() }, { id: 3, name: '奥迪', status: true, now: Da.原创 2021-11-04 00:30:09 · 152 阅读 · 0 评论 -
Vue ---- 指令
指令: 是Vue提供的模板语法,用于辅助开发者渲染页面的基本结构Vue中的指令按照不同的用途分 6 类:① 内容渲染指令② 属性绑定指令③ 时间绑定指令④ 双向绑定指令⑤ 条件渲染指令⑥ 列表渲染指令注意:指令是 vue 开发中最基础,简单的知识点。1、内容渲染指令v-textv-text 会覆盖元素内部原有的内容用法示例<!--吧 username 对应的值,渲染到第一个 p 标签中--><p v-text="username"></p&g原创 2021-11-03 13:49:09 · 402 阅读 · 0 评论 -
vue ---- vue 的入门程序
入门程序① 导入 vue.js 的 script 脚本文件② 在页面中声明一个将要被 vue 所控制的 DOM 区域③ 创建 vm 实例对象(vue 实例对象)<body> <!-- 希望 Vue 能够控制下面这个 div,帮我们吧数据填充到 div 内部 --> <div id="app">{{ username }}</div> <!-- 1. 导入Vue的库文件, 在 window 全局就有了 Vue 这个构造函数原创 2021-11-02 19:14:42 · 94 阅读 · 0 评论 -
vue ---- vue简介
vue: 构建用户见面的前端框架学习Vue,就是学习Vue框架中规定的用法vue指令、组件(对UI结构的复用)、路由、vuex、vue组件库数据驱动视图: 数据的变化会驱动视图的自动更新数据变化,页面会自动重新渲染单向的数据绑定双向数据绑定: 填写表单时,不操作DOM,可以自动的同步到数据源中不用手动操作DOM元素,来获取表单元素最新的值!MVVM版本当前,vue 共有 3 个大版本,其中:2.x 版本的 vue 是目前企业级项目开发中的主流版本3.x 版..原创 2021-11-02 18:42:23 · 105 阅读 · 0 评论 -
vue ---- webpack扩展
实验步骤1. 在src目录下创建js/test/info.js步骤2. 在src目录下创建msg.js步骤3. 在msg.js中添加如下//向外导出一个对象export default { msg: 'hello vue'}步骤4. 在info.js中添加如下import msg from '../../msg';console.log(msg);步骤5. 在index.js中添加如下import './js/test/info.js';运行结果问题所在在inf原创 2021-11-02 18:19:17 · 244 阅读 · 0 评论