Vue2+Vue3

尚硅谷 张天禹

https://www.bilibili.com/video/BV1Zy4y1K7SH

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1

课程简介

1.vue 基础

2.vue-cli（vue 脚手架，专门做工程化开发）

3.vue-router（用于在 vue 当中实现前端路由）

4.vuex（当应用足够复杂时，借助它帮我们保管数据）

5.element-ui（好看的 UI 组件库）

6.vue3

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=2

Vue 是什么？

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。

对于“渐进式”的解释：

Vue 可以自底向上逐层的应用

简单的应用：只需要一个轻量小巧的核心库（压缩完只有100kb）。

复杂的应用：可以引入各式各样的 Vue 插件。

Vue 的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

对于“组件化”的举例解释：

比如有一个页面，有三个板块：推荐活动、新闻、热门

就可以分开考虑、实现：Activity.vue、News.vue、Hot.vue

.vue 文件中可以包含 html 代码、css 代码、JS 代码

在 Vue 中，一个 .vue 文件就是一个组件。

2.声明式编码，让编码人员无需直接操作 DOM，提高开发效率。

对“声明式”的举例解释：

比如现在有数据：

[
  {id:'001',name:'张三',age:18},
  {id:'002',name:'李四',age:19},
  {id:'003',name:'王五',age:20}
]

还有容器：

<ul id="list"></ul>

想要实现的效果是把 JSON 数据变成 ul 里面的 li 显示出来：

<ul id="list">
  <li>001-张三-18</li>
  <li>002-李四-19</li>
  <li>003-王五-20</li>
</ul>

如果是命令式编码：

//准备 html 字符串
let htmlStr = ''
//遍历数据拼接 html 字符串
persons.forEach(p => {
  htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`
});
//获取 list 元素
let list = document.getElementById('list')
//修改内容（亲自操作DOM）
list.innerHTML = htmlStr

声明式编码：

<ul id="list">
  <li v-for="p in persons">
    {{p.id}} - {{p.name}} - {{p.age}}
  </li>
</url>

v-for 是 vue 中的指令