# vue-learn

**Repository Path**: atiaisi/vue-learn

## Basic Information

- **Project Name**: vue-learn
- **Description**: vue基础知识汇总以及例子
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-02-02
- **Last Updated**: 2023-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-learn
1. vue中undefined在页面中展示为空。
2. Vue.set()只允许给data中的对象添加属性，不允许给vm实例和data添加属性。

# 内置指令
1. v-bind: 单向绑定解析表达式,可简写为:xxx  
2. v-model: 双向数据绑定  
3. v-for: 遍历数组/对象/字符串  
4. v-on: 绑定事件监听,可简写为@  
5. v-if: 条件渲染(动态控制节点是否存在)  
6. v-else: 条件渲染(动态控制节点是否存在)  
7. v-show: 条件渲染(动态控制节点是否展示)  
8. v-text: 向其所在的节点中渲染文本内容
9. v-heml: 向指定节点中渲染包含html结构的内容(不安全)
10. v-cloak: 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性.
11. v-once: 所在节点在初次动态渲染后,就视为静态内容了.
12. v-pre: 跳过其所在节点的编译过程,会加快编译.

# 生命周期
![生命周期](images/生命周期.png)

# 组件
用来实现局部动能效果的代码集合(html/css/js/image/...)

# Vue与VueComponent的关系
![Vue与VueComponent](images/Vue%E4%B8%8EVueComponent%E7%9A%84%E5%85%B3%E7%B3%BB.png)

# 安装脚手架
```
1. 全局安装@vue/cli
npm install -g @vue/cli
2. 切换到要创建项目的目录,创建项目
vue create xxx
3. 进入项目目录,启动项目
npm run serve
```

## 常用cdn
https://www.bootcdn.cn/

# 资料
Vue官方文档: https://cn.vuejs.org/  
Nodejs官方文档: https://link.zhihu.com/?target=https%3A//nodejs.org/zh-cn/download/