Vue2基础篇01

1. VUE的概述

- 特点：
  - 轻量
  - 高效
  - 数据驱动，双向绑定
  - 生态丰富【周边技术产品 ui框架 论坛 资料...】

 2 安装

- 全局安装@vue/cli 脚手架

  ```javascript
  yarn global add @vue/cli   // npm i @vue/cli -g
  
  // 查看脚手架的版本 【注意： 是脚手架的版本  不是vue的版本 vue的版本 2.6.11】
  vue -v / -V  / --version  [  4.5.4 ]
  ```

- 创建项目目录

  ```javascript
  vue create 项目名
  ```

- ==进入==项目目录，启动项目

  ```javascript
  yarn serve  // 或  npm run serve
  ```

  

3 安装两个插件

- vetur         让 `.vue`文件，有高亮和语法提示

- Vue VSCode Snippets     快捷写代码  ==起飞==

  

 4 Vue组件

### 4.1 .vue单文件组件

- 一个`.vue`文件，就是一个组件，称为 ==单文件组件==

- 一个.vue文件，分为三个部分

  ```javascript
  <template>
    <div>
       // 这里写 HTML  注意：template只能有一个根节点
    </div>       
  </template>
  <script>
     // 这里写JS    
     // 导出一个vue的实例对象
     export default {
        // key: value 配置
     }
  </script>
  <style lang="less" scoped>  // scoped: 妈妈再也不用担心我的样式覆盖了 好开心哦~~~ 
    // 这里写CSS    
  </style>
  ```

  

4.2 自定义组件【组件化`搭积木`开发思想】

- 自定义组件： 自己写的.vue文件就是一个自定义组件，我们的项目页面，可以分成各种各样的组件，由这些`.vue`组件，

  像 ==搭积木==，一样，拼装出整个页面。

- 自定义组件的使用步骤:

  - 引入组件【1】

    ```javascript
    import MyHeader from '自定义组件的路径'
    ```

  - 注册组件【2】

    ```javascript
    export default {
        // 注册组件
        components: {
            MyHeader
        }
    }
    ```

  - 使用组件【3】

    ```javascript
    <MyHeader />
    <MyHeader></MyHeader>
    <my-header></my-header>
    ```

    

 5 Mustach胡须表达式

- 语法:

  ```javascript
  {{ 表达式 }}  // 表达式： 简单理解，就是能够计算出唯一的结果
  {{ 变量 }} 
  {{ 变量1 + 变量2 }}
  {{ 函数() }}
  {{ 变量++ }}
  {{ flag ? 'true' : 'false' }}
  ```

- 作用： 渲染数据，让我们往html中动态渲染数据非常方便

 6 指令

 6.1 什么指令？有啥用？

- 指令：指令是标签上的`自定义属性`, vue的指令，都以 `v-`开头。

  ```javascript
  <div id="box" style="xx" name="赵子龙" sex="女" v-xx="表达式"></div>
  ```

- 有什么用：  帮助我们渲染数据，操作DOM.

6.2 指令的使用

- `v-text&v-html`:
  - `v-text`不能解析html元素标签，`v-html`可以
- `v-show&v-if`:
  - 都可以控制元素的显示和隐藏，`v-show`控制的是==display属性==，`v-if`会==删除dom===和==重新渲染dom==

​              如果是频繁的切换显示和隐藏，使用 `v-show`

- `v-if&v-else-if&v-else`:

  - 逻辑和JS是一样的，从上往下找到满足条件的==第一个==渲染。

- `v-for`:

  - ==循环一切==

  ```javascript
  <标签 v-for="(元素的值，元素的索引) in 数组" :key="不重复的值字符串或数字"></标签>  // 注意：in的前面如果是两项以上 可以省略（）哦~~~
      
  <标签 v-for="(元素的值，元素的键名, 元素的索引) in 对象" :key="不重复的值字符串或数字"></标签> 
  ```

- `v-model`:

  - `表单的王`,  和表单双向绑定，让我们取值和赋值，操作表单的值变得`易如反掌`
  - 注意：这个指令，只能适用于表单标签： input  select  textarea

7 事件

- 语法

  ```javascript
  <标签 v-on:事件类型=“函数名”></标签> 
  <标签 v-on:事件类型=“函数名(实参)”></标签> 
  <标签 v-on:事件类型=“表达式”></标签> 
  
  // 简写
  <标签 @事件类型=“函数名”></标签> 
  <标签 @事件类型=“函数名(实参)”></标签> 
  <标签 @事件类型=“表达式”></标签> 
  
  export default {
   components: {},
   data() {
       return {
           
       }
   },
   // 方法[们]
   methods: {
       函数名() {
       }
   }
  }
  ```

- 注意： 方法中的this指向当前vue组件实例对象，可以拿到各个配置选项的第一层数据。

- 事件对象

  - 如果函数没有传递参数，没有(),那么，函数的形参就是 event 事件对象
  - 如果函数有（），且传递了实参，必须手动传递一个 $event 在函数中，才可以获取到事件对象

8 计算属性computed

- 写法： 写法和`methods`完全一样

  - 注意：
    - 计算属性必须有返回值，方法不是必须的
    - 方法使用的时候： 方法名()  ， 计算属性使用的时候：   方法名
    - ==计算属性有依赖缓存，只有依赖的数据发生变化，才会自动重新计算，否则不会重新计算，直接使用缓存结果，性能爆炸强==

  ```javascript
  export default {
    methods: {
        方法名() {
           /* ..很多代码.. */
        }
    },
      
    // 计算属性
    computed: {
       方法名() {
          /* ..很多代码.. */
          return 结果
       }
    }
  }
  ```