Vue学习记录 Vue简介

云风星月皆待卿

已于 2022-07-14 15:45:34 修改

阅读量214

点赞数

分类专栏： Vue 文章标签：前端前端框架 vue

于 2022-07-14 11:51:04 首次发布

本文链接：https://blog.csdn.net/Code_peasant/article/details/125781361

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue Learning 2022

2022.07.14 DAY1

1. 总览

Vue2 + Vue3
前端框架小白\熟练掌握Vue2\轻松玩转Vue3
计划
1. vue基础
2. vue-cli
3. vue-router
4. vuex
5. element-ui
6. vue3

1. Vue简介

Vue是什么？
- 一套用于构建用户界面的渐进式javaScript框架。
  - Vue可以字底向上逐层的应用。
  - 简单应用：只需要一个轻量小巧的核心库。
  - 复杂应用：可以引入各式各样的Vue插件。
谁开发的？
- 尤雨溪 Evan You
- 2013 - 2020 -
- 后起之秀，生态完善，已然成为国内前端工程师必备技能。
Vue的特点：
1. 采用组件化模式，提高代码复用率、且让代码更好维护。
  - Activity.vue - HTML/CSS/JS。
  - News.vue
  - Hot.vue
  - 一个.vue就是一个组件。
2. 声明式编码，让编人员无需直接操作DOM，提高开发效率。
  - 命令式编码
  - 声明式编码
```
// 声明式编码
<ul id="list">
    <li v-for="p in persons">
        {{p.id} - {{p.name}} - {{p.age}}}
</li>
</ul>
```
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
  - 虚拟DOM Virtual-DOM
学习Vue之前需要掌握的JavaScript基础知识
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise

2. Vue官网使用指南

学习
- 教程
- API
- 风格指南
- 示例
- Cookbook - 技巧
- 视频教程
- 工具
- 核心插件
- 资源列表
  - Awesome Vue
    - Github
    - 第三方库如报表
  - 浏览和Vue相关的库
- 支持Vue

2. 搭建Vue开发环境

1. 安装

直接用<script>引入
开发版本 / 生产版本

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 // 阻止vue在启动时生成生产提示。
            
                // 创建Vue实例
                new Vue({
                    el:'#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                    // el:document.getElementById('root')
                    data:{  // data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成一个对象。
                        name:'YJP',
                        space:'Vue'
                    }
                })  // 重要

            </>
        </body>
    </html>