# learn-vue

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

## Basic Information

- **Project Name**: learn-vue
- **Description**: 第一次接触Vue / 从b站   coderwhy 视频 跟着敲的全部代码(Vue2.6)
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://contributeoneself.gitee.io/learn-vue
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-05-31
- **Last Updated**: 2021-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<br />
# 学习Vue  2020-3-24

[b站视频教程](https://www.bilibili.com/video/BV15741177Eh)


- [Vue.js开发者大会](https://vue.w3ctech.com/)
- [Vue - GitHub](https://github.com/vuejs)
- [Vue - Doc/API](https://vuejs.org/)
- [Vue - cli](https://cli.vuejs.org/)
- [Vue - loader](https://vue-loader.vuejs.org/)
- [Vue - router](https://router.vuejs.org/)
- [Vuex](https://vuex.vuejs.org/)
- [Vue-dev-server](https://ssr.vuejs.org/)
- [Vue 论坛](https://dev.to/t/vue)


- [尤雨溪创立vue的心路历程](https://www.bilibili.com/video/BV1iE411H71U?from=search&seid=17941139013640116636)



### 一、[Vue.js安装](https://cn.vuejs.org/v2/guide/installation.html)
1、直接CDN引入到html中
```html
<!-- 开发环境，包含了有帮组的命令好警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
```

2、下载和引入 - [我的学习并输出代码](/learn)
1. 开发环境：https://vuejs.org/js/vue.js
2. 生产环境：https://vuejs.org/js/vue.min.js

1. 开发环境：https://cn.vuejs.org/js/vue.js
2. 生产环境：https://cn.vuejs.org/js/vue.min.js


3、npm 安装 (CLI)
```sh
npm install vue --save

# -D 代表上线不用，开发时用的工具。   也可以写 --save-dev
# -S 代表开发、上线都需要用到的。     也可以写 --save
```
---


> 两种不同 编写demo
- [CDN 引用代码](/learn)
- [vue-cli](/learn-v2)


<br />
<br />
<br />
<br />

### 二、了解基本

#### 1、命令式编程
1. 原生JavaScript
2. jQuery


Vue : 响应式编程、声明式
1. 响应式编程: Vue 会一直监听 数据(React/rn 都是 props/state 控制页面刷新)
2. 声明式:


<br />

#### [Vue-2.x API](https://cn.vuejs.org/v2/api/)
```js
let vm = new Vue({
  el: '#example',    //用于挂载要管理的元素
  data: {},          //定义数据
  template: : `...`, //使用模板
  computed: {},      //计算属性 - 如果多次调用，只会计算一次
  methods: {},       //方法    - 每次调用，都参与计算
  watch: {},         //侦听属性
  created: {},       //
  ...
})
```

<br />

`{{...}}` 专业术语叫 `Mustache(胡子/胡须)`, 大部分人叫 `双大括号` 语法。

<br />

#### vue 插值常用的
1. `Mustache`语法
2. `v-html` 标签

<br />

#### 语法糖-常用的
1. `v-on`   绑定事件监听器
2. `v-bind` 绑定属性

---

### 三、组件开发
`props` -> `properties`属性

> 父子组件间通信
1. 父 -> 子 => props `属性`
2. 父 <- 子 => event `事件`

> 组件与组件通信
1. `this.$children`   [父 访问 子]
2. `this.$parent` [子 访问 父]
3. `this.$refs` -> `reference` 引用 [组件间]

<br />

- [es6 入门](https://es6.ruanyifeng.com/)
- [ES5、ES6、ES7电子教程](http://yanhaijing.com/es5/)
- [细解JavaScript ES7 ES8 ES9 新特性](https://www.jianshu.com/p/a64a6aa4cd95)
- [ES6、ES7、ES8、ES9、ES10新特性一览](https://www.cnblogs.com/miaSlady/p/10955729.html)
- [微软和网景](https://www.zhihu.com/question/20314068/answer/194832952)