vue学习笔记(一)vue基础

1.vue是什么?
vue是一套用于构建用户界面的渐进式javascript框架。
渐进式:vue可以自底向上逐层应用(一个简单应用,只需要一个轻量小巧的核心库,一个复杂应用,只是在轻量小巧的核心库的基础上引入各种vue插件。

2.谁开发的vue?
在这里插入图片描述

3.vue的特点。
(1)采用组件化模式,提高代码复用率,且让代码更好维护。
组件化模式:将页面的部分作为一个整体进行开发,整个页面进行部分的拼凑。
(2)声明式编码让编码人员无需直接操作DOM提高开发效率。
声明式编码:与平时的命令式编码说一步做一步不同,使用vue中的指令,进行简易执行,不需要繁琐步骤,例如:

<ul id =“list”>
    <li v-for = “p in person”>
        {{p.id}}-{{p.name}}-{{p.age}}
    </li>
</ul>

(3) 使用虚拟Dom+优秀的Diff算法,尽量复用Dom节点。
真实Dom下,进行一组数据中个别数据的增删改,需要把所有的数据替换;而在虚拟Dom下,将每一条数据转换为对应的一条虚拟Dom,进行数据增删改时,将修改后的数据转换为新的虚拟Dom,与旧的虚拟Dom通过Diff算法进行比较,直接复用相同的虚拟Dom,对于剩下的虚拟Dom,增加旧的Dom没有但新虚拟Dom有的,删去旧Dom有但新Dom没有的。

4.基础模版(该模版只是写出关键点,并不符合语法规范)

  1⃣️  <Script type = “text/JavaScript” Src = “../js/vie.js></script>//引入vue,
    <body>
   2⃣️ <div id = “rooot”>//准备一个容器,容器里的代码被称为vue模版
       3⃣️ <h1>…….<h1>——写入内容,在主体中
    </div>
    4⃣️<script type = “text/JavaScript”>
        Const vue = new vue({//创建vue实例
            el:‘#root’//el用于指定当前vue实例为哪个容器服务,且一个vue实例只能为一个容器服务;
            5⃣️Data:{//vue实例中的属性
                Name:‘张三’
            }
         差值语法的使用:
        3⃣️想调用5⃣️中的属性显示在页面上,那么3⃣️中的内容改为

    <h1>{{Name}}</h1>

    {{}}中的内容应该为js代码

5.(1)一个vue实例的选择器即el,若是找到多个容器,则只对第一个产生作用(一对多)。
(2)多个vue实例对一个容器,只有第一个实例生效(多对一)。

对应于4的4⃣️,一个容器只能被一个vue实例管理。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值