2Vuejs培训.pptx

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