Vue Learning 2022
2022.07.14 DAY1
1. 总览
- Vue2 + Vue3
- 前端框架小白\熟练掌握Vue2\轻松玩转Vue3
- 计划
- vue基础
- vue-cli
- vue-router
- vuex
- element-ui
- vue3
1. Vue简介
- Vue是什么？
- 一套用于构建用户界面的渐进式javaScript框架。
- Vue可以字底向上逐层的应用。
- 简单应用：只需要一个轻量小巧的核心库。
- 复杂应用：可以引入各式各样的Vue插件。
- 谁开发的？
- 尤雨溪 Evan You
- 2013 - 2020 -
- 后起之秀，生态完善，已然成为国内前端工程师必备技能。
- Vue的特点：
-
采用组件化模式，提高代码复用率、且让代码更好维护。
- Activity.vue - HTML/CSS/JS。
- News.vue
- Hot.vue
- 一个.vue就是一个组件。
-
声明式编码，让编人员无需直接操作DOM，提高开发效率。
-
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
- 学习Vue之前需要掌握的JavaScript基础知识
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
2. Vue官网使用指南
- 学习
- 教程
- API
- 风格指南
- 示例
- Cookbook - 技巧
- 视频教程
- 工具
- 核心插件
- 资源列表
- 支持Vue
2. 搭建Vue开发环境
1. 安装
2. Vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></、script>
</head>
<body>
<!--
1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3. root容器里的代码被称为【Vue模板】
4. Vue实例和容器是一一对应的；
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6. {{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中所有属性；
7. 一旦data中的数据发生改变，那好么模板中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2. js代码(语句)
(1). if(){}
(2). for(){}
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 插值语法 {{name}} -->
<h1>Hello,{{name}}!</h1>
<h1>Welcome to {{space}} World!</h1>
<h1>{{Date.now()}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'YJP',
space:'Vue'
}
})
</>
</body>
</html>
|