“Vue2+Vue3”的版本间的差异

2024年7月27日 (六) 13:09的版本

尚硅谷张天禹

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 的特点

@@ 第37行： / 第37行： @@
+'''<big>[[Vue 的特点]]</big>'''
-'''<big>Vue 的特点</big>'''
-.采用<u>'''组件化'''</u>模式，提高代码复用率、且让代码更好维护。
-对于“组件化”的举例解释：
-比如有一个页面，有三个板块：推荐活动、新闻、热门
-就可以分开考虑、实现：Activity.vue、News.vue、Hot.vue
-.vue 文件中可以包含 html 代码、css 代码、JS 代码
-在 Vue 中，一个 .vue 文件就是一个组件。
-.<u>'''声明式'''</u>编码，让编码人员无需直接操作 DOM，提高开发效率。
-对“声明式”的举例解释：
-比如现在有数据：<syntaxhighlight lang="json">
-[
-  {id:'001',name:'张三',age:18},
-  {id:'002',name:'李四',age:19},
-  {id:'003',name:'王五',age:20}
-]
-</syntaxhighlight>还有容器：<syntaxhighlight lang="html">
-<ul id="list"></ul>
-</syntaxhighlight>想要实现的效果是把 JSON 数据变成 ul 里面的 li 显示出来：<syntaxhighlight lang="html">
-<ul id="list">
-  <li>001-张三-18</li>
-  <li>002-李四-19</li>
-  <li>003-王五-20</li>
-</ul>
-</syntaxhighlight>如果是'''<big>命令式编码</big>'''：<syntaxhighlight lang="javascript">
-//准备 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
-</syntaxhighlight>'''<big>声明式编码</big>'''：<syntaxhighlight lang="html">
-<ul id="list">
-  <li v-for="p in persons">
-    {{p.id}} - {{p.name}} - {{p.age}}
-  </li>
-</url>
-</syntaxhighlight>v-for 是 vue 中的遍历指令

“Vue2+Vue3”的版本间的差异

2024年7月27日 (六) 13:09的版本

课程简介

导航菜单

搜索