Vue.js培训2018简要介绍后端只给前端提供数据,前端负责HTML渲染和用户交互。前后端分离数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue.js是一个用于创建用户界面的开源JavaScript框架JavaScript框架准备工作Vue官网上下载js文件：<!--引入组件库--><scriptsrc="<@spring.url'/public/javascripts/vue/vue.js"/>第一个Demo<divid="app"><p>{{message}}</p></div><script>varvm=newVue({el:'#app',data:{message:'HelloVue.js!'}})</script>1.条件判断(v-if)<divid="app"><pv-if="seen">现在你看到我了</p><templatev-if="ok"><h1>菜鸟教程</h1><p>学的不仅是技术，更是梦想！</p><p>哈哈哈，打字辛苦啊！！！</p></template></div><script>varvm=newVue({el:'#app',data:{seen:true,ok:true}})</script>2.循环语句(v-for)2.1.迭代数组<divid="app"><ol><liv-for="siteinsites">{{site.name}}</li></ol></div><script>varvm=newVue({el:'#app',data:{sites:[{name:'Runoob'},{name:'Google'},{name:'Taobao'}]}})</script>2.2迭代对象<divid="app"><ul><liv-for="valueinobject">{{value}}</li></ul></div><script>varvm=newVue({el:'#app',data:{object:{name:'菜鸟教程',url:'http://www.runoob.com',slogan:'学的不仅是技术，更是梦想！'}}})</script>3.计算属性<divid="app"><p>原始字符串:{{message}}</p><p>计算后反转字符串:{{reversedMessage}}</p></div><script>varvm=newVue({el:'#app',data:{message:'Runoob!'},computed:{//计算属性的getterreversedMessage:function(){//`this`指向vm实例returnthis.message.split('').reverse().join('')}}})</script>4.监听属性watch,来响应数据的变化varvm=newVue({...});vm.$watch('kilometers',function(newValue,oldValue){//........})5.样式绑定<style>.active{width:100px;height:100px;background:green;}.text-danger{background:red;}</style></head><body><divid="app"><divclass="static"v-bind:class="{active:isActive,text-danger:hasError}"></div></div><script>varvm=newVue({el:'#app',data:{isActive:true,hasError:true}})</script>6.事件处理器(v-on)<divid="app"><buttonv-on:click="greet">Greet</button></div><script>varapp=newVue({//在`methods`对象中定义
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
methods:{greet:function(event){//`this`在方法里指当前Vue实例alert('Hello'+this.name+'!')//`event`是原生DOM事件if(event){alert(event.target.tagName)}}}})</script>7.
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
单(1).输入框<inputv-model="message"placeholder="编辑我……"><script>newVue({el:'#app',data:{message:'Runoob'}})</script>(2).单选与多选<divid="app"><p>单个复选框：</p><inputtype="checkbox"id="checkbox"v-model="checked"><labelfor="checkbox">{{checked}}</label><p>多个复选框：</p><inputtype="checkbox"id="runoob"value="Runoob"v-model="checkedNames"><labelfor="runoob">Runoob</label><inputtype="checkbox"id="google"value="Google"v-model="checkedNames"><labelfor="google">Google</label><inputtype="checkbox"id="taobao"value="Taobao"v-model="checkedNames"><labelfor="taobao">taobao</label><br><span>选择的值为:{{checkedNames}}</span></div><script>newVue({el:'#app',data:{checked:false,checkedNames:[]}})</script>8.组件注册一个全局组件语法格式如下：Vue.component(tagName,options)例子如下：<divid="app"><runoob></runoob></div><script>//注册Vue.component('runoob',{template:'<h1>自定义组件!</h1>'})//创建根实例newVue({el:'#app'})</script>prop是父组件用来传递数据的一个自定义属性：<divid="app"><childmessage="hello!"></child></div><script>//注册Vue.component('child',{//声明propsprops:['message'],//同样也可以在vm实例中像"this.message"这样使用template:'<span>{{message}}</span>'})//创建根实例newVue({el:'#app'})</script>9.Vue生命周期中mounted和created的区别created:在
模板
个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载
渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作varvm=newVue({el:'#formId',created：function(){//初始化执行方法},mounted:function(){//也是初始化执行方法this.reload();},methods:{reload:function(){//比如加载Ajax请求数据}}});ThankyouLOREMIPSUMDOLOR
浙公网安备 33021202002483