精华内容
参与话题
问答
  • 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;

            }

        }

    })

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 安装完成之后第一次启动的时候会首先显示Fetching Android SDK component information,等一会儿在Setup Wizard - Downloading Components界面下面开始下载Andorid SDK,因为下载地址被墙的缘故,所以这里会等很长...

    安装完成之后第一次启动的时候会首先显示Fetching Android SDK component information,等一会儿在Setup Wizard - Downloading Components界面下面开始下载Andorid SDK,因为下载地址被墙的缘故,所以这里会等很长时间,最后提示下载失败。

    android-studio-1

    android-studio-2

     

    解决方法:在任务管理器中手工关掉关闭这个安装向导,然后打开Android Studio安装目录的/bin目录下的idea.properties文件,添加一条禁用开始运行向导的配置项:

    disable.android.first.run=true

    然后再启动Android Studio就会打开项目向导界面,这个时候如果点击Start a new Android Studio project是没有反应的,并且在Configure下面的SDK Manager是灰色的,这是因为没有安装Android SDK的缘故。

    anroid-studio-3

    配置sdk;选configure→project defaults →project structure到这么一个界面配置android sdk 和jdk的路径

    展开全文
  • 快速搞懂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.运行结果

    在这里插入图片描述

    展开全文
  • 配置components引入不需要../

    千次阅读 2017-05-11 10:54:41
    'components': path.resolve(__dirname, '../src/components')
  • 关于vue项目中 components: { App }, template: '<App/>'的理解 原代码: 效果: 根据名字猜想 new Vue({ el: '#app', router: router, components: { App }, template: '<App/>' }); ...
  • 微信小程序中组件components的使用

    千次阅读 2020-01-16 11:32:20
    微信小程序中组件components的使用 1、在微信小程序的根目录中创建components文件夹,并创建相应的目录然后在目录中新建components;下面附上图片 在需要使用该组件的文件夹中的.json文件中 "usingComponents": { ...
  • 1. 基本信息 ...组件里面的内容就是你模板的内容 ...components是一个对象,该对象的属性是组件的相关配置信息。 组件当中至少应该拥有template属性或render方法。 使用时,可以将组件的名字作为标签来使用。...
  • Vue Components

    2020-03-06 21:53:32
    Components are reusable Vue instances with a name <div id="components-demo"> <button-counter></button-counter> </div> // Define a new component called button-counter Vue....
  • vue components 注册方法

    千次阅读 2017-08-29 09:58:24
    第一步 在主页面import import shopcart from '../shopcart/shopcart'; import cartcontrol from '../cartcontrol/cartcontrol';第二步 在 JS里面调用组件 components: { shopcart, cartcontrol }, 第三
  • VUE components 自定义组件

    千次阅读 2018-08-31 17:09:14
    vue编写界面,拆分功能,简化当前文件中的逻辑功能。 1、定义单机动作; 2、指向 3、自定义组件 命名问题:HTML特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCased(驼峰式)命名的prop...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&...
  • vue 自定义components

    千次阅读 2018-06-03 13:59:26
    使用vue编写界面的时候,我们需要把一个界面里面的不同功能进行拆分,拆分到其他的文件里面,这样的逻辑更加清晰,不多说了,直接上代码,看下如何进行拆分:&lt;template&gt; &lt;div &gt; &...
  • import headTop from ‘…/…/components/headTop’ 2:申明组件 components:{ headTop } 3:使用组件 <head-top></head-top> 父组件传递数据子组件 , 父组件在模板中调用子组件 父组件:负责创建数据...
  • Vue.components模块的使用方式

    千次阅读 2019-04-12 16:41:30
    在我们开发的过程中会遇到很多可以重复使用的代码块,而Vue则提供了这样的封装方式也就是Vue.component 它里Vue模块的一种声明方式,也相当于一个小的Vue文件,它也有类似真正的Vue文件一样的生命周期,比如说 ...
  • 1、新建一个公共文件夹,components 2、在components里新建js文件selectDate.js和html文件selectDate.html 3、在pageRegister中注册该组件: 如要在add.js所在的页面下注册并使用该组件,将component标签写到...
  • vue 一般使用的别名 ‘@’: resolve(‘src’), 把本地图片放置到assets文件夹中 输入以下代码 <img src="@/assets/logo.png"> 即可 做参考
  • 一、组件(vue文件)的组成结构 <!--页面模板--> <template> <div> {{msg}}</div> </template> <!--JS 模块对象--> <script> export default { data () { return {...
  • vue-cli 3.0 项目,使用components组件化开发,可以减少不必要重复的代码 初始化vue-cli3.0的项目的结构目录下的src下会有个components文件夹 建议:在components中创建对应模块的文件夹,存放该模块的公共组件 ...
  • vue components

    2018-06-01 13:20:00
    https://github.com/vuejs/awesome-vue#components--libraries 转载于:https://www.cnblogs.com/wangjixianyun/p/9121198.html
  • 废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件的通讯</title> </head> ... &...
  • 例如,我们如果只是简单的在components下面建一个文件夹common,并把组件放在common下面,那么在引用的时候,会提示错误, 这个时候,解决方案如下: 在 build\webpack.base.conf.js中 resolve添加 ‘common’: ...
  • components:{  login //即:组件名字和组件模板对象都是login,相当于:‘login’:login。其实上面图中定义私有组件时,组件名字一般用字符串形式。 } 转载于:...
  • 在/components目录下创建tabBar.vue <template> <div class="barBar-container"> <div class="barBar-item" v-for="(item ,index) in tabBarImg" :key="index" @click="switchToTab(item.path...
  • 一个vue页面使用多个components

    万次阅读 2019-01-07 11:06:31
    第一步: 在compoents目录下创建多个组件;     第二步: 在App.vue中添加多个router-view标签,别忘了写name;       第三步:修改router目录下的index.js文件;  ...
  • vue-styled-components

    千次阅读 2018-04-21 14:20:40
    1. 安装npm install vue-styled-components2. 在一个组件中引入&lt;template&gt; &lt;div&gt; &lt;StyleButton background='#000'&gt;马上投标&lt;/StyleButton&gt; &lt;/...
  • Vue下的components模板间的数据流 晴 微风 温度 12-24°C 在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单...
  • 没想到用了vue这就久了,能遇到这种神奇的问题,记录一下。。。 项目是多入口的打包方式,所以有多个router来写路由 在其中一个入口分支的所有相关页面都没有 引入的组件的样式。这个样式是写在 components 里面的...
  • data:Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对) 可以写成: data () { return { dataForm: { xxx: ‘’, xxx:...
  • 今天一上午都耗在了这里,本来想写一个404页面的,但是写好后怎么都跳转不过去,最后才发现把component写成了components,还是vscode直接提示我的,我根本没发现!...再顺手贴一篇vue中容易混淆的单词 总结componen

空空如也

1 2 3 4 5 ... 20
收藏数 339,866
精华内容 135,946
关键字:

components