学习思考
💬vue2的核心语法
00 分钟
2024-1-20
2024-1-23
type
status
date
slug
summary
tags
category
icon
password
先说一下vue2的安装,不同vue3先进好用的vite命令,vue2我觉得好用的方法还得是<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>,这个方法很简单,而且还可以将vue.js文件下载下来使用。
 
安装完后就要开始基础语法的使用了
第一个知识点———响应式数据与插值表达式
这里我们通过new的方式创建了一个Vue实例,然后就可以在内部传入关当前这Vue实例的配置信息,在前面我们通过变量vm来接受我们创建的vue实例.这里我们通过el属性(用于设置vue的生效位置),这样当前这个vue实例他的所有响应式以及所有的语法功能就只会在这个元素内部生效。
第二步就是声明响应式的数据,这里我们通过data属性来设置,然后在data这个方法的内部通过return的形式来写
,写完后通过插值表达式就可以直接用名称的方式来访问响应式数据。
第二个知识点————methods:用于封装逻辑代码
这里methods用于定义可在模板中调用的方法,这里的methods和data是同级别,但是他们的使用方法和用插值表达式调用的方法不同,因为第一个知识点中插值表达式调用的是属性,而在methods中调用的是方法。
第三个知识点————计算属性:computed(具有缓存性)
这里计算属性具有缓存性,在我们做第一次运算的时候,它会将计算结果在内部做一个缓存,如果在第二次计算的时候它如果发现内部响应式数据没有变,这种情况下就不再做计算了,它会拿之前计算过的结果直接用,这就节省了一些运算的步骤,使用的次数越多,计算属性就可以优化越多的性能。因为是计算属性,在使用插值表达式的时候不能加括号
 
第四个知识点————侦听器
vue在内部开放的可以参与响应式的过程。比如说我们通过vm.title = 1修改了旧的标题,这时候控制台会返回新的数据和旧的数据。
 
第五个知识点————指令
内容指令
这里这两个指令的不同是第一个不会解析span标签,而第二个可以解析。同时这两个指令都会覆盖原始内容
渲染指令
在Vue的v-for指令中,当遍历对象时,第一个参数是每个属性的值,第二个参数是属性名。因此,v-for="(item, index) in Object.entries(zd)" 这样写的含义是遍历zd对象的属性,item对应属性值,index对应属性名。
Object.entries(zd) 返回一个包含对象所有属性的数组,每个元素是一个键值对的数组,其中第一个元素是属性名,第二个元素是属性值。这样,我们就可以通过解构赋值的方式将这两个值分别赋给 index 和 item,从而在 v-for 中正常使用。
所以,这样的写法是为了正确获取对象属性名和属性值,以便在模板中使用。
这里可以使用布尔值控制
 
属性指令
事件指令
表单指令(v-model可以实现双向数据绑定)
修饰符
 

评论
  • Twikoo