logo资料库

前端分享--Vue简介.ppt

第1页 / 共21页
第2页 / 共21页
第3页 / 共21页
第4页 / 共21页
第5页 / 共21页
第6页 / 共21页
第7页 / 共21页
第8页 / 共21页
资料共21页,剩余部分请下载后查看
VUE前端分享 By zzh 20170627 ETCP
VUE介绍 模版语法 事件绑定 A C E B D F VUE实例 逻辑渲染 组件
VUE介绍 Vue.js 是一套构建用户界面的渐进式框架。 Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整 合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完 全能够为复杂的单页应用程序提供驱动。 Vue的缔造者用的是中文,Vue的文档不再英文的翻译版本,而是原汁原味的中文 版本!!!
VUE介绍 MVVM模式 VUE受到了MVVM模式的启发,所以在VUE中经常会看到VM; 下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在 Vue.js中ViewModel是如何和View以及Model进行交互的。
VUE介绍 Vue如何引入到项目中? 方法一:利用vue-cli等的构建工具; 方法二:直接利用
VUE实例 VUE实例

input 值是:{{ message }}

var vm = new Vue({ el: '#example', data: { message: 'Hello' } })
VUE实例 生命周期 见连接:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
VUE实例 每个 Vue 实例都会代理其 data 对象里所有的属性: var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3
分享到:
收藏