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 端)
vue:入门代码:
3、vue的点击事件;4、vue 的生命周期and组件的生命周期5、vue较为完整的实例对象。6、vue的MVVMMVVM分为三个部分:
分别是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' |
1、v-text="" 与 v-html="" 的区别:
这是显示结果:
2、 v-if="" v-else-if="" v-else
9、图片的显示与隐藏 v-show更新时间:2020-12-17 vue部分