精华内容
下载资源
问答
  • 在上一篇文章我们学习了如何使用 v-if 和 v-else 来实现两个组件之间切换。但是当我们组件个数多于两个时候 v-if 和 v...不过别担心,vue 为我们提供了component 元素,他就可以帮我们实现多个组件之间切换。

    28vue学习——component 元素实现两个以上的组件切换

    前言:

    在上一篇文章中我们学习了如何使用 v-if 和 v-else 来实现两个组件之间的切换。但是当我们的组件个数多于两个的时候 v-if 和 v-else 是无法实现切换效果的。不过别担心,vue 为我们提供了component 元素,他就可以帮我们实现多个组件之间的切换。

    1.代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>组件切换</title>
    </head>
    
    <body>
        <div class="body">
            <input type="button" value="登录" @click="name='login'">
            <input type="button" value="注册" @click="name='register'">
            <input type="button" value="首页" @click="name='index'">
            
            <!-- 使用 component 元素实现组件之间的切换 -->
            <component :is="name"></component>
        </div>
    
    
        <!-- 登录组件 -->
        <template id="login">
            <h3>我是登录组件</h3>
        </template>
    
        <!-- 注册组件 -->
        <template id="register">
            <h3>我是注册组件</h3>
        </template>
    
        <!-- 首页组件 -->
        <template id="index">
            <h3>我是首页组件</h3>
        </template>
    
    
        <script src="../lib/vue-2.4.0.js"></script>
        <script>
            /* 登录组件 */
            Vue.component("login", {
                template: "#login"
            })
            /* 注册组件 */
            Vue.component("register", {
                template: "#register"
            })
            /* 首页组件 */
            Vue.component('index', {
                template: "#index"
            })
    
            let vm = new Vue({
                el: ".body",
                data: {
                    name:'login'
                }
            })
        </script>
    </body>
    
    </html>
    
    

    效果:
    在这里插入图片描述

    讲解:
    (1)定义三个不同的组件
    在这里插入图片描述
    (2)在 vue 实例的控制区域中写入 component 元素,设置 is 属性(需要通过 v-bind 进行数据绑定),其值为将要显示的组件的名称
    在这里插入图片描述
    (3)在 data 中定义一个 name 值,其初始值为 ‘login’(注意要用引号包裹起来)
    在这里插入图片描述
    (4)为各个按钮设置事件绑定,点击时修改 name 为对应的值(注意 name 的值要用引号包裹起来)
    在这里插入图片描述

    展开全文
  • 组件是Vue最强大功能之一。 组件是一组可被复用具有一定功能,独立完整代码片段,这个代码片段可以渲染一个完整视图结构 组件开发 如何注册组件? 第一步,在页面HTML标签使用这个组件名称,像使用DOM元素...

    组件是Vue最强大的功能之一。
    组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构
    组件开发
    如何注册组件?
    第一步,在页面HTML标签中使用这个组件名称,像使用DOM元素一样。(通常是一个自定义元素)。
    <div id="app">
      <my-component></my-component>
    </div>
    第二步,使用Vue.extend方法创建一个组件
    var MyComponent = Vue.extend({
      // .........
    })
    在extend方法中接收一个对象.
    这个对象是一个描述组件的对象,它具有Vue实例化对象上的属性方法,它还有一些特殊的属性
    template:组件内部渲染模的板字符串
    props:父组件向组件内部传入数据的引用
    <div id="app">
      <input type="text" v-model="inputVal"/>
      <my-component msg="you" v-bind:inputtext="inputVal"></my-component> 
    </div>
    想在template里用这个msg和inputVal
    组件内部还没有这个msg和inputVal
    v-bind是为了创造个js环境
    所以将组件中的属性值引入组件内部通过props属性
    var MyComponent = Vue.extend({
    props:['msg','inputtext'],
    //定义模板字符串
    template: '<div>hello world!{{msg}}</div>'
    })
    第三步,使用Vue.component方法注册组件。
    Vue.component('my-component', MyComponent)
    eg:
    //页面中使用组件
    <div id="app">
      <my-component></my-component>
    </div>
    // 定义组件
    var MyComponent = Vue.extend({
      //定义模板字符串
      template: '<div>hello world!</div>'
    })
    // 注册组件
    Vue.component('my-component', MyComponent)
    //创建vue的实例化对象
    new Vue({
      el: '#app'
    })
    结果:
    <div id="example">
      <div>hello world!</div>
    </div
    在vue的组件中他是一个独立个体,因此他的事件,数据等等要绑定在组件的内部不是vue的实例化对象
    注意:
    子组件向父组件通信,通过子组件实例化对象上的$dispatch方法实现
    第一个参数表示消息的名称
    从第二个参数开始表示子组件向父组件传递的数据
    eg:
    var MyComponent = Vue.extend({
      template: '<div>hello world!</div><button v-on:click="toUpper"></button>',
      methods:{
      toUpper:function(){
        //具体的逻辑
        //作用域 this指的是组件的实例化对象
        this.$dispatch("abc",123)
      }
      }
    })
    为了接收子组件向父组件传送的消息。在父组件中订阅该消息 在events属性中定义这些消息
    属性表示消息的名称
    属性值是一个函数,表示处理消息的回调函数,参数是子组件发送消息时候传递参数,作用域 vue的实例化对象
    new Vue({
      el: '#app',
      event:{
        //接收子组件传递的数据 123
        'abc':function(){
          //作用域 vue的实例化对象
          //参数就是[123] 
        }
      }
    })

     Component元素

    一旦向页面中渲染的时候,就会被删除,有一个属性叫做is属性,通过这个属性可以确定显示哪个组件,is是一个自定义属性,值是一个字符串,想让他的值是一个变量,要添加v-bind创建js环境。
    <div id="app">
      <component v-bind:is="view"></component>
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        view: 'home'//显示home这个组件
      }
    })
    自定义路由
    Vue没有为我们提供路由,自己定义路由
    路由规则比如home首页,list列表页,product详情页
    ‘’ 或者 #/home 进入home组件
    #list/type/1 进入list组件
    #/product/2 进入product组件
    function router () {
      // 根据hash不同决定渲染哪个页面
      var str = location.hash;
      str = str.slice(1);
      str = str.replace(/^\//, '')
      // 获取 / 前面的字符串
      if (str.indexOf('/') > -1) {
        str = str.slice(0, str.indexOf('/'))
      }
      var map = {
        home: true,
        list: true,
        product: true
      }
      if (map[str]) {
        app.view = str;
      } else {
        app.view = 'home'
      }
    }
    // 页面进入的时候,会触发load事件
    window.addEventListener('load', router)
    // hash改变时候的事件交hashChange事件
    window.addEventListener('hashchange', router)

     注意:在组件中定义数据,这些数据不能直接作为data的属性值,要放在该属性函数中作为返回值。这样才能成功设置绑定数据

    在vue的实例化对象中写数据:data后面直接是个{} 就可以获取数据
    var app = new Vue({
      el: '#app',
      data: {
        view: ''
      }
    })
    在组件中获取数据 数据作为data对象里面函数的返回值获取。
    var HomComponent = Vue.extend({
      data: function () {
        return {
          types: [
            {id: 1, title: '美食', url: '01.png'},
            {id: 2, title: '电影', url: '02.png'} 
          ]
        }
      }
    })

    异步数据的渲染

    固定数据我们可以通过同步数据写在文件中
    有时候,页面中一些数据,需要需要服务器端传递过来,这一类数据渲染,我们称之为异步数据的渲染
    异步数据渲染什么时候请求数据?
    当组件渲染完毕,会触发一个created方法,如果这个方法被调用说明这个组件被渲染了
    var HomComponent = Vue.extend({
      template: Util.tpl('tpl_home'),
      data: function () {
      return {
        types: [
          {id: 1, title: '美食', url: '01.png'},
          {id: 2, title: '电影', url: '02.png'}
          ]
        }
      },
      created: function () {
        //作用域是组件的实例化对象
        /执行异步数据的获取发ajax
        将数据保存在data中使用。往组件的实例化对象中data中添加
      }
    })

    好文要顶 关注我 收藏该文  

    展开全文
  • vue.js ,获取某个DOM Element常用方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小项目里,在一些没有使用 webpack 等构建工具项目,创建一个组件并不是那么值得...

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;

    在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) ;

    自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数,并允许我们监听指令绑定的数据的变化,但是它也是有缺点的,就是在指令的钩子函数内无法通过this来访问当前 vue 实例,也就无法进一步进行复杂的操作(虽然一般不需要什么复杂的操作),在 vue 的钩子函数 (lifecycle hook) 和方法 (method) 中也无法像this.$el那样轻易的访问到自定义指令绑定的DOM元素;

    不过只要通过一点点变通的做法,就可以突破这个限制:

    HTML代码:

    JavaScript代码:

    const vm = new Vue({

    el:'#app',

    data : {

    elements : {}

    },

    directives : {

    run (el, binding) {

    if (typeof binding.value == 'function')

    binding.value(el);

    }

    },

    methods : {

    register (flag) {

    return (el)=>{

    this.elements[flag] = el;

    }

    }

    },

    beforeMount () {

    console.log(this.elements.test1); //=> undefined

    },

    mounted () {

    console.log(this.elements.test1); //=> the span DOM Element

    console.log(this.elements.test2); //=> the p DOM Element

    }

    })

    如代码所示,建立一个名为run的自定义指令,运行绑定的方法,并将当前 DOM Element 作为参数传入;

    同时建立一个名为register的方法,接收一个 flag 参数,并根据这个参数返回一个用于将传入参数注册到this.elements对象中的闭包函数;

    将写好的 run 指令和 register 方法搭配使用,就可以把想要的 DOM 注册进this.elements,并在 hook 或者 method 中十分方便的访问;

    注意:自定义指令将会在DOM元素插入 Document 时,也就是组件 mount 时首次执行,所以在此之前,比如beforeMount钩子中是无法使用的,这点也和this.$el 一致,详情可以查看官方文档中的生命周期图示;

    其实也很好理解啦……在 mount 之前,根本就没有这个实际的 DOM 元素,怎么可能访问的到……(:з)∠)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • vue 组件 Vue.component 用法

    万次阅读 多人点赞 2018-10-02 23:04:10
    可以在一个通过 new Vue 创建 Vue 根实例,把这个组件作为自定义元素来使用 1. 定义一个新组件。命名为 counter 格式: 1.组件名为"conter"; 2.data 数据属性:写函数; 3.template 模板:写...

    定义:

    组件是可复用的 Vue 实例,且带有一个名字

    可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用

    1. 定义一个新组件。命名为 counter

    格式:

    1.组件名为"conter";

    2.data 数据属性:写函数;

    3.template 模板:写组件的内容(元素和触发的事件)

    Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容(元素和触发的事件)
    	data:function(){
    			return {count:0}
    			},
    
    //template 是模板的意思,在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
    	template:'<button v-on:click="count++">点击计算点击次数:{{count}}次</button>'
    })
    

    数据属性data 必须是一个返回值的函数

    data: function(){

              return { count:0 }

              } 

     2.在创建的 Vue 根实例中,把这个组件作为自定义元素来使用组件

    这里div 元素(faCounter)就是vue 实例的根元素。

    组件counter 被作为自定义元素,嵌套在根元素 faCounter 里面

    <div id="faCounter">  <!--faCounter 就是组件元素counter的父元素,要把新建的vue实例绑定在这个父元素-->
    <counter></counter>   <!--counter 就是新建的组件,也就是自定义的元素-->
    </div>
    new Vue({
         el:"#faCounter"
        })

    网页效果:

    完整代码:

    <div id="faCounter">  <!--faCounter 就是组件元素counter的父元素,要把新建的vue实例绑定在这个父元素-->
    <counter></counter>   <!--counter 就是新建的组件,也就是自定义的元素-->
    </div>
    
    <script> 
    //定义一个新的vue 组件。组件就是自定义的元素
    Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容(元素和触发的事件)
    	data:function(){
    			return {count:0}
    			},
    
    //template 是模板的意思,在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
    	template:'<button v-on:click="count++">点击计算点击次数:{{count}}次</button>'
    })
    
    //定义一个新的vue  实例,用el 绑定组件元素(counter)的父元素  faCounter 元素上
    new Vue({
    	el:"#faCounter"
    	})
    
    </script>

     


    展开全文
  • Vue中组件(component)

    2017-08-30 17:13:15
    组件(Component)是 Vue.js 最强大功能之一。  组件可以扩展 HTML 元素,封装可重用代码。在较高层面上,组件是自定义元素Vue.js 编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的...
  • 参考Vue 2.0教程,有讲到is 使用: 解析 DOM 模板时注意事项 有些 HTML 元素,诸如<ul>、<ol>、<table>和<select>,对于哪些元素可以出现在其内部是有严格限制。而有些元素,诸如&...
  • vue项目组件化过程,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容大组件时候,发现在这个组件内部,实现了太多if、for逻辑,包括大量html元素,虽然说每段功能块都有批注,但是...
  • vue 组件(Component

    2017-07-31 12:58:09
    angular中的指令和vue的组件很像,而vue中的指令是用来对节点进行操作的angular的指令里包含了template,但是vue将它单独的抽了出来,称为组件(compontent)。全局组件全局组件是直接在Vue构造函数上扩充组件,在实例...
  • vue.componentvue.use用法

    万次阅读 2018-12-29 15:23:23
    第一个参数是自定义元素名称,也就是将来在别组件使用这个组件标签名称。 第二个参数是将要注册的Vue组件。 import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // ...
  • vue项目组件化过程,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容大组件时候,发现在这个组件内部,实现了太多if、for逻辑,包括大量html元素,虽然说每段功能块都有批注,但是...
  • 文章目录组件组件 (Component) 是 Vue.js 最强大功能之一。组件可以扩展 HTML 元素,封装可重用代码。在较高层面上,组件是自定义元素Vue.js 编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is...
  • 我们可以在一个通过new Vue创建的Vue根实例,把这个组件作为自定义元素来使用。 组件第一个参数是组件名称,第二个参数是以对象形式描述一个组件。 <button-counter></button-counter> //定义一...
  • 在很多Vue项目,我们使用Vue.component来定义全局组件,紧接着new Vue({ el: '#containder'})在每个页面内指定一个容器元素。 1、这种方式在很多小规模项目运作很好,在这些项目里JavaScript只被用来加强...
  • 第一个参数是自定义元素名称,也就是将来在别组件使用这个组件标签名称。 第二个参数是将要注册的Vue组件。 import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // 将loading...
  • Vue中提供了一些固定标签来方便我们在开发过程中使用,并且在开发过程中,我们很有可能因为要使用某些第三方库而不得已要操作DOM元素,因此如何获取并操作DOM元素的使用呢。 Vue中提供标签 component 这个标签...
  • vue.jsVue中提供了一些固定标签来方便我们在开发过程中使用,并且在开发过程中,我们很有可能因为要使用某些第三方库而不得已要操作DOM元素,因此如何获取并操作DOM元素的使用呢。Vue中提供标签component这个...
  • 属性 new Vue({ //绑定元素 el:'#app', //要绑定数据 data:{}, //用来接受外部资料属性 props:{}, // 用来定义在Vue内使用方法 methods:{}, //用来观察Vue 数据更新 ...
  • Vue——component组件

    2018-09-04 23:57:50
    使用组件,必须要有Vue实例,并且要把实例挂载在标签上,在vue实例使用组件模板,会替换掉Vue绑定的元素 <script> new Vue({ el:'#app' }) </script> 基础属性 1、props属性是用来存放参数,把...
  • 错误重现: 错误原因:Component template should contain exactly one root element ----翻译为:如果你正在...解决办法:对模板template下只能使用一个元素,包一个大div,其他元素都嵌套在这个div ...
  • vue组件学习(component) ...template:模板意思,可以将你需要写的元素放入template ,例如: 运行结果如下: 由上图可见,template属性其实就是一个可以存放各种html标签容器。 组件就大致相当于重...
  • --在创建的Vue根实例,把这个组件作为自定义元素来使用组件--> <counter></counter> </div> <script> Vue.component("counter", { data: function () { return { count: 0 } .
  • 6-vue-component

    2019-04-03 16:25:34
    Vue中所谓全局指是该挂载下区域; 全局组件:构造器外定义 全局组件必须写在Vue实例创建之前,才在该根元素下面生效; 组件处于全局下不可以添加默认事件,要用全局事件函数,必须父子通信 <body...
  •  在 vue.js ,获取某个DOM Element常用方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小项目里,在一些没有使用 webpack 等构建工具项目,创建一个组件并不是那么...
  • Vue中的is

    2021-01-08 14:05:53
    官方解释:用于动态组件且基于 DOM 内模板限制来工作。 我是没有看懂官方解释,经过探索,总结出了is两个作用。 1.解析DOM模板 : 解除限制元素 意思就是有些元素,比如ul里面只能直接包含... 'component-name':{

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 493
精华内容 197
热门标签
关键字:

vue中的component元素

vue 订阅