Vue基本使用

Vue

认识VueJs

• 为什么学习VueJs
• Vue的读音
• Vue的渐进式
• Vue的特点

安装Vue

• CDN引入
• 下载引入
• npm安装

插值语法

• mustache语法
• v-once
• v-html
• v-text
• v-pre
• v-cloak

动态绑定属性

v-bind绑定基本属性

• v-bind:src
• v-bind:href

v-bind动态绑定class

• 对象语法
• 数组语法

v-bind动态绑定style

• 对象语法
• 数组语法

计算属性

计算属性的本质

• fullname:

计算属性和methods对比

• 计算属性在多次使用时，只会使用一次
• 它是有缓存的

事件监听

事件监听的基本使用

参数问题

• btnClick
• btnClick(event)
• btnClick(abc, event) --> $event

修饰符

• stop
• prevent
• .enter
• .once
• .native

条件判断

v-if/v-else-if/v-else

v-show和v-if区别

循环遍历

遍历数组

遍历对象

• value
• value, key
• value, key, index

数组哪些方法是响应式的

v-model

v-model的基本使用

• v-model => v-bind:value v-on:input

v-model和radio/checkbox/select

修饰符

• lazy
• number
• trim

组件化开发

认识组件化

组件的基本使用

全局组件和局部组件

父组件和子组件

组件注册的语法糖

模板的分离写法

• script
• template

数据的存放

• 子组件不能直接访问父组件
• 子组件中有自己的data，而且必须是一个函数
• 为什么子组件的data是一个函数

父子组件的通信

• 父传子：props
• 子传父：$emit

1.1 父子组件的访问

• children/refs
• parent/root

1.2 slot的使用

• 基本使用
• 具名插槽
• 编译的作用域
• 作用域插槽

模块化开发

2.1 为什么要用模块化

• 简单写js代码带来的问题
• 闭包引起代码不可复用
• AMD/CMD/Commonjs

2.2 ES6中模块化的使用

• export
• import

webpack

3.1 什么是webpack

• webpack和gulp对比
• webpack依赖环境
• 安装webpack

3.2 webpack的起步

• webpack命令
• webpack配置：webpack.config.js/package.json

3.3 webpack的loader

• css-loader/style-loader
• less-loader/less
• url-loader/file-loader
• babel-loader

3.4 webpack配置Vue

• vue-loader

3.5 webpack的plugin

3.6 搭建本地服务器

• webpack-dev-server

Vue CLI

4.1 什么是CLI

• 脚手架是什么东西
• CLI以来webpack,node,npm
• 安装CLI3 --> 拉取CLI2模块

4.2 CLI2初始化项目的过程

4.3 CLI2生成的目录结构的解析