vue的第一周

一. Vue基础

1.1认识vuejs

（1）vue的渐进式框架

①渐进式意味着你可以将Vue作为你应用的一部分嵌套其中，带来更丰富的交互体验

②Vue的核心库以及其生态系统

③Core + Vue-router + Vuex

（1）vue的特点

①解耦视图和数据

②可复用的组件

③前端路由技术

④状态管理

⑤虚拟DOM

1.2 安装vue

（1）CDN引入

（2）下载引入

（3）npm安装

 通过webpack和CLI的使用

1.3 vue的初体验

（1）Hello Vuejs

mustache语法→体验vue响应式

（2）vue的列表展示

 v-for语法

（3）vue计数器案例

 事件监听：click→methods

1.4 Vue中的MVVM

（1）M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
（2）V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
（3）VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data

1.5 创建Vue时，options的选择

（1）el：

（2）data：

（3）methods：

（4）生命周期函数

二 插值语法

2.1 mustache语法

Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式

2.2 v-once

后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

2.3 v-html

后面往往跟一个string类型
会将string的html解析出来并渲染

2.4 v-text

与Mustache相似, 一般不用, 不灵活

2.5 v-pre：{{}}

用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

2.6 v-cloak

在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

三 v-bind

3.1 v-bind绑定基本属性

（1）v-bind：src

（2）v-bind：href

3.2 v-bind动态绑定class

 （1）对象语法

（2）数组语法

 3.3 v-bind动态绑定style

（1）对象语法

（2）数组语法

 

 四 计算属性

4.1案例一：firstName+lastName

4.2 计算属性的本质

fullName:{set(),get()}

4.3computed和methods对比

在多次使用的时候

methods: 每次都会调用
computed: 计算机会缓存, 不变的情况下只调用一次

 五 事件监听

5.1 事件监听基本使用v-on

v-on

作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间

5.2 参数问题

5.3 修饰符

（1）stop

作用：阻止事件冒泡

（2）prevent

作用：阻止默认事件

（3）.enter

作用：监听按下回车

（4）.once

作用：只触发一次回调

（5）.native

作用：监听组件根元素的原生事件

六 条件判断

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

6.2 v-show

(1) v-show和v-if 区别

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none

七 循环遍历

7.1 v-for 遍历数组

 7.2 遍历对象

 八 v-model的使用

8.1 v-model的基本使用

（1）表单绑定

实现表单元素和数据的双向绑定

（2）使用其他方法实现双向绑定 

 v-bind绑定一个value属性
 v-on指令给当前元素绑定input事件  
下面代码 等同于 使用v-model

8.2 v-model和radio/checkbox/select

（1）v-model结合radio类型使用

（2）v-model结合checkbox类型使用

①单选框 

②多选框

 

（3）v-model结合select类型使用

①下拉框单选

v-model绑定的是一个值
当选中option中一个时, 会将它对应的value赋值到mySelect中

②下拉框多选

v-model绑定的是一个数组
当选择多个值时,会将选中的option对应的value添加到数组mySelect中

8.3 修饰符

（1）lazy

前景: v-model默认是在input事件中实时同步输入框的数据的 (容易同步的过于频繁 )
作用: 可以让数据只有在失去焦点或回车时才会更新

（2）number

前景: 默认情况下, 在输入框中无论输入字母还是数字, 都会被当做字符串类型进行处理
作用: 当做数字类型进行处理

（3）trim

前景: 输入的内容首位容易有空格
作用: 可以过滤掉内容左右两边的空格

 九 组件化开发

9.1 认识组件化

9.2 组件的基本使用

（1）注册组件的基本步骤

①调用Vue.extend()方法 - 创建组件构造器
②调用Vue.component()方法 - 注册组件
③在Vue实例的作用范围内 - 使用组件

9.3 全局组件和局部组件

（1）全局组件

（2）局部组件

9.4 父组件和子组件

父子组件的错误用法: 以子标签的形式在Vue实例中使用

因为当子组件注册到父组件的components时, Vue会编译好父组件的模块
该模块的内容已经决定了父组件将要渲染的HTML (相当于父组件中已经有子组件中的内容了)

9.5 注册的语法糖

Vue为了简化注册组件的过程, 提供了注册的语法塘, 省去了调用Vue.extend()的步骤. 而是可以直接使用一个对象来代替

9.6 模板的分类写法

（1）script

（2）template

9.7 数据的存放

（1）子组件不能直接访问父组件

组件是一个单独功能模块的封装 - 这个模块有自己的HTML模板, 也应该有属性自己的数据data

（2）子组件中有自己的data，而且必须是一个函数 返回必须是一个对象

9.8父子组件的通信

（1）父传子：props

（2）子传父：$emit