Vue快速入门-2-Vue框架高级操作

2025-01-07 技术教程

小生博客：http://xsboke.blog.51cto.com

-------谢谢您的参考，如有疑问，欢迎交流

目录:
1. 自定义组件2. 全局注册的自定义组件3. 局部注册自定义组件4. 组件的嵌套5. 组件的动态切换6. Vue的ajax

自定义组件

就相当于自定义标签,其实底层还是html标签,只不过是套了个名字自定义组件分为全局注册和局部注册共同点: 为什么data必须以函数方式返回数据？因为在函数中,变量属于内部变量,这样当自定义组件被多次引用时变量不会互相影响. 只能在Vue对象中使用自定义组件不同点: 全局注册的自定义组件：创建组件之后,只要是Vue对象就可以使用局部注册的自定义组件：在Vue实例中使用components选项来定义你的局部组件

全局注册的自定义组件

2.1 组件的结构

Vue.component('component-name',{ /* ...... */}) -- 'component-name' 组件名称 -- { /* ...... */} 组件的内容(执行的函数)

2.2 简单组件的实现

<div id="app"> <button-counter></button-counter> </div> <div id="app1"> <button-counter></button-counter> </div> <script type="text/javascript"> // 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的 Vue.component('button-counter',{ data:function(){ -- 因为返回的是函数,所以两个应用了组件的标签中的count值是互不影响的 return { -- 如果需要所有应用的当前组件的count值都一样,可以定义一个全局变量再引入这里 count:0 } }, // 自定义组件最后返回的结果 template:'<button v-on:click="count++"><b>{{count}}</b></button>' -- 当点击按钮时,count的值就+1,template定义的是真正生成的html }) new Vue({el:'#app'}) -- 可以看到只要是Vue对象就可以应用全局自定义组件 new Vue({el:'#app1'}) </script>

2.3 当你需要多个组件之间的data返回值相同时可以这样解决.

<div id="app"> <button-counter></button-counter> <button-counter></button-counter> </div> <script type="text/javascript"> var mydata= {count:0} -- 在外部定义变量 // 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的 Vue.component('button-counter',{ data:function(){ return mydata; -- 在组件中应用 }, // 自定义组件最后返回的结果 template:'<button v-on:click="count++"><b>{{count}}</b></button>' }) new Vue({el:'#app'}) </script>

2.4 解决你template里面的内容比较庞大时的操作

```<head> <script type="text/template" id="temp"> -- 首先在head中定义一个类型(type)为"text/template"的script标签,然后增加一个唯一的属性如下id="temp" <div> {{message}} <ul> <li>第一部分：Vue基本语法</li> <li>第二部分：自定义组件</li> </ul> </div> </script></head><body> <div id="app"> <my-header></my-header> </div> <div id="app2"> <my-header></my-header> </div> <script type="text/javascript"> Vue.component('my-header',{ template:'#temp' -- 然后在template中指定这个id名即可 }); new Vue({el:'#app'}); new Vue({el:'#app2'}); </script></body>```局部注册自定义组件

局部注册自定义标签就是在Vue实例里面通过components选项创建自定义标签 <head> <script type="text/template" id="temp"> <div> {{message}} <ul> <li>第一部分：Vue基本语法</li> <li>第二部分：自定义组件</li> </ul> </div> </script> </head> <body> <div id="app"> <my-header></my-header> </div> <script type="text/javascript"> // 局部组件就是Vue对象内部定义的组件,仅仅自身可以使用 var vue = new Vue({ el:'#app', components:{ 'my-header':{ -- 创建一个名为'my-header'的自定义标签 template:'#temp', -- 关联模板 data:function(){ return{ message:'hello vue' } } } } }) </script> </body>组件的嵌套

知识点:使用slot的name属性,用来关联标签或者组件,实现定义嵌套标签或者组件的位置 <div id="app"> <my-header> <my-title>组件与组件之间嵌套</my-title> </my-header> </div> <div id="app2"> <my-header> <button slot="vleft">左</button> -- 这里的slot值必须和Vue实例中components选项的name值一样 <button slot="vright">右</button> </my-header> </div> <script> var vue = new Vue({ el:'#app', // 组件局部注册 components:{ 'my-header':{ // 系统给定的slot来实现标签的嵌套操作 template:'<div>我是头部内容<slot /></div>' -- 当只需要嵌套一个标签或组件时,直接使用slot,不需要定义name }, 'my-title':{ template:'<h4>我是标题!!</h4>' } } }); var vue = new Vue({ el:'#app2', // 组件局部注册 components:{ 'my-header':{ // 系统给定的slot来实现标签的嵌套操作 template:'<div><slot name="vleft" />我是头部内容<slot name="vright" /></div>' } } }) </script>组件的动态切换

类似JQuery的tab  <div id="app"> <button @click="changeComp(1)">第一项</button> <button @click="changeComp(2)">第二项</button> -- 点击按钮时执行changeComp函数,并且传入实参"2". <button @click="changeComp(3)">第三项</button> <keep-alive> -- 使用keep-alive标签可以保留当前组件的状态值,防止组件之间切换时,值丢失 <component v-bind:is="nowHeader"></component> </keep-alive> </div> <script> var vue = new Vue({ el:'#app', data:{ nowHeader:'header-1' }, components:{ 'header-1':{template:'<div>组件1:<input /></div>'}, 'header-2':{template:'<div>组件2:<input /></div>'}, 'header-3':{template:'<div>组件3:<input /></div>'}, }, methods:{ changeComp:function(index){ this.nowHeader = 'header-' + index -- 当changeComp函数被触发时,Vue实例data中的变量"nowHeader",将根据实参的值而发生变化 } } }) </script>Vue的ajax

详情查看axios中文手册

中文手册:https://www.kancloud.cn/yunye/axios/234845 自2.0之后Vue使用axios实现ajax功能 -- 注意使用axios需要引入axios的js文件 <table id="app" border="1" width="300px">  <tr v-for="item in result"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> <script> var vue = new Vue({ el:'#app', data:{ result:[] }, created:function(){ -- 在创建VUE实例后执行这个函数 // 通过axios访问远程数据 axios.get("data.json").then(function(result){ -- then是操作成功后执行的函数 this.result = eval(result.data); -- axios获取的数据默认是string(这将导致您不能循环列表,字典等),可以使用eval将string的格式转换成对象 }.bind(this)); -- bind(this)的意思是将Vue实例中的this和axios中的this绑定到一块, } -- 因为axios和Vue实例的数据是不互通的 }) </script> then -- 操作成功后执行的动作 catch -- 操作异常时执行的动作