2Vuejs培训幻灯片

1、Vue.js培训,2018,1,2,简要介绍,后端只给前端提供数据,前端负责HTML渲染和用户交互。,前后端分离,数据双向绑定,采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。,Vue.js是一个用于创建用户界面的开源JavaScript框架,JavaScript框架,2,2020/7/12,准备工作,Vue官网上下载 js文件： ,3,2020/7/12,第一个Demo, message var vm = new Vue( el: #app, data:

2、message: Hello Vue.js! ) ,4,2020/7/12,1.条件判断(v-if), 现在你看到我了 菜鸟教程 学的不仅是技术，更是梦想！ 哈哈哈，打字辛苦啊！ var vm=new Vue( el: #app, data: seen: true, ok: true ) ,5,2020/7/12,2.循环语句(v-for),2.1.迭代数组 var vm=new Vue( el: #app, data: sites: name: Runoob , name: Google , name: Taobao ) ,6,2020/7/12,2.2 迭代对象 val

3、ue var vm=new Vue( el: #app, data: object: name: 菜鸟教程, url: , slogan: 学的不仅是技术，更是梦想！ ) ,7,2020/7/12,3.计算属性, 原始字符串: message 计算后反转字符串: reversedMessage var vm = new Vue( el: #app, data: message: Runoob! , computed: / 计算属性的 getter reversedMessage: function () / this 指向 vm 实例 return this.message.split().r

4、everse().join() ) ,8,2020/7/12,4.监听属性 watch,来响应数据的变化,var vm=new Vue(.); vm.$watch(kilometers, function (newValue, oldValue) /. ),9,2020/7/12,5.样式绑定, .active width: 100px; height: 100px; background: green; .text-danger background: red; var vm=new Vue( el: #app, data: isActive: true, hasError: true )

5、,10,2020/7/12,6.事件处理器(v-on), Greet var app = new Vue( / 在 methods 对象中定义方法 methods: greet: function (event) / this 在方法里指当前 Vue 实例 alert(Hello + + !) / event 是原生 DOM 事件 if (event) alert(event.target.tagName) ) ,11,2020/7/12,7.表单,(1).输入框 new Vue( el: #app, data: message: Runoob ) ,12,2020/7/1

6、2,(2). 单选 与 多选 单个复选框： checked 多个复选框： Runoob Google taobao 选择的值为: checkedNames new Vue( el: #app, data: checked : false, checkedNames: ) ,13,2020/7/12,8.组件,注册一个全局组件语法格式如下： Vponent(tagName, options) 例子如下： / 注册 Vponent(runoob, template: 自定义组件! ) / 创建根实例 new Vue( el: #app ) ,14,2020/7/12,prop 是父组件用来传递数据

7、的一个自定义属性： / 注册 Vponent(child, / 声明 props props: message, / 同样也可以在 vm 实例中像 this.message 这样使用 template: message ) / 创建根实例 new Vue( el: #app ) ,15,2020/7/12,9.Vue生命周期中mounted和created的区别,created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 var vm=new Vue( el:#formId, created：function()/初始化执行方法 , mounted:function() /也是初始化执行方法