element vue 纵向滑动条_Vue 部分

1、ES6+Vue ：

1、Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、vue的特点

1) 遵循 MVVM 模式

2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

3、 与其它前端js框架的关联

1) 借鉴 angular 的模板和数据绑定技术

2) 借鉴 react 的组件化和虚拟 DOM 技术

4、 vue拓展插件

• vue-cli: vue 脚手架

• vue-resource(axios): ajax 请求

• vue-router: 路由

• vuex: 状态管理

• vue-lazyload: 图片懒加载

• vue-scroller: 页面滑动相关

• mint-ui: 基于 vue 的 UI 组件库(移动端)

• element-ui: 基于 vue 的 UI 组件库(PC 端)

2、Vue ：

vue:入门代码：

3、vue的点击事件；

4、vue 的生命周期and组件的生命周期

5、vue较为完整的实例对象。

6、vue的MVVM

MVVM分为三个部分：

分别是M(Model，模型层 )，

V(View，视图层)，

VM(ViewModel，V与M连接的桥梁，也可以看作为控制器)

1、 M：模型层，主要负责业务数据相关；

2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层； 

3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦。

(也就是说可以进行双向修改)

7、vue:语法部分

    Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

   所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

    双大括号表达式

    语法: {{exp}}

    功能: 向页面输出数据 ，可以调用对象的方法

    指令一：强制数据绑定

    功能: 指定变化的属性值

    完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行

    简洁写法: :xxx='yyy'

    指令二：绑定事件监听

    1) 功能: 绑定指定事件名的回调函数

完整写法	整洁写法
v-on:keyup='xxx'	@keyup='xxx'
v-on:keyup.enter='xxx'	@keyup.enter='xxx'

8、vue样式部分

1、v-text=""  与 v-html="" 的区别：

这是显示结果：

2、 v-if=""     v-else-if=""  v-else

9、图片的显示与隐藏 v-show

更新时间：2020-12-17   vue部分