VUE
关注
分享
扫一扫
文章平均质量分 56
VUE基础知识
moonbaby1
记录学习
展开
-
修改默认配置\ref属性\props配置
一.修改默认配置终端输入vue inspect > output.js会在项目根目录下生成output.js，可查看相关配置public文件夹不可改、src不可改、main.js不可改asset，components名字和其他文件可改vue脚手架的这个文件可以修改配置，放在和package.json同路径下举例，关闭语法检查。其他配置也是官网查看修改即可 总结使用vue inspect > output.js可以查看到Vue脚手架的默认配置使用vue.config.js可以对脚手架进行个性化定制......原创 2022-06-04 21:13:30 · 932 阅读 · 0 评论 -
分析脚手架\render函数
一、分析脚手架将单文件组件准备好的Student.vue，School.vue,App.vue和main.js,放到脚手架中npm run serve正常执行说明OK遇到的问题1.School和Student组件命名应该用驼峰或者下划线形式2.error Mixed spaces and tabs no-mixed-spaces-and-tabs参考https://blog.youkuaiyun.com/qq_23159841/article/details/109280640?spm=1001.2101.300原创 2022-06-04 20:40:34 · 160 阅读 · 0 评论 -
非单文件组件
一.基本使用 Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不要写，为什么？ ——原创 2022-05-15 22:34:53 · 114 阅读 · 0 评论 -
生命周期（挂载、更新、销毁）
一.引入生命周期1.当对象的key和值相同时，可简写{opacity:opacity}简写为{opacity}2.vm可以直接拿到data中的属性，vm._data和data一样原创 2022-04-10 17:23:29 · 1223 阅读 · 0 评论 -
自定义指令
原创 2022-04-10 16:58:10 · 113 阅读 · 0 评论 -
v-text\v-html\v-cloak\v-once
一.学过的指令v-bind：单向绑定表达式，可简写为：XXXv-model:双向数据绑定v-for：遍历数组、对象、字符串v-on:绑定事件监听，可简写为@v-if:条件渲染（动态控制节点是否存在）v-else:条件渲染（动态控制节点是否存在）v-show:条件渲染（动态控制节点是否存在）二.v-text指令：1.作用：向其所在节点中渲染文本内容2.与插值语法的区别：v-text会替换掉节点中内容，{{xx}}则不会<div v-text="name"&g原创 2022-04-08 10:45:24 · 127 阅读 · 0 评论 -
过滤器介绍
定义：对要显示的数据进行特定格式化后再显示（适用于一下简单逻辑的处理）语法：1.注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})2.使用过滤器：{{XXX | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"备注：1.过滤器也可以接收额外参数，多个过滤器也可以串联2.没有改变原本的数据，是产生新的对应的数据<!DOCTYPE html><html> <head>原创 2022-03-20 18:20:19 · 178 阅读 · 0 评论 -
收集表单数据
总结若<input type ="text"/>，则v-model收集的是value值，用户输入的就是value值若<input type ="radio"/>,则v-model收集的是value值，且要给标签配置value值若<input type ="checkbox"/>1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）2.配置input的value属性：（1）v-model的初始值是非数组，原创 2022-03-20 17:06:59 · 612 阅读 · 0 评论 -
条件渲染\列表渲染\key原理\列表过滤\列表排序\Vue检测数据原理\总结Vue数据检测
一.条件渲染1.v-if写法：（1）v-if=“表达式”（2）v-else-if=“表达式”（3）v-else=“表达式”适用于：切换频率较低的场景特点：不展示DOM元素直接被移除注意：v-if可以和：v-else-if\v-else一起用，但邀请结构不能被打断2.v-show写法：v-show=“表达式”适用于：切换频率较高的场景特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以原创 2022-03-14 19:08:40 · 978 阅读 · 0 评论 -
绑定class样式\style绑定样式
一.绑定class样式写法：class = "xxx",xxx可以是字符串、对象、数组字符串写法适用于：类名不确定、要动态获取对象写法适用于：要绑定多个样式、个数不确定、名字也不确定数组写法适用于：要绑定多个样式，个数确定、名称确定，但不确定用不用二.style样式绑定：style = "{fontSize: xxx}"其中xxx是动态值：style = "[a,b]"其中a,b是样式对象说明：样式对象的是存在的，不能瞎写<!DOCTYPE html>&l原创 2022-03-13 23:23:02 · 1331 阅读 · 0 评论 -
计算属性/
一.插值语法实现姓名案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>姓名案例 插值语法实现</title> <script type="text/javascript" src="../js/vue.js"> </script> </head> <body> <!原创 2022-03-13 20:22:01 · 1129 阅读 · 0 评论 -
事件处理/
目录一.事件处理二.事件修饰符二.键盘事件一.事件处理事件的基本使用1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名2.事件的回调需要配置在methods对象中，最终会在vm上3.methods中配置的函数，不要用箭头函数！否则this就不是VM了4.methods中配置的函数，都是被vue所管理的函数，this指向是vm或组件实例对象5。@click = "demo" 和@ click ="demo($event)"效果一致，但后者可以传参原创 2022-03-13 15:15:18 · 989 阅读 · 0 评论 -
初始Vue\模板语法\数据绑定\el data写法\MVVM\数据代理
一.初始VUE1.想让Vue工作，必须串讲一个Vue实例，且要传入一个配置对象2.root 容器里的代码依然符合Html规则，只不过混入了一些特殊的 Vue语法3.root容器里的代码被称为「Vue模板」4.Vue实例和容器是一一对应5.真实开发中只有一个Vue实例，并且会配合组件一起使用6.{{XXX}}中的XXX要写js表达式，且XXX可以自动读取到data中的属性7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新注意区分js表达式和js代码（语句）原创 2022-02-06 22:46:55 · 588 阅读 · 0 评论 -
侦听器-监视属性
一.监视属性1.配置项 const vm = new Vue({ el:"#root", data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ change(){ this.isHot=!this.isHot console.log("@",this)原创 2022-02-01 16:53:51 · 915 阅读 · 0 评论