Vue第一天1.vue组件注册步骤Vue.js的组件有三个步骤：创建组件构造器(Vue.extend()方法)，注册组件(Vue.component())和实例化组件。<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container"><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//1.创建一个组件构造器varcomponent1=Vue.extend({template:'<div>helloworld</div>'});//2.注册组件，并指定组件的标签为<component1>Vue.component('component1',component1);//3.实例化组件newVue({el:'#container'});</script></html>浏览器编译后html结构会变为 <divid="container"><div>helloworld</div></div>页面运行显示为 helloworld2.理解组件的创建和注册。2-1Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。2-2Vue.component()是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。2-3组件需要挂载到某个Vue的实例下，否则不生效。如下实例：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div><divid="container2"><component1></component1></div><divid="container3"><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//1.创建一个组件构造器varcomponent1=Vue.extend({template:'<div>helloworld</div>'});//2.注册组件，并指定组件的标签为<component1>Vue.component('component1',component1);//3.实例化组件container1newVue({el:'#container1'});//3.实例化组件container2newVue({el:'#container2'});//不实例化container3因此第三个自定义标签是不会生效的</script></html>最终代码被渲染成为如下：<divid="container1"><div>helloworld</div></div><divid="container2"><div>helloworld</div></div>3.理解Vue全局注册和局部注册调用Vue.component()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div><!--不能使用component1组件，因为它是container1里面局部注册的--><divid="container2"><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//1.创建一个组件构造器varcomponent1=Vue.extend({template:'<div>helloworld</div>'});//3.实例化组件container1newVue({el:'#container1',components:{'component1':component1}});//实例化container2是不生效的newVue({el:'#container2'})</script></html>实例化container2是不生效的，并且在浏览器控制台会报如下错误：4.理解父组件和子组件。在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><parent-component></parent-component></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//1.创建一个组件构造器varChild=Vue.extend({template:'<div>helloworld</div>'});varParent=Vue.extend({//在组件内部使用<child-component>组件template:'<div>helloworld<child-component></child-component></div>',components:{//局部注册Child组件'child-component':Child}});//全局注册Parent组件Vue.component('parent-component',Parent);//实例化组件newVue({el:'#container1'})</script></html>简单理解代码如下：1.varChild=Vue.extend(...)定义一个Child组件构造器。2.varParent=Vue.extend(...)定义一个Parent组件构造器。3.components:{'child-component':Child},将Child组件注册到Parent组件，并将Child组件的标签设置为child-component;4.template:渲染html
模板
个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载
，找到template选项，然后使用child-component组件。5.注册Parent组件Vue.component('parent-component',Parent);6.最后实例化组件，需要到html元素为id='container1'里面去。Child组件是在Parent组件中注册的，只能在Parent组件中注册的。如下几种情况都不行的。4-1以子标签的形式在父组件中使用；如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><parent-component><child-component></child-component></parent-component></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//1.创建一个组件构造器varChild=Vue.extend({template:'<div>helloworld</div>'});varParent=Vue.extend({//在组件内部使用<child-component>组件template:'<div>helloworld</div>',components:{//局部注册Child组件'child-component':Child}});//全局注册Parent组件Vue.component('parent-component',Parent);//实例化组件newVue({el:'#container1'})</script></html>上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。4-2.在父组件标签外使用子组件。<divid="container1"><parent-component></parent-component><child-component></child-component></div>js代码还是上面的一样，运行完成后，在浏览器下会报错如下：5.理解组件的语法糖。我们可以使用更简单的方式来注册组件。5-1使用Vue.component()直接创建和注册组件。如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//全局注册Vue.component('component1',{template:'<div>helloworld222</div>'});//实例化varvm1=newVue({el:'#container1'});</script></html>Vue.component()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend()方法。注意：在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：5-2在选项对象的components属性中实现局部注册。<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div><divid="container2"><component2></component2><component3></component3></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//全局注册，my-component1是标签名称Vue.component('component1',{template:'<div>Thisisthefirstcomponent!</div>'})varvm1=newVue({el:'#container1'})//实例化局部注册varvm1=newVue({el:'#container2',components:{//局部注册，component2是标签名称'component2':{template:'<div>component2</div>'},//局部注册，component3是标签名称'component3':{template:'<div>component3</div>'}}});</script></html>6.学会使用script或template标签。虽然语法糖简化了组件注册，但是在template选项中拼接了html元素，这导致View和C层的高耦合性。幸运的是Vue.js提供了2种方式将javascript中的html模板分离出来。6-1使用script标签, 如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div><scripttype='text/x-template'id="myComponent"><div>helloworld!!!!!</div></script></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">newVue({el:'#container1',components:{'component1':{template:'#myComponent'}}})</script></html>注意：使用<script>标签时，type指定为text/x-template，是告诉浏览器这不是一段js脚本，浏览器在解析html文档时会忽略script标签内定义的内容。6-2使用<template>标签。不需要指定type属性。如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div><templateid="myComponent"><div>helloworld2222!!!!!</div></template></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">newVue({el:'#container1',components:{'component1':{template:'#myComponent'}}})</script></html>7.理解使用props。父组件的数据如何传给子组件呢？可以使用props把数据传给子组件。代码如下：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1v-bind:my-name="name"v-bind:my-age="age"></component1></div><templateid="myComponent"><table><tr><thcolspan="2">子组件数据</th></tr><tr><td>myName</td><td>{{myName}}</td></tr><tr><td>myAge</td><td>{{myAge}}</td></tr></table></template></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">newVue({el:'#container1',data:{name:'longen',age:30},components:{'component1':{template:'#myComponent',props:['myName','myAge']}}})</script></html>注意：在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，会转为短横线隔开的，比如上面的代码：在props中定义的myName,在用作特性时需要转换为my-name理解prop的单向绑定既然父组件使用props把数据传给了子组件，那么如果子组件修改了数据，对父组件是否有影响呢？看下面的代码如下：<!DOCTYPEhtml><html><body><head><title>演示Vue</title><style>*{margin:0;padding:0;box-sizing:border-box}html{font-size:12px;font-family:Ubuntu,simHei,sans-serif;font-weight:400}body{font-size:1rem}table,td,th{border-collapse:collapse;border-spacing:0}table{width:100%;margin:20px;}td,th{border:1pxsolid#bcbcbc;padding:5px10px}th{background:#42b983;font-size:1.2rem;font-weight:400;color:#fff;cursor:pointer}tr:nth-of-type(odd){background:#fff}tr:nth-of-type(even){background:#eee}fieldset{border:1pxsolid#BCBCBC;padding:15px;}input{outline:none}input[type=text]{border:1pxsolid#ccc;padding:.5rem.3rem;}input[type=text]:focus{border-color:#42b983;}button{outline:none;padding:5px8px;color:#fff;border:1pxsolid#BCBCBC;border-radius:3px;background-color:#009A61;cursor:pointer;}button:hover{opacity:0.8;}#container1{margin:0auto;max-width:480px;}</style></head><divid="container1"><table><tr><thcolspan="3">父组件数据</th></tr><tr><td>name</td><td>{{name}}</td><td><inputtype='text'v-model="name"/></td></tr><tr><td>age</td><td>{{age}}</td><td><inputtype="text"v-model="age"/></td></tr></table><component1v-bind:my-name="name"v-bind:my-age="age"></component1></div><templateid="myComponent"><table><tr><thcolspan="3">子组件数据</th></tr><tr><td>myName</td><td>{{myName}}</td><td><inputtype="text"v-model="myName"/></td></tr><tr><td>myAge</td><td>{{myAge}}</td><td><inputtype="text"v-model="myAge"/></td></tr></table></template></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">newVue({el:'#container1',data:{name:'longen',age:30},components:{'component1':{template:'#myComponent',props:['myName','myAge']}}})</script></html>Vue第二天1.vue属性和方法每个Vue实例都会代理其data对象里所有的属性。如下代码：vardata={a:1};varvm=newVue({data:data});console.log(vm);console.log(vm.a===data.a);//true//设置属性也会影响到原始数据vm.a=2;console.log(data.a);//2//反之data.a=3;console.log(vm.a);//3//除了data属性，Vue实例还暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$,以便与代理的data属性区分。vardata={a:1}varvm=newVue({el:'#container1',data:data})console.log(vm.$data===data)//trueconsole.log(vm.$el===document.getElementById('container1'))//truedata.a=5;//$watch是一个实例方法vm.$watch('a',function(newVal,oldVal){//这个回调将在`vm.a`改变后调用console.log(newVal);console.log(oldVal);})1-1.data必须是函数通过Vue构造器传入的各种选项大多数都可以在组件里用。data是一个例外，它必须是函数。如下代码Vue会停止，并在控制台会报错。<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">vardata={counter:0};//全局注册Vue.component('component1',{template:'<span>{{message}}</span>',data:{message:'hello'}});newVue({el:'#container1'})</script></html>data是函数解决该
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
代码如下：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1><component1></component1><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">vardata={counter:0};//全局注册Vue.component('component1',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',//data是一个函数，vue不会报错，但是我们返回给每个组件的实列引用了同一个data对象data:function(){returndata}});newVue({el:'#container1'})</script></html>由于这三个组件共享了同一个data，因此增加一个counter会影响所有组件！这不对。我们可以通过为每个组件返回全新的data对象来解决这个问题：代码如下：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><component1></component1><component1></component1><component1></component1></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//全局注册Vue.component('component1',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',//data是一个函数，vue不会报错，但是我们返回给每个组件的实列引用了同一个data对象data:function(){return{counter:0}}});newVue({el:'#container1'})</script></html>现在每个counter都有它自己内部的状态了.2.理解组件的通信。一般情况父子组件是这样的关系，组件A在它的模板中使用了组件B，他们之间必然需要相互通信，父组件要给子组件传递数据，子组件需要将它内部发生的事情告知父组件，为了保证父子组件的解耦，可维护性及可重用性。在vue.js中，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。2-1使用props传递数据不能在子组件的模板内直接引用父组件的数据，要让子组件使用父组件的数据，我们需要通过子组件的props选项。如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><childmessage="hello!"></child></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//全局注册Vue.component('child',{//声明propsprops:['message'],template:'<span>{{message}}</span>'});newVue({el:'#container1'})</script></html>结果在页面上会打印hello。注意：HTML特性是不区分大小写的，所以当使用的不是字符串模板，camelCased(驼峰式)命名的prop需要转换为相对应的kebab-case(短横线隔开式)命名：如下代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><!--kebab-caseinHTML--><childmy-message="hello!"></child></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">//全局注册Vue.component('child',{//声明propsprops:['myMessage'],template:'<span>{{myMessage}}</span>'});newVue({el:'#container1'})</script></html>2-2理解动态prop在模板中，要动态地绑定父组件的数据到子模板的props，使用v-bind，每当父组件的数据变化时，该变化会传递给子组件。<divid="container1"><inputv-model='parentMsg'/><br/><!--kebab-caseinHTML--><childv-bind:my-message="parentMsg"></child></div>使用v-bind的缩写语法通常更简单：<child:my-message="parentMsg"></child>代码如下：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><inputv-model='parentMsg'/><br/><!--kebab-caseinHTML--><childv-bind:my-message="parentMsg"></child></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">newVue({el:'#container1',data:{parentMsg:'Message'},components:{child:{props:['myMessage'],template:'<span>{{myMessage}}</span>'}}})</script></html>3.理解自定义事件父组件使用props传递数据给子组件，但是如果子组件需要把数据传回去的话，就需要自定义事件了；3-1使用v-on绑定自定义事件每个vue实例都实现了事件接口，即：1.使用on(eventName)监听事件2.使用on(eventName)监听事件2.使用emit(eventName)触发事件注意：on和emit不是addEventListener和dispatchEvent的别名。且父组件可以在使用组件的地方直接用v-on来监听子组件触发的事件。不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定，就像以下的例子：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><p>{{total}}</p><button-counterv-on:increment="incrementTotal"></button-counter><button-counterv-on:increment="incrementTotal"></button-counter></div></body><scriptsrc="./vue.js"></script><scripttype="text/javascript">Vue.component('button-counter',{template:'<buttonv-on:click="increment">{{counter}}</button>',data:function(){return{counter:0}},methods:{increment:function(){this.counter+=1;this.$emit('increment');}},})newVue({el:'#container1',data:{total:0},methods:{incrementTotal:function(){this.total+=1;}}})</script></html>上面代码：初始化时候实例化设置data:{total:0},设置total为0，子组件button-counter默认为0，当点击子组件的时候调用increment方法，当前的counter自增1，然后在子组件触发$emit('increment')事件，当使用v-on:increment会监听到事件后，会调用父组件的incrementTotal方法，因此父组件也自增1.上面代码中子组件已经和它外部完全解耦了。它所做的只是
报告
软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载
自己的内部事件，至于父组件是否关心则与它无关。4.理解使用自定义事件的
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
单输入组件自定义事件可以用来创建自定义的表单输入组件，使用v-modal来进行数据双向绑定。比如如下代码：<inputv-modal="something"/>上面的代码是下面的语法糖；如下代码：<inputv-bind:value="something"v-on:input="something=$event.target.value"/>因此在创建组件中时，相当于下面的简写；如下代码：<custom-inputv-bind:value="something"v-on:input="something=arguments[0]"></custom-input>所以要让组件的v-model生效，必须满足下面的条件：1.接受一个value属性。2.在有新的value时触发input事件。如下测试代码：<!DOCTYPEhtml><html><body><head><title>演示Vue</title></head><divid="container1"><currency-inputv-model="price"></currency-input></div></body><scriptsrc="./vue.js"></script><script></script><scripttype="text/javascript">Vue.component('currency-input',{template:'\<span>\$\<input\ref="input"\v-bind:value="value"\v-on:input="updateValue($event.target.value)"\>\</span>\',props:['value'],methods:{//不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制updateValue:function(value){varformattedValue=value//删除两侧的空格符.trim()//保留2小数位.slice(0,value.indexOf('.')+3)//如果值不统一，手动覆盖以保持一致if(formattedValue!==value){this.$refs.input.value=formattedValue}//通过input事件发出数值this.$emit('input',Number(formattedValue))}}});newVue({el:'#container1',data:{price:0}})</script></html>5.单个slot <slot>标签中的任何内容都被视为 备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有插入的内容时才显示备用内容。如果<slot>标签中有内容的话，就显示该内容。比如 my-component 组件有如下代码：<divclass="content"><h2>thisisacomponent</h2><slot>如果没有分发内容，则显示slot中的内容</slot><p>asdsadsdad</p></div>父组件有如下代码：<divid="container1"><my-component><h1>HelloVue.js</h1></my-component><my-component></my-component></div>渲染后的结果为：<divid="container1"><divclass="content"><h2>thisisacomponent</h2><h1>HelloVue.js</h1><p>asdsadsdad</p></div><divclass="content"><h2>thisisacomponent</h2>如果没有分发内容，则显示slot中的内容<p>asdsadsdad</p></div></div>所有测试实例代码如下：<!DOCTYPEhtml&
浙公网安备 33021202002483