vue
id不存在。
这个作者很懒,什么都没留下…
展开
-
vue练习1
transition:为组件的载入和切换提供动画效果transition-group:作为多个元素/组件的过渡效果keep-alive:缓存。原创 2022-08-07 01:19:44 · 125 阅读 · 0 评论 -
1、创建vue脚手架
win+r打开命令行窗口,配置淘宝镜像全局安装@vue/cli关闭窗口,并重新打开一个命令行窗口,输入vue[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lGkLrDtB-1658293597772)(C\Users\22253\Desktop\笔记\vue\cli.png)]切换到要创建项目的目录,然后使用命令创建项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJPqtHU4-1658293597774)(C。............原创 2022-07-20 13:07:03 · 92 阅读 · 0 评论 -
21_生命周期
常用的生命周期钩子发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1、销毁后借助Vue开发者工具看不到任何信息。2、销毁后自定义事件会失效,但原生DOM事件依然有效。3、一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。欢迎学习Vue...原创 2022-07-20 13:06:24 · 43 阅读 · 0 评论 -
20_自定义指令
需求2定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)需求1定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。(2).inserted指令所在元素被插入页面时调用。(3).update指令所在模板结构被重新解析时调用。(1).bind指令与元素成功绑定时调用。1.指令定义时不加v-,但使用时要加v-;...原创 2022-07-20 13:05:42 · 49 阅读 · 0 评论 -
19_内置指令
2.与插值语法的区别v-text会替换掉节点中的内容,{{xx}}则不会。(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。2.可利用它跳过没有使用指令语法、没有使用插值语法的节点,会加快编译。(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。1.v-once所在节点在初次动态渲染后,就视为静态内容了。3.严重注意v-html有安全性问题!...原创 2022-07-20 13:05:12 · 54 阅读 · 0 评论 -
18_过滤器
(1)注册过滤器Vue.filter(name,callback)或newVue{filters{}}(2)使用过滤器{{xxx|过滤器名}}或v-bind属性=“xxx|过滤器名”Github地址https//github.com/iamkun/dayjs。定义对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。BootCDN链接https//www.bootcdn.cn/4.并没有改变原本的数据,是产生新的对应的数据。...原创 2022-07-18 12:06:07 · 50 阅读 · 0 评论 -
17_收集表单数据
(1)没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值)v-model的初始值是非数组,那么收集的就是checked(勾选or未勾选,是布尔值)1.若,则v-model收集的是value值,用户输入的就是value值。2.若,则v-model收集的是value值,且要给标签配置value值。v-model的初始值是数组,那么收集的的就是value组成的数组。number输入字符串转为有效的数字。...原创 2022-07-18 11:58:19 · 35 阅读 · 0 评论 -
16_Vue数据监测
(1)使用这些APIpush()、pop()、shift()、unshift()、splice()、sort()、reverse()特别注意Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性。通过setter实现监视,且要在newVue时就传入要监测的数据。(1)对象中后追加的属性,Vue默认不做响应式处理。(2)Vue.set()或vm.$set()(1)调用原生对应的方法对数组进行更新。1.vue会监视data中所有层次的数据。...原创 2022-07-18 11:57:41 · 71 阅读 · 0 评论 -
15_key作用与原理
(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。②.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。key是虚拟DOM对象的标识,当状态中的数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】(2)旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到到页面。面试题react、vue中的key有什么作用?...原创 2022-07-17 16:37:32 · 66 阅读 · 0 评论 -
14_基本列表
2.语法v-for=“(item,index)inxxx”key=“yyy”3.可遍历数组、对象、字符串、指定次数。1.用于展示列表数据。原创 2022-07-17 16:36:50 · 43 阅读 · 0 评论 -
13_条件渲染
注意v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断。3.备注使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到。特点不展示的DOM元素未被移除,仅仅是使用样式隐藏掉。特点不展示的DOM原始直接被移除。写法v-show=“xxx”适用于切换频率较低的场景。适用于切换频率较高的场景。...原创 2022-07-17 16:36:13 · 40 阅读 · 0 评论 -
12_绑定样式
(3)数组写法适用于要绑定多个样式,个数确定,名字也确定,但不确定用不用。(1)style="{fontSizexxx}"其中xxx是动态值。(2)对象写法适用于要绑定多个样式,个数不确定,名字也不确定。写法class=“xxx”xxx可以是字符串、对象、数组。(2)style="[a,b]"其中a、b是样式对象。(1)字符串写法适用于类名不确定,要动态获取。1.class样式。2.style样式。...原创 2022-07-17 16:33:23 · 39 阅读 · 0 评论 -
11_天气案例-监视属性
(2)所有不被Vue管理的函数(定时器回调函数、ajax的回调函数等、promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。(2)watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作。(1)所有被Vue管理的函数,最好写成普通函数,这样this指向才是vm或组件实例对象。(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以。(1)Vue中的watch默认不监测对象内部值的改变(一层)...原创 2022-07-17 16:32:49 · 189 阅读 · 0 评论 -
10_姓名案例-计算属性
(2)如果计算属性要被修改,那必须写set函数响应修改,且set中要引起计算时依赖的数据发生改变。当有人读取fullName时,get就会被调用,且返回值就作为fullName的值。5.优势与methods实现相比,内部有缓存机制(备用),效率更高,调试方便。(1)计算属性最终会出现在vm上,直接读取使用即可。1.定义要用的属性不存在,要通过已有属性计算得来。(2)当依赖的数据发生改变时会被再次调用。3.get函数什么时候执行?(1)初次读取时会执行一次。...原创 2022-07-17 16:31:43 · 43 阅读 · 0 评论 -
09_键盘事件
inputtype="text"placeholder="按下回车提示输入"@keydown.huiche="showInfo">Vue.config.keyCodes.huiche=13//定义了一个别名按键。4.vue.config.keyCodes自定义键名=键码,可以去定制按键别名。配合keyup使用按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。欢迎来到{{name}}学习换行=>tab(特殊,必须配合keydown去使用)...原创 2022-07-17 16:28:51 · 44 阅读 · 0 评论 -
08_事件修饰符
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop:阻止事件冒泡(常用)3.once:事件只触发一次(常用)4.capture:使用事件的捕获模式原创 2022-07-17 16:27:54 · 44 阅读 · 0 评论 -
07_事件的基本使用
事件的基本使用: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-07-13 02:07:09 · 47 阅读 · 0 评论 -
06_Vue中的数据代理
1.vue中的数据代理:通过vm对象来代理data对象中属性的操作2.Vue中数据代理的好处:更加方便的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。...原创 2022-07-13 02:06:02 · 117 阅读 · 0 评论 -
05_回顾Object.defineProperty
回顾Object.defineProperty方法原创 2022-07-13 02:05:18 · 44 阅读 · 0 评论 -
03_el与data的两种写法
data与el的两种写法el有两种写法:1.new Vue时候配置el属性2.先创建vue实例,随后再通过vm.$mount('root')指定el的值data有两种写法:1.对象式2.函数式目前哪种写法都可以,学习到组件时,data必须用函数式注意:由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例了......原创 2022-07-12 16:32:38 · 62 阅读 · 0 评论 -
04_理解MVVM
MVVM模型1.M:模型(Model):data中的数据2.V:视图(view):模板代码3.VM:视图模型(viewModel):vue实例观察发现:1.data中所有的属性,最后都出现在vm身上2.vm身上所有的属性及vuew原型上所有属性,在vue模板中都可以直接使用...原创 2022-07-12 16:37:41 · 167 阅读 · 0 评论 -
02_数据绑定
Vue中有2种数据绑定的方式:单向数据绑定(v-bind):数据只能从data流向页面双向数据绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data双向绑定一般都应用在表当元素上(如:input,select等)v-model:value可以简写为v-model,因为v-model默认收集的就是value值]...原创 2022-07-12 16:31:46 · 167 阅读 · 0 评论 -
01_模板语法
Vue模板语法有2大类:插值语法:功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性指令语法:功能:用于解析标签(包括:标签属性、标签体属性、绑定事件.......)举例:v-bind:href="xxx"或简写为:href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性...原创 2022-07-11 14:42:03 · 64 阅读 · 1 评论