1、Vue.js培训20181PPT课件简要介绍后端只给前端提供数据,前端负责HTML渲染和用户交互。前后端分离数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue.js是一个用于创建用户界面的开源JavaScript框架JavaScript框架2PPT课件准备工作 Vue官网上下载 js文件： script src=3PPT课件第一个Demo message var vm = new Vue( el: #app, data: message: H
2、ello Vue.js! ) 4PPT课件1.条件判断(v-if) 现在你看到我了 菜鸟教程 学的不仅是技术，更是梦想！ 哈哈哈，打字辛苦啊！ var vm=new Vue( el: #app, data: seen: true, ok: true )5PPT课件2.循环语句(v-for) 2.1.迭代数组 site.name var vm=new Vue( el: #app, data: sites: name: Runoob , name: Google , name: Taobao )6PPT课件 2.2 迭代对象 value var vm=new Vue( el: #app, data
3、: object: name: 菜鸟教程, url: http:/, slogan: 学的不仅是技术，更是梦想！ )7PPT课件3.计算属性 原始字符串: message 计算后反转字符串: reversedMessage var vm = new Vue( el: #app, data: message: Runoob! , computed: / 计算属性的 getter reversedMessage: function () / this 指向 vm 实例 return this.message.split().reverse().join() )8PPT课件4.监听属性 watch,
4、来响应数据的变化 var vm=new Vue(.); vm.$watch(kilometers, function (newValue, oldValue) /. )9PPT课件5.样式绑定.active width: 100px; height: 100px; background: green; .text-danger background: red; var vm=new Vue( el: #app, data: isActive: true, hasError: true )10PPT课件6.事件处理器(v-on) Greet var app = new Vue( / 在 meth
5、ods 对象中定义方法 methods: greet: function (event) / this 在方法里指当前 Vue 实例 alert(Hello + this.name + !) / event 是原生 DOM 事件 if (event) alert(event.target.tagName) )11PPT课件7.表单 (1).输入框 new Vue( el: #app, data: message: Runoob ) 12PPT课件 (2). 单选 与 多选 单个复选框： checked 多个复选框： Runoob Google taobao 选择的值为: checkedName
6、s new Vue( el: #app, data: checked : false, checkedNames: )13PPT课件8.组件 注册一个全局组件语法格式如下： Vponent(tagName, options)例子如下： / 注册Vponent(runoob, template: 自定义组件!)/ 创建根实例new Vue( el: #app)14PPT课件 prop 是父组件用来传递数据的一个自定义属性： / 注册Vponent(child, / 声明 props props: message, / 同样也可以在 vm 实例中像 this.message 这样使用 templa
7、te: message )/ 创建根实例new Vue( el: #app)15PPT课件9.Vue生命周期中mounted和created的区别 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 var vm=new Vue( el:#formId, created：function()/初始化执行方法 , mounted:function() /也是初始化执行方法 this.reload(); , methods: reload:function()/比如加载Ajax请求数据 );16PPT课件ThankyouLOREM IPSUM DOLOR17PPT课件
