精华内容
参与话题
问答
  • Vue组件(components)个人理解

    万次阅读 2019-05-03 21:46:58
    1、搭建了项目。 2、相关代码 2、解释过程 相关链接

    目录


    1、搭建了项目。

    2、相关代码

    2、解释过程

         相关链接


     

    1、搭建了项目。

                                

     

    2、相关代码

    可以看到下面的el:"pp"和id="pp"是对应的。但在实际浏览器执行渲染后,div.pp并不显示。而是被App这个组件代替了

    main.js和index.html

    import Vue from 'vue'
    import App from './App'//引入组件
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#pp',
      components: { App },//调用组件
      template: '<App></App>'//模板<App></App>可以写作<App/>
    })
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vcustomers</title>
      </head>
      <body>
        <div id="pp"></div>
        <!-- -->
      </body>
    </html>
    

    2、解释过程

    (1)实列化一个vue挂在到id为pp的element上,这个vue首先用模板(template)代替了原来的div。

    (2)再将节点<app></app>用名为App的组件渲染出来。就像下面的<HelloWorld/>的渲染一样。

     


    相关链接

    【1】Vue实践一,搭建脚手架

    【2】问答详情:vue实例中template: '<App/>',这样写是什么意思


     

     

    展开全文
  • 浅谈Vue下的components模板

    千次阅读 2019-04-11 16:22:24
    组件 创建方式一: HTML:<div id="app"><c1></c1></div> /*要注意,局部模板的作用范围 只在 相对的vue对象 范围内, 比如此例子 <haha><...let vm = new Vue(...

    组件

    创建方式一:

    HTML: <div id="app"><c1></c1></div>

    /*要注意,局部模板的作用范围 只在 相对的vue对象 范围内, 比如此例子 <haha></haha>的作用范围 只在 <div id="app"></div>内*/

    let vm = new Vue({ ...

        components:{"c1":{ template:"<div>i am c1<div>" }}

    });

     

    创建方式二:Vue.component 全局组件 --- 全局模板 顾名思义 肯定是 放在哪里都能用

    HTML: <div id="app"><c2></c22></div>

     

    //这里使用Vue.component原型方法来创造。注意,全局组件注册位置必须在父实例的模块上面(即在初始化组件根实例之前,注册好组件)

    Vue.component(

          "c2",

          template:"<div>i am c2<div>"

    );

    let vm = new Vue({...,components:{  这里则不需要添加 } });

     

    创建方式三:局部注册

    不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:

    HTML: <div id="app"><c3></c3></div>

     

    let c3={ template:"<div>嘻嘻嘻<div>" }

    let vm = new Vue({ ...,components: { c3});

     

    防止有些浏览器不认识标签报错,用 is 属性判断

    is 属性判断

     

    组件中的data必须返回object类型

     

    父、子组件

    在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

     

    使用Props传递数据

    组件实例(父实例)的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

    注:把父实例的引用类型的数据传给子组件,子组件也能反向修改这个引用类型的数据。这种操作方式有两面性,看个人怎么用了,官方是不推荐这么操作,如上是建议用props把数据传给子组件,通过event或emit返给父实例/父组件

    例如:

     

    prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”:

    
     

    Vue.component('child', {

    // 声明 props

    props: ['message'], //prop 是父组件用来传递数据的一个自定义属性, props: ['属性名']

    // 就像data 一样,prop可用在模板内. 同样也可在 vm实例中像"this.message"这样使用

    template: '<span>{{ message }}</span>'

    })

    然后向它传入一个普通字符串:

    
     

    <child message="hello!"></child> //子组件需要显式地用 props选项声明

    动态 Props

    v-bind

    类似于用 v-bind 绑定 HTML 特性到一个表达式,组件也可以使用 v-bind 动态绑定 props 的值 到 父组件的数据中

    每当父组件的数据变化时,该变化也会传给子组件:

    
     

    <div>

    //[父组件的数据中,每当父组件的数据变化时,该变化也会传导给子组件]

    <input v-model="parentMsg"> //双向绑定

    <br>

    <child v-bind:my-message="parentMsg"></child> //子组件

    </div>

    使用 v-bind 的缩写语法通常更简单:<child :my-message="parentMsg"></child>

     

     

    字面量语法 vs 动态语法

    初学者常犯的一个错误是使用字面量语法传递数值:

    <!-- 传递了一个字符串"1" -->

    <comp some-prop="1"></comp>

    因为它是一个字面 prop ,它的值以字符串 "1" 而不是以实际的数字传下去。

    如果想传递一个实际的 JS数字,需要使用 v-bind ,从而让它的值被当作JS表达式计算:

    <!-- 传递实际的数字 -->

    <comp v-bind:some-prop="1"></comp>

     

     

    注: 测试发现,在组件的prop中, prop-name="..." 和 v-bind:prop-name="..." 有区别

     

    单向数据流

    prop 是单向绑定的当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态。

    另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。(个人测试没有警告!!!)

    通常有两种改变 prop 的情况:(父影响子,子不影响父)

    1. prop 作为初始值传入子组件之后只是将它的初始值作为本地数据的初始值使用. 在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值

     

    例如,定义一个局部 data 属性,并将 prop 的初始值作为局部数据的初始值:

    props: ['initialCounter'], //子组件
      data: function () { //子组件
      return { counter: this.initialCounter }//counter子组件的局部数据
    }
    

    父控件的变量值作为子组件的属性值,如:

    2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性

        例如,在 computed 定义一个属性,此属性从 prop 的值计算得出。

        <div id="div8">

            <input type='text' v-model="msg">

            <child v-bind:message='msg'></child>

        </div>

        <script type="text/javascript">

            Vue.component('child', {

                props: ['message'],

                template: '<p>message:{{ normalizedSize}} </p>',

                computed: {

                    normalizedSize: function() {

                        return this.message += "_str"

                    }

                }

            })

            new Vue({

                el: '#div8',

                data: {

                    msg: '我是msg'

                }

            })

        </script>

     

    执行结果:

     

    再如:从父控件向子组件传值

       

     

     

    Prop 验证

    组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。

    prop 是一个对象而不是字符串数组时,它包含验证要求:

    type 可以是下面原生构造器:

    • String
    • Number
    • Boolean
    • Function
    • Object
    • Array

    type 也可以是一个自定义构造器,使用 instanceof 检测。

    当 prop 验证失败了, Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告

     

    #自定义事件

    我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

     

    使用 v-on 绑定自定义事件

    每个 Vue 实例都实现了事件接口(Events interface),即:

    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName) 触发事件

    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    下面是一个例子,在本例中,子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件:

     

    给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如:

    <my-component v-on:click.native="doTheThing"></my-component>

    使用自定义事件的表单输入组件

    自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。牢记:

    <input v-model="something">

    仅仅是一个语法糖,他也相当于:<input v-bind:value="something" v-on:input="something = $event.target.value">

    所以在组件中使用时,它相当于下面的简写<input v-bind:value="something" v-on:input="something = arguments[0]">

    所以要让组件的 v-model 生效,它必须:

    • 接受一个 value 属性
    • 在有新的 value 时触发 input 事件

    例如,货币过滤器:

     

     

     

     

    (模板的继承)全局模板 顾名思义 肯定是 放在哪里都能用

    /*

      我们来讲个最简单的 父亲,儿子 ,孙子的 例子

      要注意以下几点:

            1.先实例化对象vm

            2.造出parent模板,并挂载在 vm的 conponents 下

            3.造出 son 模板 并 挂载 在 父级 parent 的conponents下,并在 父级template属性中 包裹住自己的 模板名标签 ;同理 造出孙子标签

            4.在HTML节点中添加 目标 根节点

                  (节点的顺序一定要书写正确)

    */

    <div id="app">

        <parent></parent>

    </div>

     

    //创建 孙子 模板

    let grendson = { 

        template:"<div>孙子</div>"

    }

     

    //创建 儿子 模板

    let son= { 

        template: "<son>儿子<grendson >孙子</grendson ></son>"

        components:{

            grendson 

        }

    }

     

    //创建 父亲 模板

    let parent = { 

        template:"<div>父亲<son></son></div>"

        components:{

            son

        }

    }

    //实例化vm对象

    let vm = new Vue({

        el: "#app",

        data:{

        },

        components:{

            parent

        }

    });

     

     

     

    实例一

     

    css:

    <style type="text/css">

            .tab-button {

              padding: 6px 10px;

              border-top-left-radius: 3px;

              border-top-right-radius: 3px;

              border: 1px solid #ccc;

              cursor: pointer;

              background: #f0f0f0;

              margin-bottom: -1px;

              margin-right: -1px;

            }

            .tab-button:hover {

              background: #e0e0e0;

            }

            .tab-button-active {

              background: #e0e0e0;

            }

            .tab {

              border: 1px solid #ccc;

              padding: 10px;

            }

    </style>

     

    html:

    <div id="app">

            <div v-for="(item, index) in buttons">

                <button @click="change($event)" :id="item.id" class="tab-button" 

                     :class="{'tab-button-active': item.isActive}">{{item.name}}</button>

                <div class="tab">

                    <component v-bind:is="currentTabComponent"></component>

                </div>

            </div>

    </div>

     

    script:

    var vm = new Vue({

        el: '#app',

        data:{

            currentTab: 'Home',

            tabs:['Home','Posts','Archive'],

            buttons: [

                {id: 0, name: 'Home', isActive:true},

                {id: 1, name: 'Posts', isActive:false},

                {id: 2, name: 'Archive', isActive:false}

            ],

            isActive: false,

            prevBtn: 0

        },

        computed: {

            // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

            // 这里当 this.index 有改变时,currentView()会重新求值

            currentTabComponent(){

                return 'tab-' + this.currentTab.toLowerCase()

            }

        },

        methods: {

            change( $event ){

                var index = $event.target.id;

                

                Vue.set(vm.buttons[vm.prevBtn], 'isActive', false);

                Vue.set(vm.buttons[index], 'isActive', true);

                this.currentTab = this.tabs[index%3];

                

                vm.prevBtn = index;

            }

        }

    })

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • components组件

    2019-04-10 09:56:10
    小程序 Vue 倒计时(CountDown.vue) 转载于:https://juejin.im/post/5cadbd97f265da0387338800

    小程序

    Vue

    1. 倒计时(CountDown.vue)

    转载于:https://juejin.im/post/5cadbd97f265da0387338800

    展开全文
  • 快速搞懂Vue里面components和template

    千次阅读 2019-08-12 00:59:33
    vue可以把内容变成组件化,然后提高复用性,那是怎样进行组件化,然后使用呢? 1.先写组件 2.引用组件 我们是单独写的一个js文件存放组件的所以它不是全局引用的,所以我就要把上面写好的registerForm组件引用过来...

    vue可以把内容变成组件化,然后提高复用性,那是怎样进行组件化,然后使用呢?

    1.先写组件

    在这里插入图片描述

    2.引用组件

    在这里插入图片描述
    我们是单独写的一个js文件存放组件的所以它不是全局引用的,所以我就要把上面写好的registerForm组件引用过来,在这里它的名字被我指定做了loginForm

    3.使用组件

    在这里插入图片描述
    上面我们只是 引用了,就好像声明一样,我还没有使用它,所以,要使用它就要在template:写出我们的引用后的组件名,每个组件都是一个标签,就想input ,radio一样,
    所以是。

    4.运行结果

    在这里插入图片描述

    5.易混淆点 Vue.component

    Vue.component 是注册全局组件,如果注册全局组件,我们就可以直接在html直接写了,全局可以。

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 定义全局组件,两个参数:1,组件名称。2,组件参数
        Vue.component("counter",{
            template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
            data(){
                return {
                    count:0
                }
            }
        })
        var app = new Vue({
            el:"#app"
        })
    
    6.运行结果

    在这里插入图片描述

    展开全文
  • 关于vue项目中 components: { App }, template: '<App/>'的理解 原代码: 效果: 根据名字猜想 new Vue({ el: '#app', router: router, components: { App }, template: '<App/>' }); ...
  • 安装完成之后第一次启动的时候会首先显示Fetching Android SDK component information,等一会儿在Setup Wizard - Downloading Components界面下面开始下载Andorid SDK,因为下载地址被墙的缘故,所以这里会等很长...
  • components

    2018-09-14 20:00:02
    汉化 Hyperledger Explorer is a simple, powerful, easy-to-use, highly maintainable, open source browser for viewing activity on the underlying blockchain network. Users have the ability to configure & ...
  • 微信小程序中组件components的使用

    千次阅读 2020-01-16 11:32:20
    微信小程序中组件components的使用 1、在微信小程序的根目录中创建components文件夹,并创建相应的目录然后在目录中新建components;下面附上图片 在需要使用该组件的文件夹中的.json文件中 "usingComponents": { ...
  • 1. 基本信息 ...组件里面的内容就是你模板的内容 ...components是一个对象,该对象的属性是组件的相关配置信息。 组件当中至少应该拥有template属性或render方法。 使用时,可以将组件的名字作为标签来使用。...
  • 1.@ComponentScans,@ComponentScan作用  @ComponentScan这个注解作用大家应该都熟悉,这里的作用大家应该都知道。用来指定spring注册bean的时候需要扫描的包或者类,还可以指定我们定义的bean名称生成器,代理类型...
  • Spring中部分@Components注解的类无法被@ComponentScan扫描到的问题 今天在做@Spring自动化装配的入门练习时,一个被@Components注解的test类一直无法@ComponentScan扫描到,但其他的被@Components注解的类可以被扫描...
  • @ComponentScan是一个使用非常频繁的注解,该类的作用使得Spring定义Bean非常灵活方便,通过将当前类所在目录的子路径全部扫描,获取包含@Component注解的类,从而生成Bean。本文主要探讨@Co...
  • Springboot注解@ServletComponentScan和@ComponentScan

    万次阅读 多人点赞 2018-12-19 15:04:36
    一、SpringBoot中使用Servlet 在SpringBootApplication上使用@ServletComponentScan注解后,Servlet、Filter、Listener可以直接通过@WebServlet、@WebFilter、@WebListener注解自动注册,无需其他代码。...
  • ** WARNING ** : Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package. Your ApplicationContext is unlikely to start due to a @ComponentScan of the defau
  • 一般情况下,通过ComponentScan注解来配置要扫描的包,默认情况下会自动被扫描进IOC容器的是@Controller、@Service、@Repository、@Component注解的配置类 使用@ComponentScan的示例,其中的value就是指明要扫描的...
  • @ComponentScan 详解

    万次阅读 2018-09-18 23:13:28
    @ComponentScan 的作用就是根据定义的扫描路径,把符合扫描规则的类装配到spring容器中,注解定义如下。 @Retention(RetentionPolicy.RUNTIME) @Target({ElementType.TYPE}) @Documented @Repeatable...
  • @ComponentScan注解怎么用

    千次阅读 2018-07-12 18:37:37
    主要从以下几个方面来介绍一下@ComponentScan注解:@ComponentScan注解是什么@ComponentScan注解的详细使用1,@ComponentScan注解是什么其实很简单,@ComponentScan主要就是定义扫描的路径从中找出标识了需要装配的...
  • 用springboot 写scala代码是最近做的一个项目,但是我启动的时候抛了一个错误,具体就是Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package 大概意思就是...
  • 2. @ComponentScan注解属性 3. @ComponentScan过滤规则说明 4. 自定义扫描过滤规则 5. @ComponentScan原理分析 6. @ComponentScans 1. 说明 与ComponentScan注解相对应的XML配置就是&lt;context:...
  • 学习Spring Boot时,看到了一篇总结的很好的...为什么ComponentScan很重要? 项目中Spring Boot会对哪些包自动执行扫描(Component Scan)? 如何利用Spring Boot定义扫描范围? 项目启动时关于Component Scan的常见报错

空空如也

1 2 3 4 5 ... 20
收藏数 375,467
精华内容 150,186
关键字:

components