![](https://i-blog.csdnimg.cn/direct/2b5445bcff3b4e54a935c338a2260eb2.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 79
vue学习笔记,中间可能会夹杂部分实战过程中的踩坑和心得体会
我是飞鸟呀
得到解决方案不是目的,学会如何思考和解决问题,才是最终目标。
展开
-
vue2学习笔记11-深入学习监视属性并与计算属性对比
上一节,我们通过一个字符串案例,简单了解了监视属性。虽然在上一节的案例中,监视属性似乎并不太适用,但是实际应用中,还是有大量的情况需要使用监视属性的。比如,快递单地址栏中我们选择了省份后,城市下拉框中将出现该省份下的所有城市,那么我们就需要监听省份的选中项,来加载城市信息。原创 2024-07-24 07:15:00 · 640 阅读 · 0 评论 -
vue2学习笔记10 - 计算属性,方法和监视属性对比
当要用的属性不存在,要通过已有的属性计算得来时,可使用计算属性。它借助了Object.defineproperty方法提供的getter/setter来实现双向绑定。其中,getter函数在初始化的时候会读取一次,在其依赖的属性发生改变时会再次调用。若其依赖属性未发生改变,代码中多次使用该属性,不会重复调用getter,而是读取其缓存值。原创 2024-07-19 17:15:00 · 259 阅读 · 0 评论 -
vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理
其实,我们并没有在vm下定义这两个属性,只是在data中定义的,外面这两个,便是vue通过object.defineProperty自动给我们添加的,并且也调用了setter、getter方法,这便是vue的数据代理。在Vue中,数据代理是指在实例化Vue对象时,将data对象中的属性代理到Vue实例上,以便在模板中直接访问和修改data对象中的属性。接着上一节,学一学vue中的数据代理。然而,在vm中,外层,我们同样可以看到两个属性(不带$或_,即不是vue的内置属性或方法,而是用户自定义的)。原创 2024-07-18 17:30:00 · 269 阅读 · 0 评论 -
vue2学习笔记8 - 通过object.defineProperty理解Vue的响应式原理(setter/getter)
常看到说Vue是的,或者说,它把data中的各种属性通过Object.defineProperty转换成,以使得vue能够追踪这些属性的变更,从而适时通知页面重新渲染或者修改Model中的值,从而实现数据的双向传递。原创 2024-07-17 17:30:00 · 2255 阅读 · 0 评论 -
vue2学习笔记6 - 初步了解vue的实例和原型
首先,看看创建Vue实例之后,Vue中都有什么:open in Live Server,打开开发者模式,在console中,可以看到打印出来的vm对象:很长很长,未截全。但是,这些数据大概分为两类,以$开头的,和以_开头的。原创 2024-07-16 09:15:00 · 815 阅读 · 0 评论 -
vue2学习笔记7 - Vue中的MVVM模型
Model-View-viewModel是一种软件架构模式,用于将用户界面(View)与业务逻辑(Model)分离,并通过ViewModel进行连接和协调。MVVM模式的目标是实现视图与模型的解耦,提高代码的可读性、可维护性和可测试性。在MVVM模式中,View是用户界面的呈现层,负责展示数据和接收用户的输入。ViewModel是视图模型,负责处理View的状态、行为和交互逻辑。ViewModel通过数据绑定机制将数据从Model传递给View,并将用户的输入传递给Model进行处理。原创 2024-07-16 18:00:00 · 459 阅读 · 0 评论 -
vue2学习笔记5 - 表单类元素的单向数据绑定和双向数据绑定
也就是说,使用v-model的input,实现了从vue模板与vue实例间的双向数据绑定。而v-bind,只能实现从data到页面的单向传递。但是,v-model也不是在任何地方都可以使用,它只能用于表单类元素(输入类元素)中,捕获用户输入,实现数据的双向传递。输入类元素包含:input,单选,多选、select控件、多行文本输入框等拥有value属性值的元素。所以,v-model:value也可以简写为v-model,因为v-model默认收集的就是value的值。原创 2024-07-15 18:00:00 · 419 阅读 · 0 评论 -
vue2学习笔记4 - 深入学习模板语法:插值语法和指令语法
1、插值语法:功能:用于解析标签体内容。写法:{{xxxx}},其中xxxx是js表达式,且可以直接读取到data中的所有属性。2、指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定事件......)示例:v-bind:href="xxx"或简写为 :href="xxx",xxx同样要写js表达式。且可以直接读取到data中的所有属性。备注:Vue中有很多的指令,且形式都是:v-????。原创 2024-07-15 12:00:00 · 820 阅读 · 0 评论 -
vue2学习笔记3 - 开发环境知识补充:live server简介
Live Server是一款方便的Web开发工具,可以在开发过程中提供实时预览和自动刷新的功能。无需手动刷新网页,开发者可以实时查看对代码的修改,并快速验证效果,但是不能用于部署最终站点。原创 2024-07-14 16:00:00 · 398 阅读 · 0 评论 -
vue2学习笔记2-老规矩,从Hello World开始,了解Vue实例和模板
想要把“Hello,World”放置在页面上,首先需要准备一个HTML的块级元素div,来承接内容。原创 2024-07-14 11:01:07 · 894 阅读 · 0 评论 -
vue2学习笔记1-官网使用指南和搭建开发环境
在Vue的官方文档中,CDN链接提供了Vue的压缩和非压缩版本的核心库,以及Vue的运行时构建和带编译器的完整构建版本。Vue的核心库通常通过CDN提供,这意味着你可以直接在HTML文件中引用CDN链接,而不需要通过npm安装并在项目中引入Vue。需要注意的是,CDN链接可能会因为网络问题或其他原因而无法访问,因此在实际应用中,你可能需要提供一个备用的本地文件引用,以防止CDN链接无法使用。加载速度快:CDN通常具有全球广泛的节点分布,可以根据用户的地理位置选择最近的服务器来提供资源,从而加快加载速度。原创 2024-07-11 20:18:37 · 747 阅读 · 0 评论