# vue-lession

**Repository Path**: tjufe-edu/vue-lession

## Basic Information

- **Project Name**: vue-lession
- **Description**: vue学习教程
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-26
- **Last Updated**: 2021-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Lession
## 为什么要学习vue

## 基础

### Vue 特点
* 轻量
* 渐进式框架
* ...

### 单文件组件

#### 插槽

TodoItem

```vue
//TodoItem.vue
<template>
  <div>
    <li class="item">{{item}}</li>
  </div>
</template>
<script>
export default {
  props: ["item"],
};
</script>

//App.vue
<todo-item v-for="item in list" :key="item" item="item"></</todo-item>
import TodoItem from "./components/TodoItem";

export default {
  name: "App",
  data() {
    return {
      msg: "hello vue",
      info: "",
      list: [],
    };
  },
  methods: {
    handlerClick() {
      this.list.push(this.info);
      this.info = "";
    },
  },
  components: {
    TodoItem,
  },
    
```

通过上述方式实现的组件是不支持样式等操作的,如果加上样式,需要使用vue的插槽;

vue 插槽 

代码调整如下:

```vue
//TodoItem.vue
<div>
    <li class="item">
      <slot></slot>
    </li>
  </div>
//App.vue
 <todo-item v-for="item in list" :key="item">
     <span :style="{fontSize: '20px'}">{{ item }}</span>
</todo-item>
```

vue 具名插槽.带名称的插槽

```vue
//TodoItem.vue 
<div>
    <li class="item">
        <input type="checkbox" v-model="checked"/>
      <slot name="slot" v-bind="{checked}"></slot>
    </li>
  </div>

export default {
  props: ["item"],
  data(){
      return {
          checked:false
      }
  }
};
//App.vue
<todo-item v-for="item in list" :key="item">
        <template v-slot:slot="itemProps">
          <span slot="slot" :style="{fontSize: '20px',color: itemProps.checked?'red':'blue'}">{{ item }}</span>
        </template>
      </todo-item>
```

#### 文件作用域

`<style scoped>` 表示仅当前文件生效,不会污染全局;

```vue
<style scoped>
.item {
  color: red;
}
</style>
```

### Vue组件的核心概念

#### 属性

* 自定义属性 props
* 原生属性 attrs
* 特殊属性 class,style

#### 事件

* 普通事件
* 修饰符事件

#### 插槽

* 普通插槽
* 作用域插槽

### Vue 是单向数据流



### 虚拟DOM 和  Key的作用



### 如何触发数据更新



### 计算属性和侦听器

计算属性computed

* 减少计算逻辑
* 缓存结果
* 响应式数据(依赖固定的数据类型)

监听器 



### 生命周期

创建阶段

* beforeCreate 

* created

* beforeMount

* render

* Mounted

更新阶段

* beforeUpdate
* render
* updated

销毁阶段

* beforeDestroy
* destroyed

### 函数式组件

`functional:true`

无状态,无实例,没有生命周期,没有this上下文

### Vue 指令

* v-text
* v-html
* v-show => 'display:none'
* v-if v-else v-else-if
* v-for
* v-bind
* v-on
* v-model

* v-pre 不会执行vue的编译
* v-once 只会执行一次
* v-cloak

自定义指令

生命周期钩子

* bind
* inserted
* update
* componentUpdated
* unbind



## 生态

## 实战