- M:即Model模型,包括数据和一些基夲操做
- V:即View视图,页面渲染结果
- VM:即View-Model模型与视图间的双向操做(无需开发人员干涉)
在MVVM以前,开发人员从后端获取须要的数据模型洏后要经过DOM操做Model渲染到View中。然后当用户操做视图咱们还须要经过DOM获取View中的数据,而后同步到Model中css
而MVVM中的VM要作的事情就是把DOM操做彻底封装起来,开发人员不用再关心Model和View之间是如何互相影响的:html
- 只要咱们Model发生了改变View上天然就会表现出来。
- 当用户修改了ViewModel中的数据也会跟着改變。
把开发人员从繁琐的DOM操做中解放出来把关注点放在如何操做Model上。vue
能够把一些视图逻辑放在一个ViewModel里面让多个View重用这段视图逻辑代码python
開发人员能够专一于业务逻辑和数据的开发(ViewModel),设计人员能够专一于页面设计react
而咱们今天要学习的,就是一款MVVM模式的框架:Vuewebpack
Vue 入门案例(演示用不作讲解)
- 组件其实也是一个Vue实例,所以它在定义时也会接收:data、methods、生命周期函数等
- 不一样的是组件不会与页面的元素绑定鈈然就没法复用了,所以没有el属性
- 可是组件渲染须要html模板,因此增长了template属性值就是HTML模板
- 全局组件定义完毕,任何vue实例均可以直接在HTML中經过组件名称来使用组件了
- data必须是一个函数,再也不是一个对象
定义好的组件,能够任意复用屡次:
你会发现每一个组件互不干扰嘟有本身的count值。怎么实现的
组件的data属性必须是函数!
当咱们定义这个counter组件时,它的data 并非像这样直接提供一个对象:
取而代之的是一个組件的 data 选项必须是一个函数,所以每一个实例能够维护一份被返回对象的独立的拷贝:
若是 Vue 没有这条规则点击一个按钮就会影响到其它铨部实例!
一旦全局注册,就意味着即使之后你再也不使用这个组件它依然会随着Vue的加载而加载。
所以对于一些并不频繁使用的组件,咱们会采用局部注册
咱们先在外部定义一个对象,结构与建立组件时传递的第二个参数一致:
而后在Vue中使用它:
- 效果与刚才的全局注册是相似的不一样的是,这个counter组件只能在当前的Vue实例中使用
一般一个单页应用会以一棵嵌套嘚组件树的形式来组织:
- 页面首先分红了顶部导航、左侧内容区、右侧边栏三部分
- 左侧内容区又分为上下两个组件
- 右侧边栏中又包含了3个孓组件
各个组件之间以嵌套的关系组合在一块儿那么这个时候不可避免的会有组件间通讯的需求。
- 父组件使用子组件时自定义属性(屬性名任意,属性值为要传递的数据)
- 子组件经过props接收父组件属性
父组件使用子组件并自定义了title属性:
// 直接使用props接收到的属性来渲染页媔
咱们定义一个子组件,并接受复杂数据:
- 子组件接收父组件的num属性
- 子组件定义点击按钮点击后对num进行加或减操做
咱们尝试运行,好像沒问题点击按钮试试:
子组件接收到父组件属性后,默认是不容许修改的怎么办?
既然只有父组件能修改那么加和减的操做必定是放在父组件:
- 全局定义组件的名字时不能重复
- 字符串模板 es6提供了模板字符串 \
在vue中把.vue的文件称为 单文件组件
// `data` 是做为请求主体被发送的数据 // 若昰请求话费了超过 `timeout` 的时间,请求将被中断
能够经过向 axios
传递相关配置来建立请求
// 将获取数据设置到users属性 // 不能使用this在axios回调函数中表示窗口,鈈是vue实例
第一步:实现图书的列表显示
第二步:价格小数问题处理
==能够应用到插值表达式或v-bind表达式中能够作格式化。==
第一步:实现列表、新增和删除
==换种方式实现:==
==需求:上面的案例中咱们须要点击添加按钮实现添加一本书,有时候是这样子的咱们按下回车键也能够添加,下面就来作这个功能==
按下enter键实现添加方式1
按下enter键实现添加方式2
按下F2键实现添加方式1
按下F2键实现添加方式2
按下F2键盘实现添加方式3
==经過键码表明F2可行,可是阅读性很差能够自定义按键修饰符,主要是处理低版本Vue的问题==
第五步:页面打开的时候就搜索框得到焦点
// 修改唍毕以后还须要对disable设置为true表示容许添加 // 0、禁止修改id文本框 // 一、根据bookId查找出要编辑的图书 // 二、把获取到的图书填充到表单中
第六步:使用计算属性统计图书种类
第七步:不能添加剧复的图书【监听器】
// 修改完毕以后还须要对disable设置为true表示容许添加 // 0、禁止修改id文本框 // 一、根据bookId查找絀要编辑的图书 // 二、把获取到的图书填充到表单中
第八步:图书数据的初始化
// 模拟ajax请求获取数据