vue学习笔记
weixin_54763080
这个作者很懒,什么都没留下…
展开
-
vue学习笔记(19)——监视的简写形式
【代码】vue学习笔记(19)——监视的简写形式。原创 2023-02-01 21:04:47 · 59 阅读 · 0 评论 -
vue学习笔记(18)——深度监视
Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以。使用watch时根据数据的具体结构,决定是否采用深度监视。Vue中的watch默认不监视对象内部值的改变(一层)配置deep.true可以监测对象内部值改变(多层)原创 2023-02-01 20:48:52 · 94 阅读 · 0 评论 -
vue学习笔记(17)——监视属性
当监视属性变化时,回调函数自动调用,进行相关操作。new.Vue时传入watch配置。监视属性必须存在,才能进行监视。通过vm.$watch监视。原创 2023-02-01 20:10:38 · 44 阅读 · 0 评论 -
vue学习笔记(16)——天气案例
【代码】vue学习笔记(16)——天气案例。原创 2023-02-01 17:28:49 · 176 阅读 · 0 评论 -
vue学习笔记(15)——计算属性_简写
【代码】vue学习笔记(15)——计算属性_简写。原创 2023-02-01 17:09:09 · 39 阅读 · 0 评论 -
vue学习笔记(14)——计算属性
原理:底层借助了Object.defineproperty方法提供的getter和setter。如果计算属性要修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。优势:与methods实现相比,内部有缓存机制(复用),效率更高,测试方便。定义:要用的元素不存在,要通过已有属性计算得来。如果属性最终会出现在vm上,直接读取使用即可。当依赖的数据发生改变时会被再次调用。get函数什么时候执行?初次读取时会执行一次。原创 2023-02-01 16:42:55 · 166 阅读 · 0 评论 -
vue学习笔记(13)——姓名案例
插值语法,methods语法原创 2023-02-01 15:03:18 · 71 阅读 · 0 评论 -
vue学习笔记(12)——事件补充
修饰符可以连用,有先后顺序:先阻止冒泡,后阻止默认事件。只有按住ctrl+y才能触发事件。原创 2023-02-01 14:02:06 · 36 阅读 · 0 评论 -
vue学习笔记(11)——键盘事件
Vue为提供别名的按键,可以使用安检员是的key值去绑定,但注意要转为kebab-case(短横线命名)(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。Vue.config.keyCodes.自定义键名=键码,可以去性质按键别名。系统修饰键(用法特殊):ctrl、alt、shift、meta。(2)配合keydown使用:正常触发事件,按下即触发事件。换行:tab(比较特殊,只能配合keydown使用)删除:delete(捕获“删除”和“退格”键)原创 2023-02-01 13:27:47 · 657 阅读 · 0 评论 -
vue学习笔记(10)——事件修饰符
self:只有event.target是当前操作的元素时才触发事件。passive:事件的默认行为立即执行,无需等待事件回调执行完毕。whell滚轮滑动,只要滚轮滑动,就触发事件。stop:阻止事件冒泡(常用)多次弹窗。prevent:阻止默认事件(常用)capture:使用事件的捕获方式。scroll:滑动条或上下键滑动。once:事件只触发一次(常用)原创 2023-02-01 12:18:40 · 64 阅读 · 0 评论 -
vue学习笔记(9)——事件处理
click=“demo”和@click=“demo($event)”效果一致,但后者可以传参。methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象。methods中配置的函数,不要用箭头函数,否则this的指向就不是vm了。使用v-on:xxx或@xxx绑定事件,其中xxx是事件名。事件的回调需要配置在methods对象中,最终会在vm上。原创 2023-01-28 19:08:35 · 52 阅读 · 0 评论 -
vue学习笔记(8)——Vue中的数据代理
通过Object.defineProperty( )把对象中所有的属性添加到vm上,在getter/setter内部去操作(读/写)data中对应的属性。为每一个添加到vm上的属性,都指定一个getter/setter,通过vm对象来代理data对象中属性的操作(读/写)更加方便的操作data中的数据。原创 2023-01-28 15:18:13 · 47 阅读 · 0 评论 -
vue学习笔记(7)——理解数据代理
【代码】vue学习笔记(7)——理解数据代理。原创 2023-01-28 14:41:51 · 45 阅读 · 0 评论 -
vue学习笔记(6)——Object.defineProperty
【代码】vue学习笔记(6)——Object.defineProperty。原创 2023-01-25 20:45:53 · 43 阅读 · 0 评论 -
vue学习笔记(5)——理解MVVM
VM:视图模型(ViewModel):Vue实例对象。M:模型(Model):对应data中的数据。V:视图(View):模板。原创 2023-01-25 19:30:09 · 73 阅读 · 0 评论 -
vue学习笔记(4)——el与data的两种写法
由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例了。(2)先创建vue实例,随后再通过vm.$mount('#root')指定el值。如何选择:在组件当中,data必须使用函数式,否则会报错。(1)new Vue时要配置el属性。data与el的2种写法。原创 2023-01-25 18:02:33 · 41 阅读 · 0 评论 -
vue学习笔记(3)——数据绑定
v-model:value可以简写为v-model,因为v-model默认收集的就是value值。双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。双向绑定一般都应用在表单类元素上(如:input、select等)单向绑定(v-bind):数据只能从打他流向页面。原创 2023-01-25 17:33:38 · 143 阅读 · 0 评论 -
vue学习笔记(2)——模板语法
【代码】vue学习笔记(2)——模板语法。原创 2023-01-25 15:42:05 · 51 阅读 · 0 评论 -
Vue学习笔记(1)——Hello小案例
(1)将容器中的模板拿到vue实例中进行解析,将自己涉及到的内容进行替换,生成一个新的容器,用这个容器代替之前的容器。表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:(是一个特殊的js语句)2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法。(3){{xxxx}}中写js表达式,xxxx可以自动读取到data中所以属性。1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象。注意区分:js表达式 和 js代码(语句)(2)容器和实例之间是一对一。原创 2023-01-25 15:09:01 · 56 阅读 · 0 评论