Vue学习计划--Vue2（一）简单了解vue

Vue2的终止支持时间为2023年12月31日。
在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护，新的项目也可以上手。

后续呢会有react16和react18、node、webpack、vite、以及实战项目，期间会包含umijs,nextjs, nuxtjs等等更多的更前沿的前端技术笔记

也算是对自己的一种督促，不断充实自己，分享自己的学习笔记，让自己和朋友们可以在前端的道路上越走越远。

1. vue是什么？
   vue是一套用于构建用户界面的渐进式jacascript库
   构建用户界面： 把一系列的数据转换成界面
   渐进式：循序渐进
   简单应用：只需一个轻量小巧的核心库
   复杂应用：可以引入各式各样的vue插件
   2. Vue作者？
   尤雨溪
   1. 13年,受到Angular框架的启发，开发出了一套轻量级框架-- Seed，同年12月，Seed更名为Vue 0.6.0
   2. 14年，正式对外发布， 版本号0.8.0
   3. 15年，10月27日，正式发布Vue1.0.0 Evangelion(超世纪福音战士)
   4. 16年，10月1日 正式发布Vue2.0.0 Chost in the Shell(攻壳机动队)
   5. 20年，9月18日，正式发布Vue3.0.0 One piece(海贼王)
   …
   后起之秀，生态完善，已然成为国内工程师必备技能
   3. Vue 特点：
   1. 采用组件化模式，提高的复用率，且让代码更好的维护
   2. 声明编码，让编码人员无需直接操作DOM
   3. 使用虚拟DOM+优秀的DIFF算法, 尽量复用DOM节点
   命令式: 数据 => 真实DOM
   声明式: 数据 => 虚拟DOM => 真实DOM

   核心

   1. 初始Vue
      想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
      root容器里的代码依然符合html规范
      root容器里的代码被称为[Vue模板]
      Vue实例与容器是一一对应的
      真实开发中只有一个Vue实例,并且配合组件一起使用
      {{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性
      注意区分: js表达式和js代码(语句)
      表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方
      a: 变量
      b: a + b
      demo(1)
      x === y ? ‘a’ : ‘b’
      js代码(语句)
      if()
      for()

      一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
      注意：

      • 取消控制台的vueTools提示，安装vue-Tools

        安装一个vue-Tools工具，方便开发，其实就是谷歌浏览器的插件件，可以访问此链接，进入最后一个网址（收藏猫）进行下载，该网上还有教程，如何安装谷歌插件,点击进入

      • 取消控制台的生产环境提示 Vue.config.productionTip = false
        示例：

      
       
       
           
           
           
            	
           
           
           
       
       	
       
           
      
             {{ name }} 
      
             {{ 1 + 2 }} 
      
             {{ false ? name : age }} 
           
           
      
               {{ nameList }}
           
           
      
               {{ className }}  {{ className2 }}
           
       
       
       
           
       
       
      

   2. Vue模板语法有2大类
      插值语法： {{ XXX }}
      功能： 用于解析标签体内容
      写法： {{ xxx }} 中的xxx要写js表达式，vm实例上的所有属性
      指令语法：
      功能： 用于解析标签（包括：标签属性，标签体内容，绑定事件…）
      备注： Vue中有很多指令，形式都是v-xxx

   3. Vue中有两种绑定数据方式：
      单向绑定: v-bind 绑定动态属性 // 数据只从data流向页面
      v-bind 定义属性: 包括class style

      双向绑定: v-model 数据不仅能从data流向页面,还可以从页面流向data

      备注：
      v-model 一般用于表单元素 （如input select等），因为v-model默认收集的是value的值
      v-model: value 可以简写成 v-model,