# vue

**Repository Path**: swordying/vue

## Basic Information

- **Project Name**: vue
- **Description**: Vue 语法学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 学习笔记
- 定义：是一套用于构建用户界面的渐进式 JavaScript 框架，
- 简介：MVVM 框架

## 1、下载 VUE
` $ npm install vue `

- 最新稳定的 CSP 兼容版本
` $ npm install vue@csp `

## 2、安装 Vue 命令行 -g 全局
` $ npm install -g vue-cli `

## 3、创建项目
` $ npm init webpack my-project `

## 4、安装依赖
` $ npm install `

## 5、开启服务器
` $ npm run dev `

## Vue 相关概念
1. 实例：Vue 对象
2. 挂载点：Vue 实例绑定的节点
3. 模板：挂载点的 HTML
4. 属性绑定：利用 v-bind: 绑定节点的属性

## 6、Vue 对象的关键属性及方法
1. data 对象的数据，绑定的是数据
2. methods 对象的方法
3. computed 计算属性、复合属性
3. watch 侦听器、侦听属性的变化

## 7、模板指令
1. v-text 渲染数据
2. v-html 渲染节点
3. v-bind 绑定节点的属性 简写为 :
4. v-model 双向绑定语法
3. v-on 绑定事件
   1. click 点击事件 v-on:click 可以简写为 @click
   2. v-if 控制存在 对应属性值为 true false 节点会从 DOM 树上直接删除
   3. v-show 控制显示 与 v-if 功能类似、控制的是 CSS-display:auto|none;
   4. v-for 循环渲染 语法：v-for="value of data_list" | v-for="(value,key) of data_list" :key="key"

## 8、组件化开发
1. Vue.component 定义全局组件
2. var 定义局部组件 需要在 Vue 实例里面通过 component 引入
3. props 父组件向子组件传递数据、使用属性形式
4. $emit('事件','数据'); 子组件向父组件传递数据、发布订阅模式

## 9、公用组件
1. router-link 路由组件
2. vue-resource Ajax 异步加载

## 10、生命周期
- 已用到
1. mounted：替换 el:"#app" 后调用的钩子。作用：可用于加载子组件、初始化列表数据；
2. updated：更新 Vue.data 后调用的钩子。作用：数据更新后执行、动态绑定 jQery 特效；
- 详细请点击 [Vue 生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90 "Vue 生命周期钩子")